Creating and structuring web pages with semantic HTML
Any modern responsive web page website can be designed and developed with the semantic tags in HTML5. The new tags available in HTML5 help web developers to develop an ideal, attractive web page layout and structure according to current industries and organizations. The new semantic tags provide custom web development features according to the web developer’s needs. Modern web pages developed in HTML5 are easy to crawl and have fast ranking in search engines.
So, let’s understand the popular tags available in HTML5 and use them properly.
Popular semantic tags in HTML5 and their use.
HTML5 <header> tag.
HTML5 web page displays header menu, header navigation, or header important links and text information. Webpage website header tag displays website name, website logo, header primary menu, website navigation menu, drop down menu, website title, website navigation links and top links information.
HTML5 <nav> tag.
HTML5 displays navigational link information. Navigation links in a website can display multiple text information like a menu or section. Using navigation tags, you can create and manage page navigation link sections in website header, footer or web page post blog. Navigation tags represent more than one menu, links, sidebar text information at a time.
HTML5 <main> tag.
In HTML5, the main tag represents all the web page information created and displayed in the website body portion in the client web browser just like the body tag. In any web page developed in HTML5, the desired web page content and information is previewed using a body tag or a main tag. The main tag displays all the website content and information except the website header, footer, navigation, web page left and right sidebar.
HTML5 <section> tag.
The section tag in HTML5 web page is used to create multiple web page post block sections in a website web page. In a large blog post page, many information in the web page is displayed by dividing it into small block sections. Whereas multiple single web page block sections explain the topical content of a particular website.
HTML5 <article> tag.
The article tag in HTML5 web page represents self-contained text information in an existing web post. In a web page, the article tag represents a blog post, news post, and custom user text information created in article format.
HTML5 <aside> tag.
The aside tag in HTML5 web page connects and displays content information related to the web page. Where the aside tag can represent web page pull quotes, sidebars, and other website information. Where aside tags display related links to the current blog post, web page advertisements, or supplemental information.
HTML5 <footer> tag.
HTML5 web pages can display footer text, special symbols, or important link information at the bottom of a website. For example, website copyright information, website contact information, website email information, website legal rights, and other important links and information are displayed.
Semantic tags in HTML5, basic structure of an HTML web page example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Popular Html Semantic Tag</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<h1>HTML5 Semantic 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=”#”>Services</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>HTML5 Introduction</h2>
<p>HTML5 Modern Web Development Script </p>
</section>
<section>
<h2>Semantic Tag Explanation</h2>
<article>
<h3>Header Tag</h3>
<p>Header Tag Used To Display Website Header Info. </p>
</article>
<article>
<h3>Footer Tag</h3>
<p>Footer Tag Used To Display Website Footer Info.</p>
</article>
</section>
<aside>
<h2>Webpage Related Info</h2>
<p>This Is The Blog Post Content, Which Is Related To Each Other.</p>
</aside>
</main>
<footer>
<p>© 2024 Vcanhelpsu, All Rights Reserved By Vcanhelpsu.com.</p>
<p><a href=”#”>Contact Us</a> | <a href=”#”>Email</a> | <a href=”#”>Top Links</a>| <a href=”#”>Disclaimers</a></p>
</footer>
</body>
</html>
