Semantic HTML: more than just tags

Learn how semantic HTML improves accessibility and SEO, unlocking better code practices for interviews and production.

When tasked with building a web page, many developers default to using <div> and <span> elements, inadvertently missing out on the power of semantic HTML. This oversight can lead to poor accessibility, SEO issues, and ineffective communication of a webpage’s structure. Understanding why and when to use these elements properly is critical, both for code submissions during interviews and for effective long-term maintenance in production.

The Importance of Semantic HTML in Practice

Semantic HTML serves as a backbone for both accessibility and search engine optimization (SEO). Elements like <header>, <footer>, <article>, and <section> give meaning to your markup, helping browsers and assistive technologies understand the structure of your content rather than just displaying it. When interviewers ask about the difference between tags like <div> and <span>, they are probing your understanding of semantic design versus layout elements.

Example Scenario

Consider a basic HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Semantic Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
    </header>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Some content goes here...</p>
        </article>
        <aside>
            <h2>Related Links</h2>
            <ul>
                <li><a href="#">Link 1</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
</body>
</html>

By using semantic tags, the content is more easily understood by search engines and is also more accessible to users with disabilities who rely on screen readers. A screen reader may read out that there is a header, a main article, and a footer, giving context to the reader.

Interview Traps

When faced with interview questions about HTML elements, candidates often stumble on:

Misunderstanding Semantic Tags: Candidates sometimes treat all elements as interchangeable. For example, using <div> for every container disregards the semantic purpose, which may lead to lower accessibility scores.
Element Functionality: Knowing the purpose of specific elements like <title> or <meta> is crucial. Candidates may trip up if they can't immediately explain how these elements contribute to page SEO and user experience.
Accessibility Overhead: When discussing attributes like alt for images, candidates may not emphasize the importance of this feature for accessibility. Missing this can indicate a lack of awareness about inclusive design practices.
Document Structure: Candidates can get confused about the correct order and nesting of HTML elements; getting this wrong can lead to broken layouts and negatively impact SEO.

A Worked Example

Let’s delve into a practical approach to one of the interview traps: the difference between <div> and <span>. Consider a scenario where you are asked to decide which element to use for styling a block of text versus an inline text fragment.

Recognizing Use Cases: <div> is a block-level element, ideal for structuring sections of an interface (think layout containers), while <span> is inline, perfect for styling a subset of content within block elements.
```
<div class="notice">
   <h2>Important Update</h2>
   <span class="highlight">This section will change your life!</span>
</div>
```
In the above code, the <div> groups the notification, whereas <span> highlights a specific text within.
Consequence of Misuse: If you used a <div> instead of a <span> for inline text, the result could be incorrect rendering or even layout issues since a block element might enforce line breaks. An interviewer might probe, asking you to explain this choice and its impacts on both layout and browser rendering.
Highlighting Best Practices: Explain that while both elements can appear similar at first glance, their purpose is dictated by their nature. Good developers adopt a semantic approach to ensure their code is not only functional but also maintainable.

On the Job: Consequences in Production

In real-world applications, failing to use proper semantic HTML can lead to significant setbacks:

SEO Deterioration: Using a plethora of <div> elements without structure can dilute a site's SEO efficacy. Search engines may struggle to comprehend and rank the content properly, leading to poor visibility.
Accessibility Issues: If elements are not semantically appropriate, it can result in inaccessible websites. Users relying on assistive technologies may face difficulties navigating the content, potentially facing exclusion from vital information.
Higher Maintenance Costs: Poor initial code structure translates to greater difficulty in maintaining or updating the code in the future. A future developer (or even yourself) might spend more time refactoring the code to improve accessibility or SEO rather than focusing on new features.

By making small, conscious decisions about your HTML structure, both during development and on interviews, you demonstrate not only your technical skills but also a deep understanding of web best practices.

References

Practice

Ready to practice HTML?

Answer real questions, get instant feedback, and watch your skill score climb — free. Practice is in English, like real tech interviews.

Try one 👇

ReactHooksMid

0 XP

When does useEffect run by default?

↑ Go ahead — pick an answer. This is Skillpato.

Start practicing