The first task to start your HTML journey is learning HTML Tags. There are various tags to know about before coding in HTML.
This article attempts to list some of the HTML Tags with examples.
Table of Contents
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
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.
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
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.
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
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
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
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
Example:
- <b>Bold text</b>
- <strong>An important text</strong>
- <sub>H2O</sub>
- <sup><a2+b2</sup
- <i>Italic text</i>
- <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
