Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Are new HTML5 elements like and useless?
No, HTML5 semantic elements like <section> and <article> are not useless. They are extremely useful for screen readers and assistive technologies, helping visually impaired users navigate and understand the structure of your web page. They are also beneficial for eBook readers, search engines, and any tool that parses HTML for meaning.
While you could use generic <div> tags for everything, semantic elements convey the purpose of the content to both browsers and developers, making your code more readable and accessible.
The <section> Element
The <section> element represents a thematic grouping of content, typically with a heading. Use it to divide a page into logical sections such as chapters, tabs, or topic groups ?
Example
<!DOCTYPE html>
<html>
<body>
<section>
<h2>Java</h2>
<h3>Inheritance</h3>
<p>Inheritance defines the relationship between
superclass and subclass.</p>
</section>
<section>
<h2>Python</h2>
<h3>Data Types</h3>
<p>Python supports integers, floats, strings,
lists, tuples, and dictionaries.</p>
</section>
</body>
</html>
Each <section> groups related content under its own heading, making it clear where one topic ends and another begins.
The <article> Element
The <article> element represents a self-contained piece of content that could stand on its own − such as a blog post, news story, or forum entry. Articles can be nested inside a <main> element and can even contain other <article> elements ?
Example
<!DOCTYPE html>
<html>
<body>
<main>
<h2>Learning</h2>
<p>Learn to gain experience and try to share
your knowledge with others.</p>
<article>
<h3>Web Development Tutorials</h3>
<p>Consist of CSS, HTML, and PHP tutorials
for 2nd Semester exams.</p>
</article>
<article>
<h3>Academic Tutorials</h3>
<p>Consist of Computer Fundamental and Computer
Network tutorials for 1st Semester exams.</p>
</article>
</main>
</body>
</html>
Here, each <article> is a self-contained tutorial category nested inside <main>. A screen reader can let the user jump directly between articles without reading through the entire page.
Difference Between <section> and <article>
| Feature | <section> | <article> |
|---|---|---|
| Purpose | Groups related content thematically | Represents self-contained, independent content |
| Standalone | Not necessarily meaningful on its own | Makes sense on its own (e.g., in an RSS feed) |
| Typical use | Page sections, chapters, tab panels | Blog posts, news articles, comments |
| Nesting | Can contain articles | Can contain other articles or sections |
Conclusion
HTML5 semantic elements like <section> and <article> are far from useless. They improve accessibility for screen readers, help search engines understand your page structure, and make your HTML more readable and maintainable for developers.
199 Views
