DEV Community

Cover image for Semantic Html
Washera Kibe
Washera Kibe

Posted on

Semantic Html

Semantic Html

What is semantic Html
Semantic Html refers to the use of Html markup that conveys meaning about the web content within it by using well defined Html elements. Developers can create a more meaningful web structure that both users and machines can easily understand. It does not only enhances the clarity and the structure of web pages but also plays an important role in the search engine optimization (SEO). Semantic element clearly describes its meaning to both the browser and the developer.

Why use semantic Html?

  • Improved accessibility
  • Easy to read
  • Easy to write
  • Enhance SEO
  • Future proofing
  • Easier maintenance

Key Semantic Elements

  • header: Represents introductory content
  • nav: Contains navigation links for the document
  • main: Specifies the main content of the document
  • figcaption: Defines the caption of the figure element
  • section: Defines a section in a document
  • article: Defines independent self contained content
  • aside: Defines content aside from the page content
  • footer: Defines a footer of a document or section

How to implement semantic Html

Identify Content Structure:
Analyze your web page's content to identify its logical sections and hierarchy. This includes headers, navigation, main content areas, articles, sidebars, and footers.

Choose Appropriate Semantic Tags:
Select the HTML5 semantic tags that accurately describe the purpose of each content section:

Avoid Misusing Tags for Styling:
Do not use semantic tags like h1 or strong solely for visual effects e.g., making text larger or bold. Instead, use CSS for all styling and presentation.

Minimize Non-Semantic Tags:
While div and span have their uses for styling or grouping, prioritize semantic tags wherever possible to add meaning to your HTML structure.

Validate Your HTML:
Use tools like the W3C HTML Validator to ensure your code adheres to HTML standards and that you are using semantic elements correctly.

Non semantic Html examples
Here's a basic structure using non-semantic elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML</title>
</head>
<body>
    <div>
        <h1>Welcome to My Site</h1>
        <div>
            <h2>About</h2>
            <p>This is an illustration before using Semantic Html.</p>
        </div>
        <div>
            <h2>Contact</h2>
            <p>Email: ckibe@gmail.com</p>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Semantic HTML Example

Now, let's convert the previous example to use semantic elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML</title>
</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
    </header>
    <main>
        <section>
            <h2>About</h2>
            <p>This is an illustration after using Semantic Html.</p>
        </section>
        <section>
            <h2>Contact</h2>
            <p>Email: ckibe@gmail.com</p>
        </section>
    </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Common mistakes to avoid while using semantic Html

  • Improper list formatting
  • Over optimization
  • Incorrect heading hierarchy
  • Neglecting accessibility features

Conclusion
A sematic Web allows data to be shared and reused across applications, enterprises and communities. By structuring your content semantically, you enhance not only the experience of your users but also the ability for search engines to correctly index and rank your pages.

Top comments (0)