The HTML or HyperText Markup Language is the standard markup language for creating Web pages. It is the language for the web that defines the structure of web pages and is assisted by technologies such as CSS (Cascading Style Sheets) and scripting languages such as JavaScript.
What is an HTML Tag?
An HTML tag is commonly defined as a set of characters comprising a formatted command for a Web page. HTML tag represents the root of an HTML document and with the help of these tags a browser can distinguish between an HMTL content and a simple content.
Recently, I have been wondering the number of HTML tags that exist. Doing some research, I realized that according to Mozilla Developer Network (MDN) and HTML.com, there are 142 and 132 respectively. As a developer, memorizing this number of tags can be tough and hence the reason behind this article. HTML contains lots of predefined tags and some of them are described below.
HTML Tag: The HTML tag forms the construct and nature of the document and specifies that the document is an html file.
Syntax:
<html> statements... </html>
<html>
<head>
<title>Title of web page</title>
</head>
<body>contents of HTML web page</body>
</html>
Head Tag: The head tag represents the head section of the html document and contains metadata; document title, character set, styles, links.
Syntax:
<head>....... </head>
<head>contains metadata describing the document</head>
Body Tag: The body tag defines the main content of the html document or the section of the HTML document that is visible on the web page.
Syntax:
<body> statements.... </body>
<body>The content of your HTML page</body>
Title Tag: The title tag also defines the title of the html document.
Syntax:
<title>...........</title>
<title>Tab name</title>
Heading Tag: HTML headings are defined with h1 to h6 tags and are used to separate headings and subheadings on a webpage.
Syntax:
<h1>............</h1>
<h2>............</h2>
<h3>............</h3>
<h4>............</h4>
<h5>............</h5>
<h6>............</h6>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
Paragraph Tag: This HTML tag is used to create a block of text as a paragraph in an html document.
Syntax:
<p>.............</p>
<p>Common HTML tags explained</p>
Anchor Tag:The HTML anchor tag defines a hyperlink that links one page to another page. It creates a link to a target URL. It wraps the link around images, texts, or as buttons so users can interact with it and visit the link's destination. It's used to either provide an absolute or relative reference.
Syntax:
<a href="...."> statements...</a>
<a href="https://www.dev.to/santan21/common-html-tags-explained </a>
List Tag: This tag enumerates content, usually items, in a list form.
Syntax:
<li> statements... </li>
<li>List item 1</li>
<li>List item 2</li>
Ordered Tag: It is used to spell out content of an html file in a particular order.
Syntax:
<ol> statements..... </ol>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
Unordered Tag: This tag does the exact opposite of the ordered tag by listing content in no particular order.
Syntax:
<ul> statements... </ul>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Link Tag: This HTML element specifies a relationship between the current HTML document and an external resource.
Syntax:
<link>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Font Tag: It is used to define the font characteristics; font size, color and font-family in the HTML document.
Syntax:
<font> statements... </font>
<font face="Times New Roman">Example</font>
Line Break Tag: In HTML, this element creates a line break in HTML which is equal to a line carriage return on a keyboard. It can be used to display lyrics or other forms of content where division of lines is useful.
Syntax:
<br statements....>
Beginners Guide<br>To HTML tags
Center tag: A block-level element used to set the alignment of text into the center.
Syntax:
<center> statements.... </center>
<center>Common HTML tags explained</center>
Comment tag: This element is used to comment out in an HTML document. These comments are not rendered by browsers and therefore are not visible to readers.
Syntax:
<!-- Statements... -->
<!--Comment here-->
Meta tag: The meta tag defines metadata about an HTML document. It is a snippet that describe a page's content and is usually located
in the 'head' element and specifies page description, character sets, author of the document, etc.
Syntax:
<meta> statement.....<meta>
<meta name="Description"
content="Description of your page">
Horizontal rule tag: It is an element that is often displayed as a horizontal rule to separate content in an HTML page.
Syntax:
<hr...../>
<hr width="80%" size="5"
Deleted text tag: The del tag in HTML stands for delete and defines text that has been deleted in a document.
Syntax:
<del>.......</del>
<del>Common HTML tags explained </del>
Bold tag: It is used to bolden texts/content in an HTML document.
Syntax:
<b>......</b>
<b>common HTML tags explained</b>
Italic tag: The italic tag also known as the Idiomatic Text element is used to define and display content in an Italic style.
Syntax:
<i>......</i>
<i>common HTML tags explained</i>
Underline tag: This tag is also for underlining contents.
Syntax:
<u>......</u>
<u> Common HTML tags explained</u>
HTML Supported Browsers:
1.Safari
2.Firefox
3.Opera
4.Internet Explorer
5.Google Chrome
Conclusion
Outlined above are some of the commonest HTML tags you are mostly going to employ in your project developments. This should be a form of hack to save you the stress of memorizing over hundred tags.
Happy reading everyone!
Feel free to ask questions in the comment box below.
`
Top comments (2)
Great start 🚀
Thanks to you mentor!