How to Underline in HTML
In print documents, underlining text is sometimes used as a design feature.
On the Web, underlined text is problematic, because underlined text indicates a hyperlink.
This causes confusion for readers who try to click the text expecting a new page to open.
However, since there may be occasions when you need to underline text for emphasis, the instructions are below.
HTML tags used to underline text in Web pages are:
An example of using the tags to underline text using HTML is:
Browsers render the above example as:
Underline this Text
Historical Use of Underlining
According to Butterick’s Practical Typography, when documents were typed on a typewriter, underlining text indicated italicized text to printers and publishers. With word processors, this practice fell out of favor, since text can be pre-formatted in italics before a document goes to a printer.
Better Choices for Formatting
On the Web, underlining is seldom used as a design feature, but is instead used to indicate a hyperlink. Better choices for formatting text for the Web are bolding text, increasing the font size or color, or changing the typeface.
To keep HTML code cleaner and easier to update or change, a CSS (cascading style sheet) is the preferred method of formatting HTML text. Using CSS, an underline is added to text using the text-decoration-line property.
Why Use CSS?
CSS allows the Web designer to set all the style values, such as bold (or weight), size, color and more for each tag in the HTML document, so that all <h1> heading 1 tags in the HTML document are formatted alike and all <p> paragraph tags are formatted exactly the same.
Since the formatting of document elements are set in a separate CSS document, changing all the heading tags to font size 16 pt, and font color #ccc000 is done once for the entire document, instead of the developer having to search for each <h1> tag in the HTML pages of a site to make the changes.
Resources and Additional Reading:
HTML Underline Tag
Underline Summary
CSS Text-Decoration-Line Property
Butterick’s Practical Typography: Underlining
Information: Why Use CSS?
CSS Tutorial
These great books will help you learn more:
No comments:
Post a Comment