HTML 5 Page Structure | HTML 5 Code Layout

Sample Code for HTML 5 Page Structure

<!DOCTYPE HTML>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 
<title>HTML 5 Page Title</title>
</head>

<body>

<header>
<nav>
<ul>
<li>Navigation Menu List</li>
</ul>
</nav>
</header>

<section>

<article>
<header>
<h2>Article Title Here</h2>
<p>Sample Code for Paragraph</p>
</header>
<p>Sample code for HTML 5 page structure by MyFreeOnlineTools</p>
</article>

<article>
<header>
<h2>Article Title Here</h2>
<p>Sample Code for Paragraph</p>
</header>
<p>Sample code for HTML 5 page structure by MyFreeOnlineTools</p>
</article>

</section>

<aside>
<h2>About Us Aside Section</h2>
<p>Sample Code for Paragraph</p>
</aside>

<footer>
<p>Copyright 2020 MyFreeOnlineTools</p>
</footer>

</body>

</html>

HTML 5 Layout Elements

<header> – Defines a header for a document or a section
<nav> – Defines a set of navigation links
<section> – Defines a section in a document
<article> – Defines an independent, self-contained content
<aside> – Defines content aside from the content (like a sidebar)
<footer> – Defines a footer for a document or a section
<details> – Defines additional details that the user can open and close on demand
<summary> – Defines a heading for the <details> element

HTML Page started with doctype or Document Type Declaration. By this browser know what type of document. Doctype defines at the top this is first item of HTML file. After doctype <html> element follows, which is used for inform to browser this is HTML document.

After using HTML tag, <head> section contains metadata like links, scripts, and other meta-tags information.

<title> element to define the title of your document.

The <body></body> of a document contains the content of the document. The content may be presented by a user agent in different ways. E.g., the content can be text, images, links, colors, graphics, etc.

Use the <header> element to define a header for the document or section. It contains a logo, search bar, navigation links, etc.

The <nav> element defines a block of navigation links, either within the current document or to other documents.

The <article> element is used to define a self contained content.

The <section> element is used to group of sections within a webpage containing page elements.

Sample Code for HTML 5 Page Structure

HTML 5 Layout Elements

Leave a Reply Cancel reply