HTML Tags: Everything in One

June 3, 2023

In this blog, you will learn about the basic structure of an HTML document, the most common HTML tags and their attributes, and how to use them to create a simple web page.

The Basic Structure of an HTML Document

An HTML document has a specific structure that consists of three main parts: the
document type declaration, the head section, and the body section.

  • The document type declaration (<!DOCTYPE html>) tells the browser what
    version of HTML you are using. It should be the first line of your HTML
    document.
  • The head section (<head>…</head>) contains information about the document, such as its title, meta data, style sheets, and scripts. It is not visible on the web page, but it affects how the browser displays the page.
  • The body section (<body>…</body>) contains the actual content of the web
    page, such as text, images, links, tables, forms, etc. It is what the user sees on the
    screen.

Here is an example of a basic HTML document:



[html]
<!DOCTYPE html>
<html>
<head>
 <title>My First Web Page</title>
</head>
<body>
 <h1>Hello World!</h1>
 <p>This is my first web page.</p>
</body>
</html>

The Most Common HTML Tags and Their Attributes

HTML tags are enclosed in angle brackets (< and >), and they usually come in pairs: a start tag and an end tag. For example,<p> is the start tag for a paragraph element, and </p> is the end tag. Some tags are self-closing, which means they do not need an end tag. For example, <img> is a self-closing tag for an image element.

HTML tags can also have attributes that provide additional information or functionality to the element. Attributes are written inside the start tag, after the tag name, and they consist of a name and a value separated by an equal sign. For example,<img src=”image.jpg” alt=”A picture”> has two attributes: src and alt.

Here are some of the most common HTML tags and their attributes:

  • <html>: This is the root element of an HTML document. It contains all other elements in the document.
  • <head>: This is the container for the head section of an HTML document. It can contain elements such as <title>, <meta>, <link>, and <script>.
  • <title>: This defines the title of an HTML document. It is displayed in the browser’s tab or window title bar.
  • <meta>: This provides meta data about an HTML document, such as its character encoding, keywords, description, author, etc. It has attributes such as name, content, charset, etc.
  • <link>: This links an external resource to an HTML document, such as a style sheet or a favicon. It has attributes such as rel, href, type, etc.
  • <script>: This embeds or references a script (usually JavaScript) in an HTML document. It has attributes such as src, type, async, etc.
  • <body>: This is the container for the body section of an HTML document. It can contain elements such as <h1>, <p>, <img>, <a>, etc.
  • <h1> to <h6>: These define headings of different levels in an HTML document. The lower the number, the more important the heading. For example, <h1> is the main heading of a web page, while <h6> is the least important heading.
  • <p>: This defines a paragraph of text in an HTML document. It automatically creates a new line before and after itself.
  • <img>: This displays an image in an HTML document. It has attributes such as src, alt, width, height, etc.
  • <a>: This creates a hyperlink to another web page or resource in an HTML document. It has attributes such as href, target, title, etc.
  • <ul>: This defines an unordered list (a list with bullet points) in an HTML document. It contains one or more <li> elements as its list items.
  • <ol>: This defines an ordered list (a list with numbers or letters) in an HTML document. It contains one or more <li> elements as its list items.
  • <li>: This defines a list item in an HTML document. It must be a child of either a <ul> or an <ol> element.
  • <table>: This defines a table in an HTML document. It contains one or more <tr> elements as its table rows.
  • <tr>: This defines a table row in an HTML document. It contains one or more <td> or <th> elements as its table cells.
  • <td>: This defines a table data cell in an HTML document. It can contain any type of content, such as text, images, links, etc.
  • <th>: This defines a table header cell in an HTML document. It is usually displayed in bold and centered, and it can contain any type of content, such as text, images, links, etc.
  • <form>: This defines a form in an HTML document. It can contain elements such as <input>, <label>, <select>, <button>, etc. It has attributes such as action, method, name, etc.
  • <input>: This defines an input field in an HTML document. It can be of different types, such as text, password, checkbox, radio, submit, etc. It has attributes such as type, name, value, placeholder, etc.
  • <label>: This defines a label for an input field in an HTML document. It has an attribute called for that links it to the input field by its id.
  • <select>: This defines a drop-down list in an HTML document. It contains one or more <option> elements as its options. It has attributes such as name, size, multiple, etc.
  • <option>: This defines an option in a drop-down list in an HTML document. It has attributes such as value, selected, etc.
  • <button>: This defines a button in an HTML document. It can contain any type of content, such as text, images, icons, etc. It has attributes such as type, name, value, etc.

These are some of the most common HTML tags and their attributes. You can use them to create a simple web page like this:



[html]
<!DOCTYPE html>
<html>
<head>
 <title>My First Web Page</title>
</head>
<body>
 <h1>My First Web Page</h1>
 <p>This is my first web page.</p>
 <img src="image.jpg" alt="A picture">
 <a href="https://www.codemylife.org">Visit Code My Life</a>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 <table>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Gender</th>
 </tr>
<tr>
 <td>Alice</td>
 <td>25</td>
 <td>Female</td>
 </tr>
 <tr>
 <td>Bob</td>
 <td>30</td>
 <td>Male</td>
 </tr>
 </table>
 <form action="submit.php" method="post">
 <label for="name">Name:</label>
 <input type="text" id="name" name="name" placeholder="Enter your name">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" placeholder="Enter your email">
 <label for="password">Password:</label>
 <input type="password" id="password" name="password" placeholder="Enter
your password">
 <input type="submit" value="Submit">
 </form>
</body>
</html>

This is how you can use HTML tags to create a web page. I hope this blog helps you understand the basics of HTML and inspires you to learn more about web development.

Kumar Amit

View Profile View All Posts

Leave a Reply