HTML Tags — List Of All HTML Tags With Examples

Photo of author

The first task to start your HTML journey is learning HTML Tags. There are various tags to know about before coding in HTML.

HTML Tags

This article attempts to list some of the HTML Tags with examples.

HTML Tags

HTML tags are the words or letter which tells your browser to format and display your web pages. Most tags have an opening and a closing tag with the content inside them, and a closing tag has an additional forward slash ( / ) with the angular brackets (‘<‘ and ‘>’) as in the opening tag.

Example: <h1> This is a Heading Tag </h1>

Syntax: <tag> content </tag>

See Also: How To Add Line Before And After In HTML

Most Commonly Used HTML Tags

The given list represents some of the most commonly used HTML Tags with examples:

1. Basic Tags

<!DOCTYPE>: Defines the document type 

<html>: Defines an Html document

<head>: Defines the information of a document

<title>: Defines a title

<body>: Defines the body of a document

<p>: Defines a paragraph

<hr>: Adds a horizontal rule

<br>: Adds a single-line break

 

Basic Tags

Example:

<!DOCTYPE html>

<html>

<!– head tag –>

<head>

    <title>Article on HTML TAGS</title>

</head>

<!– Body tag –>

<body>

    <h2>HTML TAGS</h2>

    <p>

 Html tags are words or letter which tells your browser to format and display your web pages.

    </p>

   </body>

</html>

2. Heading Tags

Heading tags are used to give a heading to the document. These are of six different types- <h1>,<h2>,<h3>,<h4>,<h5>,<h6>. <h1> being the most important text and <h6> being the least important.

Heading Tag

Example:

<h2> I am a heading tag </h2>

3. Lists

<li>: Define a list item

<ol>: Defines an ordered list

<ul>: Defines an unordered list

List tags

Example:

<ol>

  <li>Student Names</li>

  <li>Marks</li>

  <li>Overall Result</li>

</ol>

4. Tables

<caption>: Defines a caption for a table

<table>: Defines a table

<th>: Deines a header cell

<tr>: Defines a row in a table

<td>: Defines a cell

<tbody>: Groups the table’s body content

<thead>: Groups the table’s header content

<tfoot>: Used to arrange footer content in an HTML table

<colgroup>: Defines a set of columns in a table

<col>: Gives each column in a “colgroup” element-specific column characteristics.

Table

Example:

<table>

  <tr>

    <th>Company</th>

    <th>Owner</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Tata</td>

    <td>Ratan Tata</td>

    <td>India</td>

  </tr>

  <tr>

    <td>Wipro</td>

    <td>Azim Premji</td>

    <td>India</td>

  </tr>

</table>

5. Links

<a>: Defines a hyperlink

<nav>: Defines a navigation link

<link>: Outlines the connection between a document and a resource outside of the document

Links

Example:

<a href=”https://www.HTMLTAGS.com/” target=”_blank”>Visit Html Tags!</a>

6. Forms and Inputs

<form>: Defines an HTML form

<button>: Defines a clickable button

<input>: Input control is defined.

<textarea>: Defines a Textarea

<label>: Specifies the label for an<input> element

<option>: Defines a drop-down list option

<output>: Defines the outcome of a calculation

 

Form Input

Example:

<form action=”/action_page.php” method=”get”>

  <label for=”firname”>First name:</label>

  <input type=”text” id=”firname” name=”firname”><br><br>

  <label for=”lasname”>Last name:</label>

  <input type=”text” id=”lasname” name=”lasname”><br><br>

  <input type=”submit” value=”Submit”>

</form>

7. Semantic tags

<article>: Defines an article in a document

<aside>: Additional to the page’s content, define content

<header>: Defines a header for a document

<footer>: Defines a footer for a document

<main>: Defines the main content of a document

<section>: Defines a section in a document

<details>: Defines extra information that the user can see or not see

<summary>: Specifies the visible heading for an <details> element

Semantic Tags

Example:

<!DOCTYPE html>

<html>

<head>

<title> Semantic Tags </title>

</head>

<body>

<header>

<h1>Semantic Tags</h1>

</header>

<section>

<p>

“The tags that give an HTML page meaning rather than merely presentation are HTML semantics. It clarifies the many sections and page layouts of HTML, making it easier to understand to the users and web pages as well”.

</p>

</section>

<footer>

Semantic Tags.com

</footer>

</body>

</html>

8. Formatting Tags

<b>: Defines a part of the text in bold

<i>: Defines a written section in a different voice or mood

<sub>: Defines a text in a subscripted manner

<sup>: Defines a text in a superscripted manner

<strong>: Defines an important text

<ins>: Defines inserted text in a document

 

Formatting tags

Example:

  1. <b>Bold text</b>
  2. <strong>An important text</strong>
  3. <sub>H2O</sub>
  4. <sup><a2+b2</sup
  5. <i>Italic text</i>
  6. <p>My favorite cricket player is <del>Rohit Sharma</del> <ins>Virat Kohli</ins></p>

See also: What Is HTML Pug? Getting Started With It

Conclusion

HTML Tags are words or letters used to format or display your web pages. The article lists some of the most commonly used HTML tags with examples.

See Also: Games with HTML Codes

Leave a Comment