DEV Community

Leslie Gyamfi
Leslie Gyamfi

Posted on

Common HTML Tags Explained

#webdev #beginners #html

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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<body>The content of your HTML page</body>

Title Tag: The title tag also defines the title of the html document.
Syntax:

  <title>...........</title>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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....>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

<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... -->
Enter fullscreen mode Exit fullscreen mode

<!--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>
Enter fullscreen mode Exit fullscreen mode

<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...../>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<del>Common HTML tags explained </del>

Bold tag: It is used to bolden texts/content in an HTML document.
Syntax:

<b>......</b>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<i>common HTML tags explained</i>

Underline tag: This tag is also for underlining contents.
Syntax:

 <u>......</u>
Enter fullscreen mode Exit fullscreen mode

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


`
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
ashutoshmishra profile image
Ashutosh Mishra •

Great start 🚀

Collapse
 
kwamedev profile image
Leslie Gyamfi •

Thanks to you mentor!

Read next

mshsayket profile image

Laravel 11 Display Image from Storage Folder Example

Saddam Hossain -

sakib3201 profile image

Refactoring conditionals: The first steps to cleaner code.

sakib ahamed shahon -

thisweekinjavascript profile image

Claude AI now runs JavaScript, Python beats JavaScript on GitHub, new Node.js versions and more

James -

it_vturbo profile image

The Evolution of Frontend Development: Exploring Different Architectures

Valentin Turbins -