7 Structure of HTML web page

HTML CSS TUtorial for all

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.

 

Join the FULL HTML and CSS Tutorial Here >>

 

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:

 

Join the FULL HTML and CSS Tutorial Here >>

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here