When placing content on web pages developers often wish to underline specific text for multiple reasons such as draw users’ attention, style the text or maybe represent a misspelled text. Whatever the reason maybe, if you wish to underline some in html then there are various ways through which this task can be accomplished. These approaches have been discussed in this blog.
How to underline text using tag
For the purpose of underlining a text using the tag simply place the text to be underlined within this tag. The purpose of this tag is to basically to represent a text that is implicit, styled differently or misspelled. The tag was initially eliminated from HTML but was included again in HTML5.
HTML
In the above code, we are simply making a heading and a paragraph. However, we wish to underline a single word inside the paragraph therefore we are wrapping that particular word inside the tag.
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-55.png" data-lazy- height="150" src="data:image/svg xml,” width=”613″>
This is how you can underline text using the tag.
There is another way that lets you underline text and has been discussed in the upcoming section.
How to underline text using style attribute
Another way of underlining text in html is by using the style attribute that defines an inline style for a particular element.
HTML
In the above code, you will notice that we are using the element to underline the word and setting its style attribute to “text-decoration: underline”. This way our desired word will be underlined.
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-55.png" data-lazy- height="150" src="data:image/svg xml,” width=”613″>
The word was successfully underlined using the style attribute.
If you wish to underline a text using CSS then see the code snippet below.
HTML
<html>
<head>
<title>How to underline text in HTML</title>
<style>
span{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a <span>paragraph</span>.</p>
</body>
</html>
Here we are first of all wrapping the word to be underlined inside a element and then using the internal CSS to set the text-decoration property of the element to underline. The code above will generate the same output as above.
Conclusion
For the purpose of underlining a text in html make use of the tag or the style attribute. Simply wrap the text to be underlined inside the tag or when using the style attribute set the text-decoration property to underline. The purpose of the tag is to basically to represent a text that is implicit, styled differently or misspelled, whereas, the style attribute defines an inline style for a particular element.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg625e31f5b8146.jpg" height="112" src="data:image/svg xml,” width=”112″>
Naima Aftab
I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.
