Chapter 03: HTML- Creating a page layout

When we use the right tag in the right place, it results in a better page layout, better indexing by the search engine, and a better user experience.

A typical page layout would look something like this:

<header> : It contains the <nav> tag.



Inside the main tag, you can insert the following tags:

<main> : main opening tag.

<section> : A page section

<article> : self-contained content

<aside> : content aside from the content, for example, ads

</main> : main closing tag

Creating a page like the above is not necessary but it creates a readable and structured page layout. It is useful for SEO.

In the above image, we have used attributes href and target. Attributes adds functionality to a tag, in our case, the anchor tag.

We can put any kind of content inside the anchor tag like images, web links, headings, etc.

If the image or page is inside a directory, we need to make sure that we link to the correct page.

We can add an image like this:

Notice here that we have just set the width and not the height. Height will be set automatically as per the width. What I mean by that is, the aspect ratio of the image will be adjusted according to the width on its own. If we provide the height dimensions randomly, the aspect ratio will go for a toss and the resultant image will be a distorted one.

The Div Tag:

The div tag is used as a container for other elements. Div is a block-level element. In other words, the div element takes the full width of the page. The essence of the div tag can be seen in the image below.

The Span Tag:

The span tag, just like the div tag is a container. The difference is that the span tag is an in-line element and takes up space only as much as it requires.

That's all for this article. Tomorrow's article will be a more elaborate one as we'll be covering topics like lists, tables, and forms with hands-on visual studio code. I will be sharing screenshots of both the code and the webpage rendered by the browser.

The aim of keeping these articles short and crisp is that you could bite only as much as your mouth is capable of chewing. However, I can assure you that tomorrow's bite will be a bigger one. Having said that, I am eager to see you all tomorrow.