Chapter 4: Creating A Page Layout

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

We use the following tags to get job done.


Inside the <main> tag we insert the following tags:



Creating a page like this is not necessary but it creates a readable & structured layout.

Also, they are useful for SEO.

Link Attributes

An example of how we insert links.



We can put any content inside an anchor tag (images, headings etc are all allowed).

If the page is inside a directory, we need to make sure that we link to the correct page. Same applies to image tag as well.


We can add links to images like this.



The <div> tag

The <div> tag is often used as a container for other elements. It is a block-level element, meaning it always takes up the full width available.



The <span> tag

The <span> tag is an inline container, meaning it only takes up as much width as necessary. It also helps in styling a selected word or group of words.

Example:



Don't worry about styling. You will know about it in LearnCSS course.