Underlined text in HTML
Highlighting text using underline
Because underlining is widely used for hyperlinks on web sites, the general recommendation is not to use underline for text decoration. This, however, shouldn't keep anyone from using underline, but only serve as a recommendation that you use underline with care, so the reader intuitively can see that it is an underline, not a hyperlink.
Underline can be done in two ways: The tag <U> or STYLE="text-decoration:underline". Style needs to be applied on a tag which is a text section, e.g. <P>, <DIV> and <SPAN>. The way underline is normally used in text, <SPAN> will usually be a good solution. As far as I have tested the two ways of underlining, they give exacly the same effect, also in combination with other styles. Officially HTML 5 does not support the U tag, and when validating the codem a warning or error message will appear, but the underline appears without any problems.
A piece of text using underline vil look like this as code:
On the page, when shown, it looks like this:
Underline can be done in two ways: The tag <U> or STYLE="text-decoration:underline". Style needs to be applied on a tag which is a text section, e.g. <P>, <DIV> and <SPAN>. The way underline is normally used in text, <SPAN> will usually be a good solution. As far as I have tested the two ways of underlining, they give exacly the same effect, also in combination with other styles. Officially HTML 5 does not support the U tag, and when validating the codem a warning or error message will appear, but the underline appears without any problems.
A piece of text using underline vil look like this as code:
Here the text is normal, <U>here the text is underlined using the U tag,</U> and here the text return to normal.
Here the text is normal, <SPAN STYLE="text-decoration:underline">here the text is underlined using text-decoration:underline,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text is underlined using the U tag, and here the text return to normal.
Here the text is normal, here the text is underlined using text-decoration:underline, and here the text return to normal.
Combination effects with other types of styling
This type of styling is, in combination with other effects, very sensitive towards programming and browser. So, here it is of utmost importance to test the combinations on the various browser typers.
The thickness of the line is affected on some browsers, when the text becomes bold, so here you should be a bit careful about the combinations. When working on a text string that is already styled by a tag like <SPAN>, I usually recommend adding the styling to this, if possible. It is a practical thing about clarity of the code. The code for combinations, in this case, looks like this:
On the page, when shown, it looks like this:
The thickness of the line is also affected by the font size, but the effect depends on the browser. Here you also have to be aware of combination effects, where variations in programming can cause differences in the effects.
If we look at at temporary change to 16.0 pt, where each section is controlled by it's own set of code, the code looks like this:
On the page, when shown, it looks like this:
On the other hand, if you make a section with a new font size inside the section having the underline, the code looks like this:
On the page, it looks like this:
The thickness of the line is affected on some browsers, when the text becomes bold, so here you should be a bit careful about the combinations. When working on a text string that is already styled by a tag like <SPAN>, I usually recommend adding the styling to this, if possible. It is a practical thing about clarity of the code. The code for combinations, in this case, looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:underline; font-weight:bold">here the text becomes bold and underlined,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text becomes bold and underlined, and here the text return to normal.
The thickness of the line is also affected by the font size, but the effect depends on the browser. Here you also have to be aware of combination effects, where variations in programming can cause differences in the effects.
If we look at at temporary change to 16.0 pt, where each section is controlled by it's own set of code, the code looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:underline">here the text is underlined,</SPAN> <SPAN STYLE="text-decoration:underline; font-size:16pt;">here the underlined text changes to 16.0 pt,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text is underlined, here the underlined text changes to 16.0 pt, and here the text return to normal.
On the other hand, if you make a section with a new font size inside the section having the underline, the code looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:underline">here the text is underlined, <SPAN STYLE="font-size:16pt;">here the text changes to 16.0 pt,</SPAN></SPAN> and here the text return to normal.
On the page, it looks like this:
Here the text is normal, here the text is underlined, here the text changes to 16.0 pt, and here the text return to normal.