Underline Tag In HTML - Plus2net

Home » How To Underline On Html » Underline Tag In HTML - Plus2net

Maybe your like

  1. HTML
  2. Page Structure
  3. <BODY>
WE can add underline to any part of the text by using <u> tag. Here is some sample code. This is normal text and this part of the text is underlined , this is normal. The above text is written like this. This is normal text and <u>this part of the text is underlined</u> , this is normal Please note that as a practice hyperlinks are underlined so by just adding underline we have to take care to differentiate from a link. <u> tag is going to be deprecated so avoid using them. It is advisable to use CSS for underline text.

Using CSS

<style> my_text { text-decoration: underline; } </style> <p> Plus2net.com is a site for <my_text>web programming</my_text> and learning SEO</p> Using Inline Style <p> Plus2net.com is a site for <span style="text-decoration: underline;">web programming</span> and learning SEO</p> Output is here

Plus2net.com is a site for web programming and learning SEO

Using internal style with U underline tag

<style> u { font-size: 40px; color:red; } </style>

Using the <u> Tag: Considerations

The <u> tag is traditionally used to underline text. However, its usage has evolved, and it's now primarily used to represent non-textual annotations, such as proper names in Chinese text or to indicate misspelled words. Overusing the <u> tag for decorative underlining can lead to confusion, as underlined text is often associated with hyperlinks. Therefore, it's advisable to use CSS for styling purposes.

Advanced CSS Techniques for Underlining Text

CSS offers a variety of properties to style underlines, providing more flexibility and control over their appearance.

1. Customizing Underline Style

We can use the text-decoration property to customize the style, color, and thickness of underlines.

<style> .underline-solid { text-decoration: underline; text-decoration-color: blue; text-decoration-style: solid; text-decoration-thickness: 2px; } .underline-dashed { text-decoration: underline; text-decoration-color: red; text-decoration-style: dashed; text-decoration-thickness: 2px; } .underline-wavy { text-decoration: underline; text-decoration-color: green; text-decoration-style: wavy; text-decoration-thickness: 2px; } </style> <p class="underline-solid">This text has a solid blue underline.</p> <p class="underline-dashed">This text has a dashed red underline.</p> <p class="underline-wavy">This text has a wavy green underline.</p>

In these examples, we apply different underline styles using CSS classes. The text-decoration property allows us to define the line's style, color, and thickness.

2. Underline Positioning

The text-underline-position property specifies the position of the underline. By default, the underline is positioned under the text, but we can adjust its position as needed.

<style> .underline-auto { text-decoration: underline; text-underline-position: auto; } .underline-under { text-decoration: underline; text-underline-position: under; } </style> <p class="underline-auto">This text has an automatically positioned underline.</p> <p class="underline-under">This text has an underline positioned under the text.</p>

Adjusting the underline position can enhance readability, especially for fonts with descenders. Learn more about text-underline-position.

3. Skipping Ink for Descenders

The text-decoration-skip-ink property controls how underlines interact with descenders (parts of letters that extend below the baseline, such as 'g' or 'y'). Setting this property to auto allows the underline to skip the descenders, resulting in a cleaner appearance.

<style> .skip-ink { text-decoration: underline; text-decoration-skip-ink: auto; } </style> <p class="skip-ink">This text has an underline that skips descenders.</p>

Using text-decoration-skip-ink improves the visual quality of underlined text by preventing the line from intersecting with descenders. .

4. Animated Underlines on Hover

We can create interactive effects by animating underlines when a user hovers over text. This technique is often used for navigation menus or links to enhance user experience.

<style> .underline-hover { position: relative; display: inline-block; } .underline-hover::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: orange; left: 0; bottom: -2px; transform: scaleX(0); transition: transform 0.3s ease; } .underline-hover:hover::after { transform: scaleX(1); } </style> <p class="underline-hover">Hover over this text to see the underline animation.</p>

In this example, we use pseudo-elements and CSS transitions to create an animated underline effect on hover. This approach enhances interactivity without affecting the document's structure.

5. Gradient Underlines

Applying gradient colors to underlines can add a modern and visually appealing effect to our text.

<style> .gradient-underline { display: inline; background-image: linear-gradient(to right, red, orange); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; text-decoration: none; } </style> <p>This is a <span class="gradient-underline">gradient underlined</span> text.</p>

Here, we use a background image with a linear gradient to simulate an underline effect, allowing for creative color transitions.

Best Practices

  • Avoid Using the <u> Tag for Decorative Underlines: The <u> tag should be used for semantic purposes, such as highlighting misspelled words or proper names in certain languages. For styling purposes, CSS provides better control.
  • Use CSS for Custom Underlines: CSS offers powerful properties like text-decoration, text-underline-position, and text-decoration-skip-ink to achieve various underlining effects without affecting document structure.
  • Ensure Accessibility: Avoid underlining non-clickable text unless it serves a semantic purpose. Users often associate underlined text with hyperlinks, so misusing it can lead to confusion.
  • Consider Readability: Use text-decoration-skip-ink to prevent underlines from intersecting with descenders. This enhances text clarity and improves user experience.
  • Enhance User Interaction: Add hover effects and animations for interactive elements, such as navigation links. This makes the UI more engaging without sacrificing usability.
  • Experiment with Modern Effects: Try gradient underlines or animated underlines to create visually appealing text highlights while maintaining clean and professional styling.

By following these best practices, we can ensure that underlined text is used effectively without compromising readability, usability, or design aesthetics.

DEMO: Underline tag with change in Font size by Style DEMO: Underline tag with change in Font colour by Style Bold Text tag Horizontal Line tag

Tag » How To Underline On Html