Last updated on October 31st, 2020 at 08:08 am.
7 Structure of HTML web page
Every HTML web page has a similar document structure that has the following parts:
- The full HTML
This is the area enclosed between the opening and closing html tag – <html> </html> .
It comes immediately after the <!DOCTYPE> declaration. Everything else will be within this.
- The Head Section
This section contains the title (<title>) , scripts , stylesheet and other meta data and elements.
- The body Section
This is the part that contains all the elements that will be displayed on the browser. Things such as Text, Media , Web Forms and others will be in the body section of the HTML.
Sample HTML showing the structure in code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p> I am the body</p>
</body>
</html>
If you are starting from scratch, you may use the sample html5 template below for the first structure of your web page.
HTML5 Template sample that you may use for your own:
<!DOCTYPE html>
<html>
<head>
<title> Title Goes Here</title>
</head>
<body>
<!-- The body contains the web page elements that are visible on the browser-->
<header>
<!--May contain your logo, header text and Navigations-->
<nav>
<!--The menu will be here-->
</nav>
</header>
<main>
<!--Holds the main content of the page. And is usually a direct child of the body-->
<article>
<!--Wrap articles with this-->
<aside>
<!--Put the sidebar items within articles things here-->
</aside>
<section>
<!--Seperate major parts of an element-->
</section>
<address>
<!--May be for contact info for the author-->
</address>
</article>
<aside>
<!--General sidebar for the page may be here-->
<section>
<!--may be for diferent parts of the sidebar.-->
</section>
</aside>
</main>
<footer>
<!--The footer elements will be here-->
<address>
<!--Put contact info if you need to -->
</address>
</footer>
</body>
</html>Watch the full HTML and CSS Tutorial via the button link below:
