Scribd
Upload
5 views

HTML Semantic Elements (1)

HTML5 introduced semantic elements that enhance the clarity of web content for both users and machines. These elements improve accessibility, SEO, and maintainability by providing clear definitions of content purpose. Key semantic elements include <article>, <aside>, <header>, <footer>, <nav>, and others that help structure web pages logically.

Uploaded by

srideep242n
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML Semantic Elements (1)

HTML5 introduced semantic elements that enhance the clarity of web content for both users and machines. These elements improve accessibility, SEO, and maintainability by providing clear definitions of content purpose. Key semantic elements include <article>, <aside>, <header>, <footer>, <nav>, and others that help structure web pages logically.

Uploaded by

srideep242n
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Semantic elements

HTML5 introduced a range of semantic elements that clearly describe their


purpose in human and machine-readable language. Unlike non-semantic
elements, which provide no information about their content, semantic
elements clearly define their content.

For instance, <form>, <table>, and <article> tags clearly define the content
and purpose, to the browser.

Why Use Semantic HTML Tags?


Accessibility: Semantic elements make web pages more accessible. Screen
readers and other assistive technologies can interpret the structure and
navigate the content more efficiently.
SEO: Better structured data leads to better SEO. Search engines prioritize
well-structured content that uses semantic elements correctly, as it’s easier to
index.
Maintainability: Semantic HTML helps create a logically structured
document, which is easier to read and maintain.

Semantic Elements
Here are some of the fundamental HTML5 semantic elements that you should
use to structure your web content:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>

1. The <article> Tag


The <article> tag is used for content that stands alone and can be
independently distributed or reused, such as a blog post or news article.

2. The <aside> Tag


It is used to place content in a sidebar i.e. aside from the existing content. It is
related to surrounding content.

3. The Details and Summary Tag


The “details” defines additional details that the user can hide or view.
“summary” defines a visible heading for a “details” element.

4. The Figure and Figcaption Tag


These are used to add an image to a web page with a small description.

5. The Header Tag


As the name suggests, it is for the header of a section introductory of a page.
There can be multiple headers on a page.

6. The Footer Tag


Footer located at the bottom of any article or document, they can contain
contact details, copyright information etc. There can be multiple footers on a
page.

7. The Main Tag


It defines the main content of the document. The content inside the main tag
should be unique.

8. The Section Tag


A page can be split into sections like Introduction, Contact Information,
Details, etc and each of these sections can be in a different section tag.

9. The nav Tag


It is used to define a set of navigation links in the form of a navigation bar or
nav menu.

10. The Mark Tag


It is used to highlight the text.

You might also like