Hello, dear users of Pinkpen website. We are at your service with a new HyperText Markup Language training article. HTML layouts are used to make your site more beautiful and user-friendly. It also helps a lot in optimizing and responding to your website. Today, most websites are optimized and styled by CSS and modern JavaScript frameworks to become dynamic and responsive websites. But note that with the help of Layout Html you can create an almost responsive and dynamic website.

HTML Layout Element

We should try to design websites in such a way that they look attractive. It works well in different resolutions. The user can easily navigate the website. Layout elements help us achieve our goals. At HTML, we have elements that help us define different sections of the website. In the following, we will teach you these elements.

In the photo opposite, you can see an overview of the elements of the HTML page.

HTML Layout

the first Tag <header>

the header element is used to display and design headers on websites and usually includes Lego, title, starting content, etc. This section is actually located at the top of your HTML website.

<header style="background-color: red; height: 100px;width: 100%">
	<h4 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to pinkpen.net</h4>

HTML Navigation bar tag

First let me explain to you in a simple and concise way. nav is the area where the navigation links (website menu) are located. In this section, you put the main links of your website, such as: home page, registration, contact us, important topics, etc. Or you can even give links to different sections of the same page. For example, put all the HTML headings as links and the user chooses which paragraph to read.

The next element is section

<section> is a separate section from the rest of the website where you can put related elements in one section. For example, you put elements such as text, headings, photos, tables, links, etc. together and create a new section.

 <section style="background-color:#afafed; width: 100%;">
  	<h4>pinkpen section</h4>
  	<p>This is the first section of your website design. congratulation</p>

The most important element is <article>

As you may have guessed by now, in this section you are writing the main content of the page. In this section, we put elements such as paragraphs, etc. and write down the main text of your page.

The aside of the site

The elements you want to place next to your html site page should be placed in this section. On many websites, they put the most visited articles of the day or display the link of the website content category, access to the important links of the site and everything that you prefer in the corner of your website. Also, if you have a high-traffic website and have many users, you can place ads in this section.

The end is the footer

The last part we talk about today in this article is the <footer> element. In this section, you can enter information about the author of the page content, sources used, time and date of publication of the article, etc. Also, professional websites usually give a brief description of their company. Then they put their website logo and contact numbers and email. Also, like the previous sections, you can place important links to your website. The image below is an image of the Pink Pen website footer. You can carefully model it for your website.

pinkpen footer

Well, thank you for being with us until the end of the article. This article is also over. Do not forget to practice what you learned in this session. To do this, you can use the online compiler of our website. If you want to make us very happy, you can leave us a comment in the comments section of the website.



I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply


Copyright © 2019 pinkpen.net