HTML Tags

What are HTML Tags?

In simple words, HTML tags are the building blocks of the markup language. It plays an important role in creating an HTML page, where elements you want to display on a web page are defined within the tags.

The tags are used to start and end the HTML elements and may also contain HTML attributes depending on a web page design.

In this chapter, you will learn about some easy to use HTML tags.

<!DOCTYPE html>

Each HTML document should start with this declaration. It is the very first thing which is used before </html>tag.

It gives instruction to the web browser about the version of HTML you have used for creating a web page.

Example:

<!DOCTYPE html>
<html>
<head>
<title>It shows the Title of the Page</title>
</head>

<p>It displays a paragraph</p>

</body>

</html>
<a> Tag

The anchor element is used to define a hyperlink using ‘href’ attribute where URL is defined as the link’s destination. This hyperlink can be applied to text, image or any HTML content within the opening and closing <a> tag.

Basically, this tag links one page to another.

Example:

<a href="https://en.wikipedia.org/wiki/HTML" > Learn more about HTML </a>

<ul> Tag

It is used to define the bulleted list. Like, if you have some fruits’ names that you want to display as the list in a web page, you can use this tag to display your items with bullets.

It is used with <li> tag to create the list.

Example:

<ul>
<li> Oranges <li>
<li> Mangoes <li>
<li> Strawberries <li>
<li> Grapes <li>
</ul>

<time> Tag

This tag is used to define date and time.

Basically, it is used to define human-readable date/time, but can also be used for a machine-readable version which is placed in the ‘datetime’ attribute.

Example:

<p>Our office opens at <time>9:30 </time>every morning. </p>

<p>Our office was closed <time datetime= "2018-02-16 2:00" >that day </time>. </p>

<summary> Tag

This tag is used to provide a summary of the content of the <details> element. It is used to give the additional related details, which can be hidden or viewed by the user by clicking on the summary.

Example:

<details>
<summary> Click me to open the content </summary>
<p> It contains the collapsible content. </p>
</details>

<hr> Tag

This tag defines a break between paragraph-level elements in an HTML document. In simple words, it is used to separate content in an HTML page.

Also, it does not have an end tag.

Example:

<h2> Topic 1 </h2>
<p> It displays the content of Topic 1 </p>
<hr>
<h2> Topic 2 </h2>
<p> It displays the content of Topic 2 </p>

<style> Tag

This tag is used to add CSS style rules to an HTML page. You can define style information in a document that tells how HTML elements within <style>tag should display in a browser. It is simply used for styling the content and is used inside the <head> element.

You can add as many <style> tags as you want in an HTML document.

Example:

<html>
<head>
<style>
h2 {color:red; }
p {color:green; }
</style>
</head>
<body>

<h2> Topic 1 </h2>
<p> it displays the content of Topic 1 </p>
</body>
<html>

<option> Tag

This tag defines the drop-down list in a HTML page.

It is used in conjunction with <select> element or <detalist> element to form drop-down menu.

It is always used with the ‘value’ attribute that specifies the value to be sent to the server.

Example:

<select>
<option value="oranges"> Oranges <option>
<option value="mangoes"> Mangoes <option>
<option value="strawberries"> Strawberries <option>
<option value="grapes"> Grapes <option>
</select>

<caption> Tag

This tag is used to add a caption to a HTML table and is used immediately after the <table>
tag.

You can add only one caption for one table.

By default, the caption of a table is aligned at the center above a table.

Example:

<table>
<caption>Name of the fruits </caption>
<tr>
<th>Fruits </th>
<th>Rate </th>
</tr>
<tr>
<td>Oranges </td>
<td>$10 </td>
<tr>
<tr>
<td>Mangoes </td>
<td>$12 </td>
<tr>
<tr>
<td>Grapes </td>
<td>$8 </td>
<tr>
</table>

<img> Tag

This tag is used to insert an image in an HTML document. It is used with two attributes - ‘src’ and ‘alt’.

You can also link an image to any other web page by adding <img> tag inside <A> tag.

The height and width of an image can also be specified using ‘width’ and ‘height’ attributes.

Example:

<img src="good_morning.jpg">
Here, an image filename is specified in the src attribute.

<img src="good_morning.jpg" width="700" height="600">
Here, a filename, as well as the desired width and height of an image are specified.

<img src="good_morning.jpg" alt="Have a positive and wonderful day" >
Here, an image filename is specified along with ‘alt’ attribute, which will display text when a cursor goes on the image.

There is a huge list of HTML tags, which you will gradually learn as we proceed further to the next chapters.

<article>
<blockquote>
<button>
<datalist>
<frame>
<meter>
<strong>
<textarea>
<video>
<tbody>
<script>
<toframes>
<mark>
<font>
<div>

And many more…