HTML Layout


Websites are made of many kinds of HTML pages and each of the page serves a different purpose. Depending on what a page does , the layout and design of the page changes. A simple layout is the best strategy.

Semantic HTML

Earlier we do not have meaning to HTML tags that identify themselves with the different sections of the page. HTML tags are very much created for the documentation.

HTML 5 Semantic Layout
HTML 5 Semantic Layout

The recent web design put more emphasis on user interface and usability of a web page. Therefore, in HTML 5 we have semantic tags which has specific meaning. These tags help use define the structure of the page at HTML level. The rest of the styling is done using CSS (cascading style sheet)..Here is a list of semantic tags and their meaning.

<header>This defines the header of the document
or a different part of the document
<nav>This is create a navigation menu for the webpage.
<section>This defines a section of the document.
A section can have header and extra navigation.
<article>This contains the actual textual content
and usually comes under section.
Though it is not compulsory
because you can have a standalone article.
<aside>This tag is meant for information usually
appears in the sidebar section of the document.
<footer>This defines the footer section of the document
where website credits appear.

The <div> … </div>tag

The <div> means division which is to divide the web page into different divisions. The after inserting your content you can simply control the appearance of the <div> using CSS.The div tag is still more popular and widely used for creating pages.

Class and id attribute

After using you tag to create a basic document layout. You must assign class and id to different elements. You can apply CSS styles to these elements. The guideline to apply CSS rule is

  • Apply class to page elements that are repeated several times.
  • Apply id to page elements that you know are unique or need specific styles.

Applying CSS Rules

The HTML elements do not have the capability to style the page. The best you can do is to apply inline CSS rule. Majority of style work and design is done using CSS.

How to style your page ?

To style the page using CSS you must consider four things:

  • Layout design
  • Margin between blocks
  • Padding between content and border of the block.
  • Typography of the page and element
  • Responsive Design

The responsive design is a new term which means not only you design your page for desktop computers, but also, consider a different layout for mobile, and tab devices.

Builtin Design Features vs. Frameworks

CSS has builtin features like Flexbox and Grid which will make the job of page design easier. However, there are many web frameworks such as Bootstrap which will make sure that you get a pixel perfect layout for your page and website as quickly as possible.

The most common practice is to use a web framework for web design unless you have a technological constraint to not to use them. In future articles, we will talk about different types of web layout and how to create those layouts using HTML and CSS.