HTML4 vs HTML5 Page Structure - Mostlikers

12 January, 2016

HTML4 vs HTML5 Page Structure

In this post we will be seeing the difference between html4 and html5, the difference between the elements, tags, page structure, browser support and which one to choose. This post is a lengthier one so it will be divided into two parts, first, we will understand the HTML web page structure then we will move on to the differences.

HTML4 vs HTML5 Page Structure

HTML Web Page Structure:

Almost all the website follows a common structure explained below.

Header (or master header): This will be at the top of the page which may normally have a branding logo, contact info, navigation, social media links, a search bar in case of eCommerce website or any other web elements.On some websites, you may find it at placed at the bottom of the screen. This part of the web page may tell you what is the purpose of the website.

Multiple Columns: There will be one or more columns in a web page. If a web page has only one column it will be the main content column holding every functionality in the web page. If there is more than one column, then one column will act as the main content column and the rest will be the sidebars holding contributory contents related to the main content, these sidebars may change when a new page is loaded or may remain same across the website.

Navigation: This plays a major role in navigating the website and it is recommended that it should be same all through the website for better user-friendly. This will be placed in the header part or in the sidebar. 

Footer: This will be at the bottom of the page, holding secondary information of the website, such as copyright information and contact details.

The image below will give you a better understanding of the basic structure of the web page. 

HTML Page Structure


The HTML elements that will be necessary to build this structure will be written as

<!DOCTYPE html>
 <html>
        <head>
                <title>Web Page Title</title>
        </head>
        <body><!
                -- code necessary for header / header + navigation --><!

               -- code necessary for the multiple columns --><!

               -- code necessary of the footer -->
        </body>
</html>

NOTE: 
In above code <!DOCTYPE html> this is called document type declaration. This should be the first line in every web page, this line tells the browser which coding standard to be used. In this case, it is HTML 5.

Related Topics

No comments:

Post a Comment