Build a Web Page - HTML Tags Explained
Follow the simple instructions for creating a web page by writing html code and learn about the meaning and importance of different html tags.
You will need a simple text editor to create your web page. We recommend Visual Studio Code but any text editor may serve you. Windows users have Notepad at their disposition.
We create a new folder e.g. "my-website" and within this folder we create a sub-folder named "public". Finally, within this folder we create a text file with the name and extension "index.html". This file is our web page. Although you can freely name it, we choose the name "index.html" as it is the most common default page name for web servers.
Let's Add Some Tags
Tags are containers of content. Some tags are of functional importance of a web page while others are more of semantical importance.
The first line of a web page isn't a tag though. It's an instruction to the program accessing your page how to interpret the following code.
The next line is a tag and opens a container for our web page content. In most of the cases tags come as pair: An open tag and a close tag. The content within the container is found within these two tags.
<!DOCTYPE html> <html lang="en"> ... content ... </html>
The "lang" portion within the open tag is called "attribute" and provides the program reading this page (e.g. a browser) in which language the content is written. Although the attribute isn't critical, it is good practice having it.
We finalize the primary container setup by adding two additional containers within the html tag.
<!DOCTYPE html> <html lang="en"> <head> ... content ... </head> <body> ... content ... </body> </html>
The "head" container will have content which isn't visible on the page but will contain some critical information.
The "body" container will have the content visible on the page.
Important about tags is that they are always written in lower case. Make sure that the hierarchical structure of tags is correct. Don't close a parent tag before all children tags are closed.
Completing the Head Tag
Content within the head tag cannot be seen on the page. Nevertheless they are important. Let's go through this section line by line.
<meta charset="utf-8" />
This line tells the software accessing your page what character set is used for the content. In this case we use "utf-8" which stands for "Unicode Transformation Format 8-bits". We don't really care about the meaning but it is important to know that if your content uses an extended character set like Cyrillic you need another value for the charset attribute.
Note that it seems that we already break the open/close rule for tags with the first tag we are editing. This isn't the case though. If a tag doesn't have content like in this case, it only carries an attribute, then you can close that tag with a "/" before ending the tag. <tag ... />
<meta name="viewport" content="width=device-width, initial-scale=1" />
This second one-liner tag tells your browser how to treat the size of the content when seen from different device sizes and guarantees that even with multi-retina mobile device the text is sized readable. We will discuss this tag later when talking about responsive web page design.
<title>Title of Page</title>
Next line we add the "title" tag which contains the title of the page. The content isn't shown on the page but can be seen on mouse-over of the browser tab. The content of this tag has to be related to the content on the page and must be unique for your website. We will discuss this later in more details.
<meta name="keywords" content="some keywords" />
This line is completely optional. It is best practice having it filled with keywords relevant of the web page.
<meta name="description" content="short description" />
This line is of similar importance as the "title" tag. Content must be unique among all pages of your web site and relevant to the content of your web page. The content isn't shown on your web page but may be used in search results as snippet for your page in search engines. We will discuss this tag later in more details.
<link rel="canonical" href="" />
Same importance as title and description. There isn't any value at the moment because we don't know yet the domain name where this web page will be hosted. It will contain the url (web direction) of your page. We will discuss this tag in more details later.
With this last line we finalized the most important head tags. There are additional tags that can be added but in order not to inflate this topic further, we stop here.
We save the current text file as template. Whenever we create a new page we copy this text file and update the content of the relevant tags. This helps to speed up the creation of new pages.
Completing the Body Tag
Let's start adding some content to the page. While most of the head tags are functional, tags in the body section are mostly of semantical importance allowing programs to "understand" your content.
Leading the content, the header tag is used to publish website related information. Note the difference between website and web page. Website is the collection of all pages.
<header> <h1>Website Title</h1> </header>
Different to head tag title, h1 content is shared among all pages of a website or large section of a website. It isn't web page unique and may contain logo, brand, link to start page of the website and few links to important features of a website.
Usually, our stored template includes header and footer (see below) as these elements don't change from page to page.
Finally, we start adding the main content to the page. For this purpose we add the main tag which tells semantically that everything within this tag is this page's content.
<main> <h2>Web Page Title</h2> <p>Text</p> <h3>Web Page Title</h3> <p>Text</p> ... </main>
Within the main tag, we have one h2 tag which relates to content of the page and matches the head title tag content.
Following, we have one or more "p" tags. "p" stands for paragraph and contains text as content.
It is possible to add sub-titles with "h3", "h4", ... title tags.
There are additional tags from the simple html tag toolbox like lists "ul" or numbered lists "ol" with each item embedded in a list surround by opening and closing "li" tags:
<ul> <li>list item</li> <li>list item</li> <li>list item</li> </ul>
With this very limited number of tags, we end the main content section. Don't forget to add the closing "/main" tag.
aside Tag (optional)
If you would like to add content which isn't related to the main content of the page you can use the "aside" tag. We occasionally use it for notes, remarks which are only slightly related to the content or for navigation links within a section of the website.
<aside> <p>Text</p> </aside>
You are free to use any tags you are using for the main content with exception to the "h2". "h2" should appear only once per web page.
<footer> <p>Text</p> </footer>
In the footer, you can use all available tags available for the main content except "h2".
We skipped on purpose any information about links, the a tag, in "a" web page content. In our one page project links aren't relevant and the topic about links is very important and more complex so we will dedicate a separate page about links.
Did you find this page useful? Please let us know using the "Feedback" link below.