In last week’s introduction to HTML, we talked about the markup language and some of its elements, including elements (aka tags) and attributes. Now that we’ve discussed HTML as a whole, let’s take an in-depth look at HTML Tags.
What are Tags?
Let’s take a step back and review what tags are:
Tags are elements used in HTML and are surrounded by angle brackets (< >). The basic structure looks like this:
Structure
<tag>content<tag>
Code Example
<p>This is a paragraph.<p>
The Main Rule of Tags
Tags come in pairs and must always begin with a “start tag” and must be “closed” with an “end tag” which includes a forward dash (/).
If you’re lucky, you won’t encounter errors when not properly closing tags. However, web browsers read and display HTML code differently, so it’s best practice to always ensure you close all your tags the proper way.
Keep in mind: Unpaired tags are the exception to this rule.
Example:
Line Break – <br> or <br/>
Although these tags work with or without end tags, it’s good to develop the habit of closing your tags to prevent future errors where a forward dash is essentia
Types of HTML Tags
Root Tags
<html> … </html>
These tags are the root elements and must always be included in your HTML code.
The <html> … </html> elements are always added at the beginning and end of your HTML code.
Document Head Tags
<head>…</head>
These tags are called document head tags and are placed at the top before your body tags.
Page Title Tags
<title>…</title>
These tags are called title tags and are placed between the document head tags.
Title tags are displayed at the top in the tab section.
Body Tags
<body>…</body>
These tags are called body tags and are placed between the root tags, after the document head tags.
Other elements like a paragraph- and heading tags are then placed between the body tags.
Types of HTML Text Tags
Heading Tag
Heading Tag
Heading tags are as the name says, headings. The heading tag sizes can become a bit confusing but after a while, you’ll start to get used to them.
There are 6 HTML tags: h1, h2, h3, h4, h5, h6
The h1 tag is used as a page title and Google sees this the most important one. It helps explain what the page is about.
The h2 tag is the second most common one used after the h1 tag. These can usually be used as subheadings.
Now for the confusing part, h1 headings are the biggest. The h6 headings are the smallest.
Look at the sizes below:
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
Paragraph Tag
The paragraph tag is a block element and usually includes inline elements like <a> (links) or <span>.
You cannot nest paragraph tags.
Structure:
<p>This is a paragraph tag.</p>
List tags
There are three types of list tags including ordered, unordered, and definition.
Unordered Lists:
Makes use of the <ul> tag. Each item in a list gets the <li> tag in front and </li> tag at the end.
Structure:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
This list will be displayed like the following
- Item 1
- Item 2
Ordered Lists:
Makes use of the <ol> tag. Each item in a list gets the <li> tag in front and </li> tag at the end.
Structure:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
This list will be displayed like the following
- Item 1
- Item 2
Definition Lists:
Makes use of the <dl> tag.
Structure:
<dl>
<dt>List Tag</dt>
<dd>There are three types.</dd>
<dt>Types</dt>
<dd>Ordered, unordered, definition lists.</dd>
</dl>
This list will be displayed like the following
List Tag
There are three types.
Types
Ordered, unordered, definition lists.
Quote Tags
Blockquote tags are useful to insert citations in a block shape typically with a left and right margin (space) applied.
Structure:
<blockquote cite=”https://example.com”>
This is the quote or citation taken from the cite link.
</blockquote>
The <q> tag can be used to insert an inline quote.
Structure:
<p>John Doe said:
<q>This is the quote</q></p>
Text Styling Tags
Strong Tag
Similar to the bold (<b>) tag, the strong tag makes text elements strong/bold.
Structure:
<p>This is an <strong>example</strong>.</p>
Displayed:
This is an example.
Em Tag
Similar to the italic (<i>) tag, the em tag emphasizes text elements.
Structure:
<p>This is an <em>example</em>.</p>
Displayed:
This is an example.
Sup and Sub Tag
The superscript tag (sup) displays text half a character above the normal text line.
Structure:
<p>The living room is 4m <sup>2</sup>.</p>
Displayed:
The living room is 4m².
The subscript tag (sub) displays text half a character below the normal text line.
Structure:
<p>H<sub>2</sub>O</p>
Displayed:
H2O.
Span Tag
The span tag is a great tag to apply CSS styling to tags.
Structure:
<p>This is a <span style=”color:#FF55FE;”>sentence</span>.</p>
Displayed:
This is a sentence.
Other Types of HTML Tags
Image Tags
Image tags are used to add images within your HTML code.
Structure:
<img src=”image.jpg” width=”300px” height=”300px”>
Technically, images aren’t inserted into an HTML page but linked (src aka source).
Horizontal Lines
Horizontal lines are typically used to add lines between sections on an HTML page.
Structure:
<p>This is an sentence.</p>
<hr />
<p>This is an sentence.</p>
Displayed:
This is a sentence.
____________________________________
This is a sentence.
Line Break Tag
Another popular tag, the line break tag is used to move an element to a separate line without the need to create a new paragraph. The <br> tag also doesn’t add additional spacing.
Structure:
<p>This is a very long sentence that will be displayed across the whole page, <br/> however, adding a line break will solve this issue.</p>
<hr />
<p>This is an sentence.</p>
Displayed:
This is a very long sentence that will be displayed across the whole page,
however, adding a line break will solve this issue.
There are so many more tags you are able to use within the HTML language. Tags are both essential and versatile elements that help create your HTML web page.
Bookmark our blog page to stay up to date with our HTML series to ensure you continue learning about the wonderful language.