Scribd
Upload
20 views

HTML Semantics - Javatpoint

This is HTML Semantics - javatpoint

Uploaded by

Tanuja Bhatt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

HTML Semantics - Javatpoint

This is HTML Semantics - javatpoint

Uploaded by

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

2/5/24, 9:29 PM HTML Semantics - javatpoint

Home HTML XHTML CSS JavaScript Bootstrap jQuery PHP

https://www.javatpoint.com/html5-semantics 1/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

HTML5 Semantics
In any language, it is essential to understand the meaning of words during communication. And if
this is a computer communication then it becomes more critical. So HTML5 provides more semantic
elements which make easy understanding of the code.

Hence Semantics defines the meaning of words and phrases, i.e.

Semantic elements= elements with a meaning. Semantic elements have a simple and clear meaning
for both, the browser and the developer.

For example:

In HTML4 we have seen <div>, <span> etc. are which are non-semantic elements. They don't tell
anything about its content.

On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly
define their content.

HTML5 semantic elements are supported by all major browsers.

Why to use semantic elements?


In HTML4, developers have to use their own id/class names to style elements: header, top, bottom,
footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

This is so difficult for search engines to identify the correct web page content. Now in HTML5
elements (<header> <footer> <nav> <section> <article>), this will become easier. It now allows
data to be shared and reused across applications, enterprises, and communities."

Semantic elements can increase the accessibility of your website, and also helps to create a better
website structure.

Semantic Elements in HTML5

Index Semantic Description


Tag

1. <article> Defines an article

2. <aside> Defines content aside from the page content

https://www.javatpoint.com/html5-semantics 2/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

3. <details> Defines additional details that the user can view or hide

4. <figcaption> Defines a caption for a <figure> element

5. <figure> Specifies self-contained content, like illustrations, diagrams, photos,


code listings, etc.

6. <footer> Defines a footer for a document or section

7. <header> Specifies a header for a document or section

8. <main> Specifies the main content of a document

9. <mark> Defines marked/highlighted text

10. <nav> Defines navigation links

11. <section> Defines a section in a document

12. <summary> Defines a visible heading for a <details> element

13. <time> Defines a date/time

Some important semantic elements in HTML5


HTML5 <article> Element

HTML <article> element defines article content within a document, page, application, or a website.
It can be used to represent a forum post, a magazine, a newspaper article, or a big story.

Example:

<article>
<h2>Today's highlights</h2>
<p>First story</p>
<p>Second story</p>
<p>Third story</p>
</article>

Test it Now

https://www.javatpoint.com/html5-semantics 3/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

HTML5 <aside> Element

The <aside> element represent the content which is indirectly giving information to the main
content of the page. It is frequently represented as a sidebar.

Example:

<body>
<h2>My last year memories</h2>
<p>I have visited Paris with my friends last month. This was the memorable journey and i wish to g
</p>
<aside>
<h4>Paris</h4>
<p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronom
</aside>
</body>

Test it Now

HTML5 <section> Element

The <section> element is used to represent the standalone section within an HTML document. A
page can have various sections and each section can contain any content, but headings for each
section is not mandatory.

Example:

<h2>Web designing Tutorial</h2>


<section>
<h3>HTML</h3>
<p>HTML is an acronym which stands for Hyper Text Markup Language which is used for creatin
</p>
</section>
<section>
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
</p>
</section>

Test it Now

https://www.javatpoint.com/html5-semantics 4/10
2/5/24, 9:29 PM HTML Semantics - javatpoint
AD

Nesting <article> tag in <section> tag or Vice Versa?


We know that the<article> element specifies independent, self-contained content and the
<section> element defines section in a document.

In HTML, we can use <section> elements within <article> elements, and <article> elements within
<section> elements.

We can also use <section> elements within <section> elements, and <article> elements within
<article> elements.

For example:

In a newspaper, the sport <article> in the sport section, may have a technical section in each
<article>.

HTML5 <nav> Element

The HTML <nav> element is used to define a set of navigation links.


AD

Example:

<!DOCTYPE html>
<html>
<body>
<nav>
<a href="https://www.javatpoint.com/html-tutorial">HTML</a> |
<a href="https://www.javatpoint.com/java-tutorial">Java</a> |
<a href="https://www.javatpoint.com/php-tutorial">PHP</a> |
<a href="https://www.javatpoint.com/css-tutorial">CSS</a>
</nav>
</body>
</html>

https://www.javatpoint.com/html5-semantics 5/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

Test it Now

HTML5 <header> Element

The <header> element represent the header of the document which can contain introductory
content or navigation links.

Example:

<header>
<h1>Welcome to Web123.com</h1>
<nav>
<ul>
<li>Home |</li>
<li>About us |</li>
<li>Contact us</li>
</ul>
</nav>
</header>

Test it Now

HTML5 <footer> Element

The <footer> tag defines the footer of an HTML document or page.

Example:

<footer>
<p>© Copyright 2019. All rights reserved. </p>
</footer>

Test it Now

← Prev Next →

https://www.javatpoint.com/html5-semantics 6/10
2/5/24, 9:29 PM HTML Semantics - javatpoint
AD

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk SPSS Swagger Transact-SQL

Tumblr ReactJS Regex Reinforcement


Learning

R Programming RxJS tutorial React Native Python Design


tutorial tutorial Patterns
RxJS

https://www.javatpoint.com/html5-semantics 7/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

R Programming React Native Python Design


Python Pillow Patterns
Python Turtle
tutorial tutorial
Python Pillow Python Turtle

Keras tutorial
Keras

Preparation

Aptitude Logical Verbal Ability Interview


Reasoning Questions
Aptitude Verbal Ability
Reasoning Interview Questions

Company
Interview
Questions
Company Questions

Trending Technologies

Artificial AWS Tutorial Selenium Cloud


Intelligence tutorial Computing
AWS
Artificial Selenium Cloud Computing
Intelligence

Hadoop tutorial ReactJS Data Science Angular 7


Tutorial Tutorial Tutorial
Hadoop
ReactJS Data Science Angular 7

Blockchain Git Tutorial Machine DevOps


Tutorial Learning Tutorial Tutorial
Git

https://www.javatpoint.com/html5-semantics 8/10
2/5/24, 9:29 PM HTML Semantics - javatpoint

Blockchain Machine Learning DevOps

B.Tech / MCA

DBMS tutorial Data Structures DAA tutorial Operating


tutorial System
DBMS DAA
Data Structures Operating System

Computer Compiler Computer Discrete


Network tutorial Design tutorial Organization and Mathematics
Architecture Tutorial
Computer Network Compiler Design
Computer Discrete
Organization Mathematics

Ethical Hacking Computer Software html tutorial


Graphics Tutorial Engineering
Ethical Hacking Web Technology
Computer Graphics Software
Engineering

Cyber Security Automata C Language C++ tutorial


tutorial Tutorial tutorial
C++
Cyber Security Automata C Programming

Java tutorial .Net Python tutorial List of


Framework Programs
Java Python
tutorial
Programs
.Net

Control Data Mining Data


Systems tutorial Tutorial Warehouse
Tutorial
Control System Data Mining
Data Warehouse

https://www.javatpoint.com/html5-semantics 9/10
2/5/24, 9:29 PM HTML Semantics - javatpoint
AD

https://www.javatpoint.com/html5-semantics 10/10

You might also like