Most Common HTML Tags: A Beginner's Guide

Read Time:6 Minute

HTML (HyperText Markup Language) is the foundation of every web page. HTML tags are used to describe the structure and content of a document. HTML tags are enclosed in angle brackets, and they come in pairs – an opening tag and a closing tag. The content that goes between the tags is what is displayed on the web page.

In this blog post, we’ll cover some of the most common HTML tags and provide examples to help you get started.

HTML Tags List

Tag	Purpose	Example
<html>	Defines the beginning and end of an HTML document	<html>…</html>
<head>	Contains the title and other meta information about the web page	<head>…</head>
<body>	Contains all the content that is displayed on the web page	<body>…</body>
<h1> to <h6>	Defines headings on the web page, with <h1> being the largest and <h6> being the smallest	<h1>…</h1>
<div>	Groups larger sections of content	<div>…</div>
<span>	Groups smaller sections of content	<span>…</span>
<ul>	Creates an unordered list	<ul>…</ul>
<ol>	Creates an ordered list	<ol>…</ol>
<a>	Creates a hyperlink to another web page or section of the same page	<a href=”url”>…</a>
<img>	Displays an image on a web page	<img src=”image.jpg” alt=”description”>
<video>	Displays a video on a web page	<video src=”video.mp4″ controls>…</video>
<form>	Creates a form for user input	<form action=”url” method=”get/post”>…</form>
<table>	Creates a table on a web page	<table>…</table>

Basic HTML Tags

`<html>` and `<head>`

The <html> tag is used to define the beginning and end of an HTML document. The <head> tag is used to contain the title and other meta information about the web page.

<Doctype html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <p>This is some sample text.</p>
  </body>
</html>

`<body>`

The <body> tag contains all the content that is displayed on the web page. This includes text, images, and other elements.

<body>
  <h1>Welcome to my web page!</h1>
  <p>This is some sample text.</p>
  <img src="image.jpg" alt="An image">
</body>

`<h1>` to `<h6>`

The <h1> to <h6> tags are used to define headings on the web page, with <h1> being the largest and <h6> being the smallest.

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

Advanced HTML Tags

`<div>` and `<span>`

The <div> and <span> tags are used to group and style content. The <div> tag is used to group larger sections of content, while the <span> tag is used to group smaller sections.

<div class="container">
  <h1>Welcome to my web page!</h1>
  <p>This is some sample text.</p>
</div>
<span class="highlight">This text is highlighted.</span>

`<ul>` and `<ol>`

The <ul> and <ol> tags are used to create unordered and ordered lists, respectively.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

`<a>`

The <a> tag is used to create links to other web pages or to different sections of the same page.

<a href="<http://www.google.com>">Go to Google</a>
<a href="#section2">Go to Section 2</a>

`<img>`

The <img> tag is used to display images on a web page. The src attribute specifies the URL of the image and the alt attribute provides a text description of the image for accessibility purposes.

<img src="image.jpg" alt="An image">

`<video>`

The <video> tag is used to display videos on a web page. You can specify the source of the video using the src attribute and include controls for the user to play, pause, and adjust the volume.

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

`<form>`

The <form> tag is used to create a form on a web page where users can input information. You can specify the method of the form submission using the method attribute (usually either get or post) and the URL to submit the form to using the action attribute.

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">
</form>

`<table>`

The <table> tag is used to create tables on a web page. You can use the <tr> tag to create table rows, the <th> tag to create table headers, and the <td> tag to create table cells.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Best Practices for Using HTML Tags

Use semantic HTML to provide more meaning to your content and make it more accessible to those using screen readers.
Be consistent with your use of HTML tags throughout your website.
Use HTML validation tools to ensure your code is error-free and follows best practices.

Conclusion

HTML tags are an essential tool for any web developer. By understanding how to use the basic and advanced HTML tags, you can create web pages with rich content and functionality. Always keep best practices in mind when using HTML tags to ensure your code is accessible, error-free, and consistent.

There are many more HTML tags that you can explore, each with its own unique use case. Keep experimenting and learning to create stunning web pages.

Most Common HTML Tags: A Beginner’s Guide