Basic structure of an HTML5 document
Currently in new HTML5 version Hypertext Markup Language web page document structure layout has been simplified so that existing design web page is easy to read, responsive, dynamic preview, and fully compatible with new modern web browser display.
So, let’s know the basic document structure of HTML5.
HTML5 Element Explanation.
<!DOCTYPE html> declaration.
It indicates the web browser the document structure declaration version in HTML5 web page, and web browser reads and analyzes your web page according to the new version of HTML5 script, where <!DOCTYPE html> is always added or displayed at the top of the script code of HTML5 web page.
<html lang=”en”> tag.
In which language your or existing HTML5 web page is written, if the HTML web page language is en, then the web page language is English, if the HTML language is hi, then the web page language is default Hindi, which is read and indexed by search engine web crawler.
<head> tag.
Meta-information about the HTML5 version document is added, which displays web page character encoding, web page viewport setting, web document title, and internal or external CSS stylesheet link information.
<meta charset=”UTF-8″> tag.
It indicates the document character encoding in the existing web page. Where currently UTF-8 is a widespread character encoding format, which supports many characters and symbols in web pages globally.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.
The above code displays and zooms in a web page on mobile devices by setting the width of the viewport to the width of the device and the initial device zoom level to 1.
<title> tag.
Displays the document title in the current web page, which is displayed as the web page title in the open new tab bar or new window tab in the web browser.
<link rel=”stylesheet” href=”styles.css”> tag.
Here you can display or add CSS internal and external scripting language links used in your web browser.
<script defer src=”script.js”></script> tag.
This tag links your HTML5 web page to an external JavaScript file. Here the script will be executed after parsing the JavaScript document by defer tag element attributes.
<body> tag.
A tag added to an HTML web page document and used to display web page digital content information, which is displayed to the Internet user in his terminal web browser.
<header> tag.
Displays header menu or web content or navigational links in a designed web page. Where header tags are used to create header menu, web page link navigation, etc. in a web page.
<nav> tag.
The nav tag indicates different navigation link sections in the current web page with links to other web pages or sections within the same document.
<main> tag.
It displays digital content information displayed in the <body> tag in a web page.
<section> tag.
Displays individual sections group of web content information in a particular order in the current web page. Where each web page section has a unique web page title link information preview.
<footer> tag.
The footer tag displays footer information at the bottom of a web page, which may include a website copyright notice, or website contact information, or links to important web pages.
HTML5 Document Structure Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Web Page Title</title>
<link rel=”stylesheet” href=”styles.css”>
<script defer src=”script.js”></script>
</head>
<body>
<header>
<h1>Simple Html5 Website Structure</h1>
<nav>
<ul>
<li><a href=”#”>Home Page</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Disclaimers</a></li>
</ul>
</nav>
</header>
<body bgcolor=aqua></body>
<main>
<section>
<h2>About Us</h2>
<p>Vcanhelpsu Provides You Computer Programming Courses.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>Contact ua at – vcanhelpsu@gmail.com.</p>
</section>
<section>
<h2>Disclaimers</h2>
<p>You Can See Website Disclaimers.</p>
</section>
</main>
<footer>
<p align=center>Copyright at © 2024 vcanhelpsu.com</p>
</footer>
</body>
</html>