If you’ve ever taken an HTML course, I’m sure you know what it means to write semantic HTML. However, as JavaScript frameworks become more popular it can be easy to forget the fundamental aspects of HTML. Understanding the history, purpose, and correct usage of certain elements can significantly improve the structure and accessibility of web pages. This article delves into these aspects and also addresses common issues I still see today.
The Role of CSS, <b>, and <strong> Tags in Modern Web Development
Using CSS to style text is a common practice in modern web development. To make text bold, developers can use the font-weight property:
.bold-text {
font-weight: bold;
}This method is purely presentational. It allows for greater flexibility in styling and can be easily managed through stylesheets, promoting a clear separation of content and presentation. However, it does not convey any semantic meaning to the content. The bold style applied through CSS is purely for visual effect and does not provide additional context to assistive technologies.
The <b> tag is an HTML element used to render text in bold. Historically, it was intended for presentational purposes, without any implied importance or emphasis:
<p>This is <b>bold</b> text.</p>While the <b> tag still functions and is valid HTML5, its use has evolved. It now conveys that the text is stylistically different from normal text without indicating any added importance or emphasis. This subtle shift emphasizes the need for more precise semantic tags in HTML.
The <strong> tag is used to indicate that the text has strong importance, seriousness, or urgency. Browsers typically render <strong> text in bold, but the tag also carries semantic meaning, enhancing accessibility:
<p>This is <strong>important</strong> text.</p>Screen readers interpret the <strong> tag as a cue to emphasize the text, often with a different tone or inflection, signaling its importance to visually impaired users. This added layer of semantic meaning makes the <strong> tag a powerful tool for creating accessible web content.
When to Use Each
- CSS: Use CSS for visual styling when you want to make text bold purely for aesthetic reasons without conveying any additional meaning.
<b>Tag: Use the<b>tag when you want to stylistically differentiate text without implying extra importance or emphasis.<strong>Tag: Use the<strong>tag to denote text that has significant importance or needs to be emphasized, enhancing both visual presentation and accessibility.
Recommendation
Consult your team’s designer, accessibility-specialist or other devs if you’re unsure when to use any of these options.
A Brief History of the <br> Tag
Early Days
The <br> tag was introduced in HTML 1.0 in 1991 by Tim Berners-Lee to create line breaks within text. It allowed web developers to control text layout without starting new paragraphs.
Evolution
Standardized in HTML 2.0 by the IETF in 1995, the <br> tag became a staple for inserting line breaks. HTML 4.01, released in 1999, emphasized its use within blocks of text rather than between blocks.
Modern Use
With HTML5 in 2014, the <br> tag remained valid but with a focus on semantic HTML and accessibility. Overuse of <br> can disrupt screen reader flow, leading to best practices recommending semantic alternatives.
Issues with the <br> Tag and Better Alternatives
The <br> tag introduces a line break in text, commonly used to separate lines within a paragraph:
<p>This is a line break<br>within a paragraph.</p>While the <br> tag is useful for controlling line breaks in specific scenarios, it can pose accessibility issues. Screen readers announce the <br> tag as a pause or break, (for Mac VO it will announce “empty group”) which might be confusing to the user. Overuse of <br> tags can lead to a disjointed experience for users relying on assistive technologies.
Better Alternatives: Using Paragraph Tags
A more semantic approach is to use multiple <p> tags to separate blocks of text. This method gives the document a clearer structure and improves accessibility:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>Using <p> tags provides semantic meaning, indicating distinct blocks of text. Screen readers interpret each paragraph as a separate unit, improving the user’s understanding of the content structure.
Recommendation
Avoid using the <br> tag when possible to define separated text. There are times it might be useful for poetry and other edge cases, but most of the time we have better options available to achieve the same effect.
When to use the <hr> Tag
The decision between using the <hr> tag and a CSS-styled <div> for creating separators is somewhat subjective and can depend on various factors, including design requirements, project guidelines, and personal or team preferences.
When to Use an <hr> tag:
- Thematic Breaks: Use the
<hr>tag when you need to represent a thematic break or change in topic within content, such as between sections of an article or blog post. - Quick Implementation: When you need a quick, out-of-the-box solution for a horizontal line that does not require extensive customization.
- Accessibility: When you want to ensure immediate semantic meaning and accessibility with minimal effort. Screen readers recognize
<hr>and announce it as a separator, which can be beneficial for users relying on assistive technologies. You can also add atitleproperty to help announce something specific to the user.
When to Use CSS:
- Custom Styling: When you need more control over the appearance of the separator, such as specific colors, thickness, patterns, or additional design elements that the default
<hr>cannot achieve. - Complex Layouts: When working within complex layouts where a
<div>fits better within the design and structure, such as within grid or flexbox containers. - Accessibility with ARIA: When you prefer a non-semantic element or feel that the line break wouldn’t be helpful for screen reader users.
Recommendation:
The choice between <hr> and CSS with <div> depends on the specific needs of your project. By understanding these factors, you can make an informed decision that best suits your project’s requirements.
Conclusion
Semantic HTML continues to play a crucial role in modern web development. Embracing semantic HTML not only enhances user experience but also ensures that web content is inclusive for all users, regardless of how they access it.