{"id":118,"date":"2023-07-01T15:00:56","date_gmt":"2023-07-01T15:00:56","guid":{"rendered":"http:\/\/local.tutorials\/?p=118"},"modified":"2023-07-01T15:01:01","modified_gmt":"2023-07-01T15:01:01","slug":"how-to-underline-text-in-html","status":"publish","type":"post","link":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/","title":{"rendered":"How to Underline Text in HTML: A Beginner&#8217;s Guide"},"content":{"rendered":"\n<p>One popular way to emphasize text is by underlining it. In this blog post, we will explore the different methods to underline text in HTML, from the basic &lt;u> tag to CSS styling techniques. HTML (Hypertext Markup Language) is the backbone of the web, allowing us to structure and format our content be it layout, formatting text or forming the basis of navigation. <a href=\"http:\/\/local.tutorials\/topic\/html-tutorial\/\">We have published a full HTML tutorial<\/a> where you can learn all you need to know about HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Underline Text Using the &lt;u> Tag<\/h2>\n\n\n\n<p>The most straightforward way to underline text in HTML is by using the <code>&lt;u&gt;<\/code> tag. This tag is used to enclose the text you want to underline. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p&gt;This is an &lt;u&gt;underlined&lt;\/u&gt; text.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>By wrapping the desired text with the <code>&lt;u&gt;<\/code> opening and closing tags, the text will appear underlined when rendered in a web browser.<\/p>\n\n\n\n<p>Note:  <em>The <code>&lt;u&gt;<\/code> element was deprecated in HTML 4.01, but in HTML5 it was redefined to represent text that should be displayed in a way that is an\u00a0unarticulated\u00a0but stylistically distinct from the surrounding text.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using CSS Styling<\/h2>\n\n\n\n<p>HTML provides us with various options to customize the appearance of our content. By leveraging CSS (Cascading Style Sheets), we can achieve more control over underlined text.<\/p>\n\n\n\n<p><strong>a) Inline CSS:<\/strong> Inline CSS allows you to apply styling directly to individual HTML elements. To underline text using inline CSS, you can use the <code>text-decoration<\/code> property with the value <code>underline<\/code>. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p style=&quot;text-decoration: underline;&quot;&gt;This is an underlined text.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>The <code>text-decoration<\/code> property sets the decoration to be applied to the text, and the <code>underline<\/code> value specifies that the text should be underlined.<\/p>\n\n\n\n<p><strong>b) Internal CSS:<\/strong> Internal CSS is defined within the <code>&lt;style&gt;<\/code> tags in the <code>&lt;head&gt;<\/code> section of an HTML document. To underline text using internal CSS, you can target the desired HTML element and apply the <code>text-decoration<\/code> property with the value <code>underline<\/code>. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;head&gt;\n  &lt;style&gt;\n    p {\n      text-decoration: underline;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;This is an underlined text.&lt;\/p&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>In this example, the <code>&lt;style&gt;<\/code> block targets the <code>&lt;p&gt;<\/code> element and sets the <code>text-decoration<\/code> property to <code>underline<\/code>, resulting in the text being underlined.<\/p>\n\n\n\n<p><strong>c) External CSS:<\/strong> External CSS allows you to define the styles in a separate CSS file, which can be linked to multiple HTML documents. To underline text using an external CSS file, create a CSS file (e.g., <code>styles.css<\/code>) and define the styling rules. Here&#8217;s an example:<\/p>\n\n\n\n<p>styles.css:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">p {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<p>The HTML file:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;head&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;This is an underlined text.&lt;\/p&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>In this example, the <code>styles.css<\/code> file is linked to the HTML document using the <code>&lt;link&gt;<\/code> tag. The CSS rule in the file applies the <code>text-decoration<\/code> property with the value <code>underline<\/code> to the <code>&lt;p&gt;<\/code> element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adding emphasis to your text by underlining it is a simple yet effective way to draw attention to important information on your web page. Whether you choose to use the <code>&lt;u&gt;<\/code> tag or leverage CSS styling options, HTML provides you with the flexibility to underline text according to your design preferences. Experiment with these techniques and create visually appealing content that captivates your audience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One popular way to emphasize text is by underlining it. In this blog post, we will explore the different methods to underline text in HTML, from the basic &lt;u> tag to CSS styling techniques. HTML (Hypertext Markup Language) is the backbone of the web, allowing us to structure and format our content be it layout, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,43],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Underline Text in HTML: A Quick Guide<\/title>\n<meta name=\"description\" content=\"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Underline Text in HTML: A Quick Guide\" \/>\n<meta property=\"og:description\" content=\"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-01T15:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-01T15:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2023\/07\/underline-text-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Site Host\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Site Host\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\"},\"author\":{\"name\":\"Site Host\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/person\/3eba4571fede401a117f07e3b0b0d322\"},\"headline\":\"How to Underline Text in HTML: A Beginner&#8217;s Guide\",\"datePublished\":\"2023-07-01T15:00:56+00:00\",\"dateModified\":\"2023-07-01T15:01:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\"},\"wordCount\":474,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"articleSection\":[\"Guides\",\"How To\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\",\"url\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\",\"name\":\"How to Underline Text in HTML: A Quick Guide\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2023-07-01T15:00:56+00:00\",\"dateModified\":\"2023-07-01T15:01:01+00:00\",\"description\":\"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Underline Text in HTML: A Beginner&#8217;s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/person\/3eba4571fede401a117f07e3b0b0d322\",\"name\":\"Site Host\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Site Host\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.tutorials\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Underline Text in HTML: A Quick Guide","description":"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Underline Text in HTML: A Quick Guide","og_description":"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques","og_url":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_published_time":"2023-07-01T15:00:56+00:00","article_modified_time":"2023-07-01T15:01:01+00:00","og_image":[{"width":1280,"height":680,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2023\/07\/underline-text-html.jpg","type":"image\/jpeg"}],"author":"Site Host","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Site Host","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#article","isPartOf":{"@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/"},"author":{"name":"Site Host","@id":"http:\/\/local.tutorials\/#\/schema\/person\/3eba4571fede401a117f07e3b0b0d322"},"headline":"How to Underline Text in HTML: A Beginner&#8217;s Guide","datePublished":"2023-07-01T15:00:56+00:00","dateModified":"2023-07-01T15:01:01+00:00","mainEntityOfPage":{"@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/"},"wordCount":474,"commentCount":0,"publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"articleSection":["Guides","How To"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.tutorials\/how-to-underline-text-in-html\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/","url":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/","name":"How to Underline Text in HTML: A Quick Guide","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2023-07-01T15:00:56+00:00","dateModified":"2023-07-01T15:01:01+00:00","description":"In this guide we will explore the different methods to underline text in HTML, from the basic tag to CSS styling techniques","breadcrumb":{"@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/how-to-underline-text-in-html\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/how-to-underline-text-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"How to Underline Text in HTML: A Beginner&#8217;s Guide"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]},{"@type":"Person","@id":"http:\/\/local.tutorials\/#\/schema\/person\/3eba4571fede401a117f07e3b0b0d322","name":"Site Host","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Site Host"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.tutorials\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/posts\/118"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":1,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":120,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/posts\/118\/revisions\/120"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/119"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}