In this lesson, we are going to explore the different 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 to add a line break inside a paragraph element. This is one of those HTML elements that does not require an opening tag.
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>These heading create a hierarchical structure, with <h1> being the top heading, which plays a special role in the webpage. There should only be one <h1> element in each HTML document, and it should summarize the entire page.
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 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 small 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 underlined text.
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 style statement, after which you can define another one.
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.
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 these 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>: Short for division. It is a generic, non-semantic element that creates a block in the webpage.
Unlike semantic elements such as <header> and <footer>, which clearly define their purpose, <div> does not convey any specific meaning about its content.
Semantic elements improve SEO and accessibility by helping search engines better understand the page structure. However, in real-world scenario, many sections of a webpage don’t fit neatly into predefined semantic elements. Because of this, developers often use <div> to organize content and structure layouts.
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.