HOW TO UNDERLINE TEXT IN HTML

Among several advantages of using HTML to build dynamic websites, there is another factor that is worth noticeable. The ability of ‘text formatting’ or styling has always been a positive reason which allows web designers to apply distinct styles to text contents in websites.

The most common types of text formatting options in HTML are:

  • Bold
  • Italics
  • Underline
  • Superscript
  • Subscript
  • Strikethrough
  • Special Formatting

Therefore, out of these main ‘text formatting’ or styling options, we shall learn a little about using the ‘underline’ styling in HTML as well as CSS.

It is not difficult to understand what ‘underlined text’ means in general. If you have used a word processor software, such as MS Office Word, LibreOffice Writer, AbiWord, etc., you will know what this means. Basically, a text in HTML uses the underline style in order to highlight the text to the readers. This is commonly used in the main headings or titles of a particular paragraph, essay, blog, or any other information for that matter. You will find underlined texts in books, magazines, newspapers, websites, etc.

However, the only factor here is that you have to issue a command, which is called ‘tags (<>)’ in HTML. These tags usually contain commands inside a pair of angular brackets.

Thus, if you are going to apply text styles using HTML in websites, then you will need to use tags.

Using The Underline Style For Text In HTML

By now, you must have got a brief idea of what is an underline text style in HTML. So, in order to use the underline style in HTML, consider the following syntax with example:

<!DOCTYPE html>

<html>

<head>

<title>Underline Style Demo</title>

</head>

<body>

<h1><u>This Heading Is Underlined</u></h1>

<p>The heading on this example uses the “underline” style in HTML.</p>

</body>

</html>

The example given above shows the use of underline text style, which is applied in the main heading of the web page.

Using Underline Style For Text In CSS

In contrast to HTML, the underline style can also be used in Cascading Style Sheets (CSS). However, here, the syntax used is different. CSS is generally embedded in HTML and its main purpose is to stylise the contents in web pages. Therefore, it is advised to use CSS3 (latest version) in HTML5 for the purpose of adding styles in websites.

CSS3 embedded in HTML5 is supported by all web browsers for the display of stylised contents, which includes text, hyperlinks, tables, images, audio, video, etc.

Let’s take a look at how to use CSS3 for displaying underlined text in web pages. In order to style text in the underline format, the “<span>” tag is used as the default syntax. This replaces the “<u>” tag which was used in HTML to display text in underline format (see the example given above).

<span style=”text-decoration: underline;”>This text is using underline style.</span>

The syntax used in CSS3 for styling text is different as compared to the syntax used in HTML5. However, it is known that CSS3 provides more consistency in the styling of contents in web pages than HTML5.

Need Help? Contact Codexoxo For Support

You can contact the experts at Codexoxo for support and assistance with HTML5 and CSS3 without any hesitation. Simply dial the toll-free phone number <enter-phone-number> to get help immediately and at your convenience. We are always glad to assist you round the clock.

Call Now