HTML elements can be divided into two main categories: semantic and non-semantic elements.
Understanding the difference between them is essential for writing clean, modern, and professional HTML.
What Are Non-Semantic Elements
Non-semantic elements do not describe their meaning or purpose.
They are generic containers used mainly for grouping or styling content.
Examples of non-semantic elements include div and span.
By looking at these elements alone, it is not clear what type of content they contain.
In the example above, div elements are used everywhere.
The structure works visually, but the meaning of each section is unclear to browsers and screen readers.
What Are Semantic Elements
Semantic elements clearly describe their meaning and role in a webpage.
They tell both developers and machines what the content represents.
In this example:
- article represents an independent piece of content
- h2 represents the heading
- p represents the paragraph
The structure and meaning are clear and readable.
Key Differences Between Semantic and Non-Semantic Elements
Semantic elements describe content meaning.
Non-semantic elements are generic containers.
Semantic HTML improves accessibility, SEO, and code readability.
When to Use Non-Semantic Elements
Non-semantic elements are still useful for styling and grouping when no semantic element fits the purpose.
They should not replace semantic elements.
Why This Difference Matters for Jobs
Interviewers often ask about semantic vs non-semantic HTML.
Professional developers are expected to prefer semantic elements and use non-semantic elements only when necessary.
Practice Task
Take a div-based layout and rewrite it using semantic elements such as header, section, article, and footer.
What You Will Learn Next
In the next lesson, you will learn how to use header, nav, and footer elements to structure a webpage.