The Most Commonly Used HTML Tags for beginner

HTML tags are simple instructions that tell a web browser how to format text and they're an important tool for any web developer. If you are getting started with web development, your first topic need to understand in HTML TAGS

The tags are placed in angle brackets `< >` and most have both an opening and closing form.

There are nearly 100 different types of HTML tags and you probably won't need to use them all. Some are for structuring the basic document and some are for adding media, creating forms, or setting the typeface. Others relate to the document's metadata.

In this article, we will learn the most commonly used HTML Tags that you need to know as a beginner

Basic Document Structure

Every HTML document needs the following tags:

<html>...</html> : Defines the document as a web page. All other elements are nested inside this tag.
<head>...</head> : The head or prologue of the document which contains general information about the webpage, such as the title.
<body>...</body> : Includes the content that's actually displayed in the browser, e.g. text, images, videos.

Headings and Text Formatting

These tags are used to format text and add headings:

<h1>..</h1> : Heading 1, the largest heading tag. There are heading tags up to <h6>..</h6>

  <h1>This is a blog heading</h1>
  <h2>Sencondary headline</h2>
  <h3>Headline 3</h3>
  <h4>Headline 4</h4>
  <h5>Headline 5</h5>
  <h6>Headline 6</h6>

<p>...</p> : In HTML, every paragraph should wrapped with a <p> element.

  <h6>It's a paragraph. It used to show any text as paragraph</h6>

<br> : Inserts a single line break.

  <p>
  This line will break here
  <br> 
  this text start after line break.....
  </p>

<hr> : Creates a horizontal line on the page.

<b>...</b> : Makes the enclosed text bold.

  <b>this is a bold text</b>
  <p>this is another <b>example</b> of bold tag</p>

<i>...</i> : Makes the enclosed text italic.
```
  <i>this is a italic text</i>
```
<u>...</u> : Underlines the enclosed text.
```
  <u>this is underline tag</u>
```
<sup>...</sup> : Enclosed text appears superscripted.
```
  a <sup>2</sup> + b <sup>2</sup>
```
<sub>...</sub> : Enclosed text appears subscripted.
```
  H<sup>2</sup>O
```

<center>...</center> : Centers the enclosed content on the page. This is now achieved by CSS in modern HTML.

  <center>
      <p> 
          everything inside center tag 
          <br>
          will be displayed in center of webpage
       </p>
  </center>

Lists

HTML has tags for adding various types of lists:

<ol>...</ol> : The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

The <li> is used to define each list item.

By default it will start the list with 1,2,3... You can define which order you would like to have in your list like 1,2,3.. or i,ii,ii... or a,b,c.. and so on

  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

  <ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

  <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

<ul>...</ul> : Creates an unordered list with bullet points. Also used with the

<li> tag.

  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

<li>...</li> : The <li> tag defines a list item.

The <li> tag is used inside ordered lists <ol>, unordered lists <ul>, and in menu lists <menu>.

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.
```
  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
```
<dl>...</dl> : The <dl> tag defines a description list and is used in conjunction with the <dt> and <dd> tags. It is also possible to use the <dl> tag to create a dialog, with each <dt> tag naming a speaker and the corresponding <dd> tag containing their words.
<dt>...</dt> : Defines a term or position in the definition list.

<dd>...</dd> : Provides the definition.

  <dl>
    <dt>George</dt>
    <dd>Hi Mary</dd>
    <dt>Mary</dt>
    <dd>Hi George, how are you?</dd>
    <dt>George</dt>
    <dd>I'm good, thanks. How about you?</dd>
  </dl>

Media

You can use the following tags to add visual and audio elements:

<img /> : The <img> tag is used to insert images into a webpage. It doesn't have a closing tag. The src attribute is mandatory and specifies the path to the image file. You can also use the alt attribute to provide alternative text for the image, which is crucial for accessibility and SEO.
```
  <img src="bird.jpg" alt="A beautiful bird image">
```
<audio>...</audio> : The <audio> tag is used to embed audio content into a webpage. It requires a closing tag. You need to specify the src attribute to provide the path to the audio file. Additionally, you can use attributes like controls to enable playback controls and autoplay to make the audio play automatically.
```
  <audio src="nice-music.mp3" controls autoplay>
     Your browser does not support the audio element.
  </audio>
```
Now a days, you can also use multiple src with multiple format. Browser will choose the supported version by ascending order. In this example if the .ogg format is not supported by browser or the browser is old then it will load the next format .mp3 which will supported by all types of browser
```
  <audio controls>
    <source src="nice-music.ogg" type="audio/ogg">
    <source src="nice-music.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
  </audio>
```
<video>...</video> : The <video> tag is used to embed video content into a webpage. Similar to <audio>, it requires a closing tag and uses the src attribute to specify the path to the video file. Attributes like controls, autoplay, and loop can be used for user interaction and playback control.
```
  <video src="nature.mp4" controls autoplay loop>
     Your browser does not support the video tag.
  </video
```
Similarly like <audio> tag now a days in modern browser you can use multiple supported format of a video. Browser will automatically choose the supported version. You can also use height, width attribute to define the video size
```
  <video width="320" height="240" controls>
    <source src="nature.mp4" type="video/mp4">
    <source src="nature.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
```
<picture>...</picture> : The <picture> tag is super handy when you want your webpage's images to adapt to different screen sizes and resolutions. It's like having a bunch of outfits for your image, and the browser picks the best one based on what device it's being viewed on.
- <source>: Inside the <picture> tag, we use <source> elements to provide different image sources. Each <source> tag specifies a particular image and the conditions under which it should be used. For example, we might have one image for small screens and another for large screens.
- srcset: This attribute inside the <source> tag tells the browser where to find the image files. You can provide multiple image sources separated by commas, each with its own URL and size descriptor. The browser picks the best one based on its capabilities.
- media: The media attribute lets you specify conditions for when each image should be used based on factors like screen size or orientation. It uses a media query syntax similar to CSS. For instance, you might want one image for screens smaller than 600 pixels wide and another for screens between 600 and 900 pixels wide.
- <img>: Finally, we have an <img> tag nested inside the <picture> tag. This serves as fallback content for older browsers that don't support the <picture> tag or for situations where none of the <source> conditions are met. It's like having a default outfit for your image.

    <picture>
       <source srcset="small.jpg" media="(max-width: 600px)">
       <source srcset="medium.jpg" media="(max-width: 900px)">
       <img src="large.jpg" alt="A responsive image">
    </picture>

Forms

To create interactive forms and get data from user, these tags are commonly used

<form>...</form> : The <form> tag is used to create an interactive form on a webpage. It acts as a container for form elements such as input fields, buttons, checkboxes, etc. The most important attribute for this tag is the action attribute, which specifies the URL where the form data will be sent upon submission.
```
  <form action="/submit_form" method="post">
  </form>
```
<input> : The <input> tag is used to create various types of input fields like text fields, checkboxes, radio buttons, etc. The type attribute determines the kind of input field to be displayed. Other attributes like name and placeholder are often used to specify the name of the input and provide a hint to the user, respectively.
```
  <input 
      type="text" 
      name="username" 
      placeholder="Enter your username"
  />
```
<label> : The <label> tag is used to associate a text label with a form control created by the <input> tag. This improves accessibility and usability, as clicking the label will focus or activate the associated input field. The for attribute is used to specify which input field the label is associated with by referencing the input field's id attribute.
```
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
```
<button>...</button> : The <button> tag creates a clickable button that can be used to submit a form or trigger JavaScript functions. The type attribute is often set to "submit" to create a submit button, but it can also be set to "button" or "reset"
```
  <button type="submit">Submit</button>
```
<textarea> : The <textarea> tag is used to create a multi-line text input field, useful for allowing users to input large amounts of text. Unlike <input type="text">, <textarea> is used for longer text inputs. The rows and cols attributes can be used to specify the size of the textarea
```
  <textarea 
      rows="4" 
      cols="50" 
      name="message" 
      placeholder="Enter your message">
  </textarea>
```
<select>...</select> : The <select> tag is used to create a dropdown list of options from which users can select one or more choices. It is typically used when there are multiple predefined options and the user can only choose one (for selecting a single option, use <select> with <option> tags). The name attribute is crucial, as it identifies the form field when the form is submitted.
```
  <select name="gender">
      <option value="">Select your gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
  </select>
```

Table

Basic Table

A html table is structured using the following tags:

<table>: This tag defines the entire table.
<tr>: Represents a row within the table.
<th>: Stands for table header, used to define header cells within a row.
<td>: Stands for table data, used to define regular cells within a row.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

Advance HTML5 Table

Modern HTML5 introduces new elements to enhance table semantics and accessibility:

<caption>: This tag provides a title or description for the table.
<colgroup> and <col>: These tags allow grouping and styling of columns. You can also skip this <colgroup> if you want, as you can achieve this by css class
<thead>, <tbody>, and <tfoot>: These tags group table rows into header, body, and footer sections, respectively.

<table>
    <caption>Employee Information</caption>
    <colgroup>
        <col style="background-color: #red;">
        <col style="background-color: #green;">
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Marketing</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>Finance</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total Employees: 2</td>
        </tr>
    </tfoot>
</table>

Using these tags improves table structure, making it easier for screen readers to navigate and improving overall accessibility.

Merge Table Cells and Rows

colspan : You can merge 1 or more cells of a table by using colspan attribute at table cells

  <table border="1">
      <tr>
          <th colspan="2">Header 1, 2 merged</th>
      </tr>
      <tr>
          <td rowspan="3">Row 1,2 merged and Column 1</td>
          <td>Row 1, Column 2</td>
      </tr>
      <tr>
          <td>Row 2, Column 2</td>
      </tr>
      <tr>
          <td>Row 3, Column 2</td>
      </tr>
  </table>

Links

HTML tags also provide for adding links in your document:

<a>...</a> : The <a> tag, short for anchor, is used to create hyperlinks in HTML. It allows you to link one webpage to another, or link to different sections within the same webpage. The href attribute is essential in the <a> tag, as it specifies the URL or destination of the link.
```
  <a href="https://google.com">Visit Google website</a>
```
<link> : The <link> tag is used to link external resources to an HTML document. This could be CSS stylesheets, icons, or even alternative versions of the document. The href attribute in the <link> tag specifies the location of the external resource, while the rel attribute defines the relationship between the current document and the linked resource.
```
  <link rel="stylesheet" href="styles.css">
```
<nav>...</nav> : The <nav> tag is used to define a section of navigation links in an HTML document. It's typically used to wrap around a list of links that navigate to different sections or pages within a website. While the nav tag itself doesn't require specific attributes, it's often used in conjunction with other tags like <ul> (unordered list) and <li> (list item) to structure the navigation.
```
  <nav>
      <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
      </ul>
  </nav>
```

Iframe

The <iframe> (inline frame) tag is used to embed another HTML document within the current document. It is commonly used to display external content such as videos, maps, or documents from other websites. The src attribute specifies the URL of the content to be embedded, and additional attributes like width and height control the dimensions of the iframe.

src (Source) : This attribute specifies the URL of the content to be displayed within the iframe. It's like telling the iframe where to look for the content to embed.

<iframe src="https://www.example.com"></iframe>

width and height : These attributes determine the width and height of the iframe, respectively. They specify the dimensions of the iframe in pixels or other supported units. Here's an example setting the width and height:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

title : The title attribute provides a title or description for the iframe content. It helps improve accessibility by providing additional context when the iframe is embedded within the page

<iframe src="https://www.example.com" title="Example Website"></iframe>

frameborder : This attribute controls whether or not to display a border around the iframe. Setting it to "0" removes the border, while setting it to "1" adds a border.

<iframe src="https://www.example.com" frameborder="0"></iframe>

allowfullscreen : This attribute allows the iframe content to be displayed in fullscreen mode if supported by the browser and the embedded content. It's commonly used for embedding videos

<iframe src="https://www.youtube.com/embed/video_id" allowfullscreen></iframe>

sandbox : The sandbox attribute provides a set of restrictions for the content within the iframe, enhancing security. It can restrict features like form submission, script execution, or navigation

<iframe src="https://www.example.com" sandbox="allow-scripts"></iframe>

Other Useful Tags

There are numerous other tags which you might find useful, including:

<div>...</div> : The <div> tag is a block-level element used to divide or section off parts of a webpage for styling or scripting purposes. It acts as a container for other HTML elements and allows you to apply styles or scripts to groups of elements. <div> tags are often used in combination with CSS for layout and formatting purposes, enabling developers to create flexible and organized web layouts.
```
  <div>
      <p>This is some content inside a div element.</p>
  </div>
```
<style>...</style> : The <style> tag is used to define CSS styles directly within an HTML document. It allows you to apply styles to HTML elements without the need for an external CSS file. Styles defined within <style> tags affect all elements within the document or specific elements targeted by CSS selectors. Here's an example of using <style> to set the color of a paragraph:
```
  <style>
      p {
          color: blue;
      }
  </style>
  <p>This is a paragraph with blue text.</p>
```

<script>...</script> : The <script> tag is used to embed client-side scripts, typically JavaScript, within an HTML document. It allows you to add interactivity, manipulate the DOM, handle events, and perform various other tasks on the client-side. The src attribute can be used to link an external JavaScript file, while script content enclosed within the <script> tags is executed directly within the document.

Here's an example of using <script> to display an alert message:

<script>
    alert("Hello, world!");
</script>

Alternatively, you can link an external JavaScript file like this:

<script src="script.js"></script>

Final Thoughts

Don't stress about memorizing every single HTML tag out there. The ones covered here are the ones you'll find yourself using most often. Through practice and repetition, you'll naturally commit them to memory over time. However, it's also perfectly fine to rely on resources like google when you need a quick reminder. Keep coding, keep experimenting, and remember that learning is a journey, not a race. Happy coding! 😊

Hossain Foysal's Blog