Common and most important HTML tags

Hi, everyone today in this blog post i am going to discuss about the most common HTML tags by understanding them you will have a strong foundation for creating your own web pages.

Below are the 7 most Common HTML tags list.

Headings: <h1> through <h6>
Paragraphs: <p>
Lists: <ul>, <ol>, and <li>
Links: <a>
Images: <img>
Tables: <table>, <tr>, <th>, <td>
Forms: <form>, <input>, <label>, <select>, <option>, <textarea>

Headings: <h1> through <h6>

Headings are used to create different levels of titles and subtitles on a web page. There are six levels of headings available in HTML, from <h1> to <h6>. The <h1> tag is used for the main title of a page, while <h2> is used for subtitles and so on.

It is important to use headings correctly in order to create a logical and well-structured document. Search engines use headings to understand the structure of a web page and to determine its relevance to a user’s query.

Using headings correctly can also make it easier for users to scan and read your content. Headings break up text into smaller chunks and make it easier to understand the main points of a page.

When using headings, it is important to keep them in order, starting with <h1> and moving through the levels in sequence. For example, it would not be appropriate to use <h3> before using <h2>.

Here is an example of how to use headings in HTML:

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Title</h3>
<h4>Subsection Title</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Paragraphs: <p>

The <p> tag is used to create paragraphs in an HTML document. Paragraphs are used to separate text into manageable chunks, making it easier for users to read and understand.

Here is an example of how to use the <p> tag:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Lists: <ul>, <ol>, and <li>

HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>).

Unordered lists are used to create bullet points and are usually used for lists of items that do not have a specific order. The list items are marked with the <li> tag.

Ordered lists are used to create numbered lists and are usually used for lists of items that have a specific order. The list items are also marked with the <li> tag.

Here is an example of how to use unordered lists:

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

And an example of how to use ordered lists:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Links: <a>

The <a> tag is used to create links in an HTML document. Links allow users to navigate between web pages and other resources on the internet.

The “href” attribute is used to specify the URL of the resource that the link points to.

Here is an example of how to use the <a> tag:

<a href="https://www.example.com">Visit Example</a>

Images: <img>

The <img> tag is used to add images to an HTML document. The “src” attribute is used to specify the URL of the image file, and the “alt” attribute is used to provide a text description of the image.

The alt attribute is important for accessibility, as it provides a text alternative for users who cannot see the image. It is also used by search engines to understand the content of the image.

Here is an example of how to use the <img> tag:

<img src="image.jpg" alt="A beautiful sunset">

Tables: <table>, <thead>, <tbody>, <tr>, <th>, <td>, and <tfoot>

The <table> tag is also in the list of the most common html tags it is used to create tables in an HTML document. Tables are used to present data in a tabular format.

Tables are an important tool for displaying data in a tabular format in an HTML document. HTML provides a variety of tags for creating tables, including <table>, <thead>, <tbody>, <tr>, <th>, <td>, and <tfoot>.

The <table> tag is used to create a table. Inside the table, you can use <thead>, <tbody>, and <tfoot> tags to create the header, body and footer of the table respectively. These tags are optional, but they are useful when you want to apply styles to specific sections of the table.

The <tr> tag is used to create a table row, and the <td> tag is used to create a table data cell. The <th> tag is used to create a table header cell. These cells are the basic building blocks of a table, and they are used to contain the data that is displayed in the table.

Here is an example of how to create a basic table with <thead>, <tbody> and <tfoot> tags:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

In this example, the <thead> tag contains the header row of the table, which is typically used to label the columns of the table. The <tbody> tag contains the rows that make up the body of the table. The <tfoot> tag contains the footer row of the table, which is typically used for summary information or to show totals.

It’s important to use these tags correctly, as it can help to maintain the semantics of the table and also help with accessibility.

Additionally, you can use CSS to style the table, headers, rows and cells to make them more presentable and readable.

It’s also important to keep in mind that tables should only be used to display data that is best represented in a tabular format, and not for layout purposes.

Forms: <form>, <input>, <label>, <select>, <option>, <textarea>

The <form> tag is used to create forms in an HTML document. Forms are used to collect data from users.

The <input> tag is used to create form controls, such as text fields, checkboxes, and buttons. The “type” attribute is used to specify the type of form control.

The <label> tag is used to create text labels for form controls. The “for” attribute is used to associate the label with a specific form control.

The <select> tag is used to create a drop-down list of options. The <option> tag is used to create individual options within the list.

The <textarea> tag is used to create a multi-line text input field. The “rows” and “cols” attributes are used to specify the number of rows and columns for the textarea.

Here is an example of how to create a basic form:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  
  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" rows="5" cols="30"></textarea>
  
  <input type="submit" value="Submit">
</form>

Please note that this is a simple example, in real-world scenarios, forms will be more complex and will include validation, error handling, and other features.

The above list of elements are the most commonly used elements in HTML, and by understanding them you will have a strong foundation for creating your own web pages.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *