Semantic elements: header, footer, article, section, nav, aside
In HTML5, new semantic tags have been launched in HTML hypertext web development script to properly structure the modern responsive web page website content layout. Where different semantic tags introduced in HTML5 have been made available for multiple web development tasks. Which makes the HTML5 web page easy to use in the client web browser, search engine friendly, as well as helpful in search engine crawling and indexing.
So, let’s know the popular semantic tags in HTML5 web development script.
HTML5 <header> tag.
In HTML5 web page design, the <header> tag element is used to display header menu, header text, and digital information along with web page navigation menu and text links in a particular web page website.
Header tag usage in HTML5.
- In a particular web page, the top header will display the menu and link.
- It represents important links and information in the header in a website.
- Creates and displays navigational links with the <nav> tag in a website.
Header tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Html5 Header Tag</h1>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Pages</a></li>
<li><a href=”#”>Links</a></li>
</ul>
</nav>
</header>
</body>
</html>
HTML5 <footer> tag.
The <footer> tag or element introduced in HTML5 displays multiple footer text links along with customized footer text, links, or digital information in a particular web page or website. Generally, footer tags display special symbols and text information along with web developer name, website copyright info, and website contact information in a website.
Uses of Footer Tag in HTML5.
- Displays web developer name or individual company organization text information.
- Displays copyright notice info for a particular website.
- Displays website author name and website legal rights information.
- Displays particular website contact information and links.
Footer tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>© Vcanhelpsu 2024, All Right Reserved By Vcanhelpsu.com.</p>
<p>Email us – <a href=”mailto:vcanhelpsu@gmail.com”>vcanhelpsu@gmail.com</a></p>
</footer>
</body>
</html>
HTML5 <article> tag.
The <article> tag element introduced in HTML5 holds or displays a self-contained text information web page digital text and information. Generally, article tags are used as small self-contained text blocks or paragraphs in small and individual web page website blog posts, news posts, group posts, forum posts. Web developers can create small posts in more than one article tag as per the requirement.
Uses of Article Tag in HTML5.
- Small group blog posts display text information as per the requirement.
- Particular digital text blocks can create articles individual group posts sections.
Article tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Html5 Header Tag</h2>
<p>Header Tag Used To Display Website Header Top Links, Navigation Menu, And Other Text Info.</p>
</article>
<article>
<h2>Html5 Footer Tag</h2>
<p>Footer Tag Used To Display Website Important Footer Info, Like Copyright, Contact, And Other Important Links.</p>
</article>
</body>
</html>
HTML5 <section> tag.
The <section> tag element introduced in HTML5 is used to display individual block and section text content information in a particular web page by dividing it into small sections. If you want to divide website information into small blocks and break it into small block posts or sections and display them separately in a single web page, then the section tag is used.
Uses of Section Tag in HTML5.
- A particular web page is displayed in groups by dividing large text paragraphs into small block sections.
- Section tag is used to display large paragraphs or topic content in small block sections and link them in groups for quick access.
Section tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<section>
<h2>Html5</h2>
<p>Html5 Is The Modern Web Development Web Structure Design Hypertext Script.</p>
</section>
<section>
<h2>Css</h2>
<p>Css Abbreviated As Cascade Style Sheet, Used For Website Simultaneously Modification. </p>
</section>
<section>
<h2>JavaScript</h2>
<p>Modern Web Development Script, Which Enable Web Developer To Used Enhanced Multimedia, Animation, And Other Features In Html.</p>
</section>
</body>
</html>
HTML5 <nav> tag.
The <nav> tag element in HTML5 is used to create and display navigational menus or link sections in any website. HTML5 navigation tag is specially used to display navigation menu section or group navigation web site link information anywhere in the website, which helps the internet user to easily navigate or explore through the navigational links available in a website.
Uses of Nav Tag in HTML5.
- Navigational link item information can be created and displayed anywhere in the website or webpage.
- If a web page blog post document is very large in size, then the text information available in the same web page can be divided into different links and displayed in navigational blocks for immediate access.
Nav tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#blog”>Blog</a></li>
<li><a href=”#pages”>Pages</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#disclaimers”>Disclaimers</a></li>
</ul>
</nav>
</body>
</html>
HTML5 <aside> tag.
In HTML5, the <aside> tag element represents such web content information, which is related to the aside tag as web content or information. Generally, the aside tag is used to access sidebars, pull quotes, digital information in website webpages.
Uses of Aside Tag in HTML5.
- The aside tag represents a sidebar or additional digital information in a particular web page.
- The aside tag displays web elements such as website webpage related links, advertisements or author bios.
Aside tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<aside>
<h2>Explore Links</h2>
<ul>
<li><a href=”#”>Html Links</a></li>
<li><a href=”#”>Css Links</a></li>
<li><a href=”#”>Php Links</a></li>
<li><a href=”#”>Javascript Links</a></li>
</ul>
</aside>
</body>
</html>
Semantic tag explanation in HTML5.
- HTML5 <header> tag – For header links or navigational menu text in a website.
- HTML5 <footer> tag – For website footer information, website copyright and contact information.
- HTML5 <article> tag – For displaying self-contained information in a new article blog post or blog post in a webpage.
- HTML5 <section> tag – For dividing a particular webpage link paragraph into blocks or individual sections.
- HTML5 <nav> tag – For creating and representing web page navigation links.
- HTML5 <aside> tag – Represents supplemental or tangential content in a webpage.
