html tags list with examples

HTML Tags List with Examples: A Comprehensive Guide for Beginners

by

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. If you want to open your HTML files on your iPhone, then don’t worry because we have a guide explaining exactly that.

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, such as embedding a YouTube video in HTML, 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:


<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: 


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

See also : Discover The Countless HTML Tags: A Comprehensive Guide

3. Lists

<li>: Define a list item

<ol>: Defines an ordered list

<ul>: Defines an unordered list essential for Adding Bullet Points In HTML.

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

See also: Designing A Simple Footer In HTML: Best Practices And Code Examples

<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:


<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

FAQS

What is the difference between block-level and inline-level elements?

Block-level elements are HTML tags that create a new line and fill the entire width of their container, while inline-level elements are HTML tags that do not create a new line and only take up as much space as necessary. Some common examples of block-level elements are div, p, and h1, while common examples of inline-level elements are span, a, and img.

What is the role of the HTML head element?

The HTML head element contains meta-information about the HTML document not displayed on the web page. This includes the title of the document, links to external CSS files, and scripts for JavaScript and other client-side languages.

What is the role of the HTML body element?

The HTML body element contains the content displayed on the web page. This includes headings, paragraphs, images, links, and other HTML tags that define the structure and layout of the page.

What is the difference between the id and class attributes?

The ID attribute uniquely identifies an HTML element on a web page. In contrast, the class attribute groups multiple pieces based on a standard feature. Each id must be unique within the HTML document, while various elements can share the same class.

How do I create links in an HTML document?

To create links in an HTML document, you can use the tag and set the href attribute to the URL of the destination page. For example, You can also add optional attributes such as target, rel, and title to control the behavior and appearance of the link.

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

See Also: HTML5 Document Viewer: Top 10 Tools to Use

Leave a Comment