Current Location：How HTML > HTML Articles > Content

HTML Tags

HTML Tags

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It consists of a series of elements, or tags, that define the structure and content of a webpage. In this article, we will explore some of the most commonly used HTML tags and how to use them in your web development projects.

1. Headings

Headings are used to define the structure of a webpage and provide visual hierarchy to the content. There are six levels of headings, with <h1> being the largest and most important, and <h6> being the smallest.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>How2HTML.com</h1>
<h2>Welcome to How2HTML.com</h2>
<h3>Learn HTML with How2HTML.com</h3>
<h4>Explore HTML Tags on How2HTML.com</h4>
<h5>HTML Resources on How2HTML.com</h5>
<h6>Contact How2HTML.com</h6>
</body>
</html>

Output:

HTML Tags

2. Paragraphs

Paragraph tags <p> are used to create paragraphs of text on a webpage. They are commonly used to group blocks of text together.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Welcome to How2HTML.com, your one-stop resource for learning HTML. Whether you are a beginner or an experienced developer, we have something for everyone.</p>
<p>Explore our tutorials, articles, and resources to enhance your HTML skills and stay up to date with the latest web development trends.</p>
</body>
</html>

Output:

HTML Tags

3. Links

Links are used to navigate between different webpages or sections within a webpage. The <a> tag is used to create hyperlinks.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.how2html.com">Visit How2HTML.com</a>
<a href="#tutorials">Jump to Tutorials</a>
</body>
</html>

Output:

HTML Tags

4. Images

Images can be displayed on a webpage using the <img> tag. The src attribute is used to specify the URL of the image.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="How2HTML Logo">
</body>
</html>

Output:

HTML Tags

5. Lists

There are two types of lists in HTML: ordered lists <ol> and unordered lists <ul>. List items <li> are used to define the items in a list.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Top 3 HTML Resources:</h3>

<ul>
  <li><a href="https://www.w3schools.com/html/">W3Schools</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a></li>
  <li><a href="https://www.how2html.com">How2HTML.com</a></li>
</ul>
</body>
</html>

Output:

HTML Tags

6. Forms

Forms are used to collect user input on a webpage. The <form> tag is used to create a form, while input fields such as text <input type="text">, checkboxes <input type="checkbox">, and buttons <button> can be used within the form.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

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

Output:

HTML Tags

7. Tables

Tables are used to display data in rows and columns. The <table> tag is used to create a table, with <tr> defining a row, <th> defining a header cell, and <td> defining a data cell.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tags

8. Divisions

The <div> tag is used to create divisions or sections on a webpage. It is used to group and style elements together.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
  <h1>How2HTML.com</h1>
  <p>Your HTML learning resource</p>
</div>

<div id="main-content">
  <h2>Welcome to How2HTML.com</h2>
  <p>Learn HTML with our easy-to-follow tutorials.</p>
</div>
</body>
</html>

Output:

HTML Tags

9. Comments

Comments can be added to HTML code to provide extra information or to hide code from being rendered in the browser. Comments are enclosed in <!-- -->.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- This is a comment -->
<p>This paragraph is visible on the webpage.</p>
</body>
</html>

Output:

HTML Tags

10. Embedding Media

Media such as videos and audio can be embedded in a webpage using the <video> and <audio> tags.

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

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

Conclusion

In this article, we have covered some of the basic HTML tags that are commonly used in web development. Understanding these tags and how to use them effectively is essential for creating well-structured and visually appealing webpages. As you continue to explore HTML, you will discover even more tags and elements that can enhance the functionality and design of your websites. Happy coding!

Like(0)

HTML Articles