In this lesson, we are going to explore the various types of HTML tags, their purposes, and how to use them effectively in your web applications. We will discuss some of the most commonly used HTML tags and their corresponding attributes.
The paragraph tag
The paragraph is probably the most commonly used HTML element, which is defined by <p></p>. It is a block-level element, meaning each paragraph will start on a new line.
1<body>
2 <p>This is the first paragraph.</p>
3 <p>This is the second paragraph, which starts on a new line.</p>
4</body>Without the <p> element, your browser will automatically ignore the extra white spaces and render the text in a single line.
1<!-- prettier-ignore -->
2<body>
3 This is the first paragraph.
4 This is the second paragraph, which starts on a new line.
5</body>You'll need to use the <br> element if you want a line break inside a single paragraph element. This is one of those HTML elements that does not require a pair of tags.
1<body>
2 <p>
3 This is the first paragraph.<br />
4 This is the second paragraph, which starts on a new line.
5 </p>
6</body>The heading tags
When writing an article, it is good to add headings between paragraphs to make the article more organized. An HTML document works the same way. HTML offers six different levels of headings from <h1> to <h6>.
1<h1>Heading 1</h1>
2<h2>Heading 2</h2>
3<h3>Heading 3</h3>
4<h4>Heading 4</h4>
5<h5>Heading 5</h5>
6<h6>Heading 6</h6>In most cases, <h1> to <h3> should be enough when creating your webpage, and personally, I would avoid using <h4> to <h6>, as they would make the structure of your webpage unnecessarily complex.
<h1> is the top heading, which plays a special role in the webpage. It should summarize the entire page, meaning there should only be one <h1> element in each HTML document.
Formatting elements
Sometimes, you may want to emphasize specific words and paragraphs by giving them different formats, such as making them appear bold, italic, or underlined. HTML provides formatting elements that can help achieve this effect.
1<b></b>
2<strong></strong>
3
4<i></i>
5<em></em>
6
7<mark></mark>
8
9<small></small>
10
11<del></del>
12<ins></ins>
13
14<sub></sub>
15<sup></sup>- The
<b>and<strong>elements have the same effect. They both make the enclosed text appear bold.
1<p>
2 Lorem ipsum <b>dolor sit</b> amet consectetur
3 <strong>adipisicing elit</strong>.
4</p>Even though they have the same appearance, as shown below in the CodePen demo, they serve different purposes for browsers and search engines.
<b> only makes the text bold without adding any particular meaning, while <strong> indicates the enclosed texts have substantial importance.
- The
<i>and<em>elements are similar. They both turn the text into italic form.<i>does not indicate any special meaning, while<em>defines an emphasized text, displayed in italic form.
1<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>- The
<mark>element defines highlighted/marked texts.
1<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>- The
<small>element defines smaller text.
1<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>- The
<del>element indicates deleted text, displayed by adding strikethrough across the enclosed text. On the other hand, the<ins>element is used to indicate inserted text, which is displayed as text with underline.
1<p>
2 Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
3</p>- The
<sub>and<sup>elements defines subscript and superscript respectively.
1<p>
2 Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
3</p>How to add styles to HTML elements
Sometimes, the default representations of these formatting elements are inadequate to express their intended meanings.
For example, the <del> element indicates deleted texts with a strikethrough, which is easy to understand. However, the <ins> element uses underline to represent insertions, which can be very confusing.
To improve the default appearance of these elements, you can use a style attribute like this:
1<p>
2 Lorem ipsum <del style="color: red;">dolor sit</del> amet
3 <ins style="color: green;">consectetur adipisicing</ins> elit.
4</p>Of course, this works for almost all HTML elements, not just the formatting elements. The style of an HTML element is defined in a key/value pair format.
1<p style="key: value;">. . .</p>The semi-colon (;) marks the end of a statement, after which you can define another style statement.
1<p style="color: red; text-decoration: underline;">
2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
3</p>There are many more styles you could define for each element, and we will discuss more about them once we get to the CSS part of our course.
The hyperlink tag
Hyperlinks are another type of HTML element we must discuss. They are found on almost all websites, connecting one webpage to another. When you hover the cursor over a link, the arrow will turn into a hand. When you click the link, it will take you to another HTML document.
Links in HTML are defined using the <a> element.
1<a href="path/to/destination">Link Text</a>By default, the link will be underlined and displayed in blue, and when you click on it, you will be taken to the destination specified by the href attribute.
To demonstrate, create a destination.html file in your work directory.
1.
2├── destination.html
3└── index.html1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Destination</title>
7 </head>
8 <body>
9 <p>This is the destination.</p>
10 </body>
11</html>And then, add a link in your index.html file that points to the destination.
1<p>
2 Lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur
3 adipisicing elit.
4</p>
You will be taken to the destination.html document when you click on the link.
You can also add a Go Back link in the destination.html to take you back to index.html.
1<p>This is the destination. <a href="/index.html">Go Back</a></p>
These interconnected links form the internet we see today.
By default, the linked destination will be opened in the same window. You can change that behavior by setting a target attribute. For example, target="_blank" opens the destination in a new tab.
1<a href="/destination.html" target="_blank">Link</a>Another thing you may have noticed is that the link is initially displayed in blue. The moment you click on it, it turns red. Afterward, the link becomes purple, indicating that the link has been visited before.
This behavior has to do with a concept called the pseudo-class, which allows you to define different styles for an element under different conditions. We will revisit this topic when we talk more about CSS.
Lists
There are three different types of lists in HTML: ordered, unordered, and description lists.
Ordered lists are defined with the <ol> element, and each individual list item is created with <li>.
1<ol>
2 <li>Apple</li>
3 <li>Banana</li>
4 <li>Orange</li>
5</ol>Unordered lists are defined with the <ul> element.
1<ul>
2 <li>Apple</li>
3 <li>Banana</li>
4 <li>Orange</li>
5</ul>Description lists are a bit more complex, as they consist of a list of items and a description for each item. The description list is defined with the <dl> element, each list item is defined with <dt>, and each description statement is defined with <dd>.
1<dl>
2 <dt>Apple</dt>
3 <dd>A delicious and nutritious fruit with a crisp texture.</dd>
4 <dt>Banana</dt>
5 <dd>A sweet and creamy fruit packed with essential nutrients.</dd>
6 <dt>Orange</dt>
7 <dd>A juicy and refreshing citrus fruit rich in vitamin C.</dd>
8</dl>Layout elements
So far, we've only been discussing elements used to display content, such as texts, lists, and images. In fact, there is another category of elements in HTML in charge of organizing the elements.
They are not designed to display any specific type of content, but instead, they act as a container for other elements. When combined with CSS, they can create different layouts for the webpage. Some of the commonly used layout elements are shown in the list below.
<header>: Defines a header section for the document, usually located at the top of the webpage.<nav>: Defines a navigation bar. For most webpages, it is located at the top with the header, but some developers put it on the side of the page.<section>: Defines a section for the document.<article>: Defines an independent section in the webpage.<aside>: Content aside from the main content, such as a sidebar.<footer>: A footer section located at the bottom of the webpage.<details>: Creates a tab that the user can open and close.<summary>: Creates a heading for the<details>element. It should be placed inside the<details>element.
1<details>
2 <summary>Lorem ipsum dolor sit amet consectetur adipisicing elit</summary>
3 Lorem ipsum dolor sit amet consectetur. . .
4</details><div>: And, of course, the most important layout element,<div>, which stands for division. It is a generic element that creates a block in the webpage and does not serve any special purposes.
This is the most commonly used layout element, because for real-life webpages, most sections and blocks do not match any of the semantic elements mentioned above. As a result, many developers like to use <div> for creating page layouts.
1<!-- border: 2px black solid; gives the block a black solid border, 2px defines its width -->
2<header style="border: 2px black solid;">This is header</header>
3<nav style="border: 2px black solid;">This is nav</nav>
4<section style="border: 2px black solid;">This is section</section>
5<article style="border: 2px black solid;">This is article</article>
6<aside style="border: 2px black solid;">This is aside</aside>
7<footer style="border: 2px black solid;">This is footer</footer>
8<div style="border: 2px black solid;">This is div</div>Without CSS, these layout elements (except for <details> and <summary>) will have the same appearance, and not doing what they are supposed to do. But don't worry, we will come back to this topic later. For now, you only need to know that these elements are primarily used to create page layouts.
Block elements vs. inline elements
Let's consider the following example:
1<p>
2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
3 <a href="/"
4 >Fuga blanditiis delectus voluptatum molestias accusantium id repudiandae
5 exercitationem!</a
6 >
7 Labore ipsum blanditiis vero, doloremque, nisi vel molestiae ea odio tempore
8 recusandae dicta?
9</p>
10<p>
11 Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum itaque eaque
12 esse inventore incidunt delectus quia? Eos nam fuga sint obcaecati magnam.
13 Fuga voluptatem doloremque quisquam eligendi libero. Deleniti, rerum.
14</p>
Notice that the <p> element always starts on a new line and takes up as much horizontal space as possible. On the other hand, the <a> element does not start on a new line and only takes up as much space as necessary.
This is, in fact, the difference between the block elements and inline elements.
Most of the elements we mentioned in this chapter are block elements, such as <p>, <div>, <h1> to <h6>, <li>, etc. Without extra styles defined, they will automatically take up as much horizontal space as possible.
The <a> element is an example of an inline element. It only takes up as much space as necessary when placed inside other elements. And the width and height attributes will have no effects on it.
There are many other elements, both block and inline elements available in HTML. It is impossible to discuss all of them in one lesson, but here is a reference of all HTML elements from W3Schools if you are interested.