Text-decoration can be used to add a couple other interesting formats to your HTML5 and CSS3 web page text, including underline, strikethrough, overline, and blink. For example, the following code produces an underlined paragraph:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>underline.html</title>
<style type = "text/css">
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Underline</h1>
<p>
This paragraph is underlined.
</p>
</body>
</html>
Be careful using underline in web pages. Users have been trained that underlined text is a link, so they may click your underlined text expecting it to take them somewhere.
The underline.html code produces a page similar to this one.
You can also use text-decoration for other effects, such as strikethrough (called "line-through" in CSS), as shown in the following code:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>strikethrough.html</title>
<style type = "text/css">
p {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Strikethrough</h1>
<p>
This paragraph has strikethrough text.
</p>
</body>
</html>
Text-decoration has a few other rarely used options, such as
Overline: The overline attribute places a line over the text. Except for a few math and chemistry applications (which would be better done in an equation editor and imported as images), it's hard to say when this might be used.
Blink: The blink attribute is a distant cousin of the legendary tag in Netscape and causes the text to blink on the page. The tag (along with gratuitous animated GIFs) has long been derided as the mark of the amateur. Avoid blinking text at all costs.
There's an old joke among Internet developers: The only legitimate place to use the tag is in this sentence: Schrodinger's cat is not dead. Nothing is funnier than quantum mechanics illustrated in HTML.
