100 HTML tags with examples - A reference guide for brother

Rahul Krishnakumar's photo
Rahul Krishnakumar
·

3 min read

This reference guide is part of a course that am teaching my little brother about HTML as a beginner in frontend web development. The current phase of this guide is only mentioning what are the available HTML that we can use. It will help him get an overall understanding of HTML tags that he will see more often in the near future. The content on this page will be updated regularly when we discussing more on each tag.

What is an HTML tag?

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that the web browser can differentiate between simple text and HTML text. Every HTML contains three parts. An opening tag, content, and closing tag. But some HTML tags are unclosed tags we can name it self-closing right now.

Their are different version of HTML are (HTML 2, 3, 4, 5 ) HTML5 version is our main target.

Syntax:

<tagname> content </tagname>

Little terminology clarification

HTML Tag means : Just this <tagname> and </tagname> are called Html Tags.

HTML Element : The whole <tagname> content </tagname> thing is called an Html Element.

We are discussing only the tag names here.

1. Comments

Comment tag `<!-- -->Used to create or define comments in the HTML document. It can be used anywhere in the HTML document.

<!-- This is a comment in and only visible only inside -->

2. Document Type

Document type tag <!DOCTYPE html> used to mention the version of the HTML document. Mandatory, Must be used in the first line, and no closing tag. Example shows a version 5 syntax.

<!DOCTYPE html>
<html>
 <head></head>
 <body></body>
</html>

3. Anchor

Anchor tag <a></a> used to define a hyperlink that helps to link different web pages. 

<a href="URL"> click me </a>

4. Image

Image tag <img/> is used to display an image on the web page. It is a self-closing or (no closing tag)

<img src="URL" alt="Title of the image"/>

5. Paragraph

Paragraph tag <p></p> is used to define a piece of text content as a paragraph on web pages. By default, it adds a blank line below the last line of a paragraph.

<p> This is a paragraph </p>

6. Line break

Line break tag <br> or <br/> is used to create a line break in a text. The best practice is using
. It is a self-closing tag.

<p> This paragraph needs </br> a break </p>

Will be Continues:

Am teaching him right now.

Press Ctrl + Shift + R to refresh the page for updates.

HTML5HTMLguideteaching