Sign in Subscribe
Web Development

HTML Tags and Elements: What You Need to Know

Aryan

• 5 min read
HTML Tags and Elements: What You Need to Know

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It forms the structure of web pages by using a series of elements, which are represented by tags. Understanding these basic HTML tags and their usage is crucial for anyone beginning their journey into web development. This comprehensive guide will provide you with an in-depth look at essential HTML tags and how to use them effectively.

What Are HTML Tags and Elements?

An HTML element consists of a start tag, content, and an end tag. For example, in the following HTML code:

<p>This is a paragraph.</p>
  • <p> is the start tag.
  • This is a paragraph. is the content.
  • </p> is the end tag.

Together, they form a complete HTML element.

The Structure of an HTML Document

An HTML document is structured hierarchically, starting with the <!DOCTYPE html> declaration, followed by the <html> root element, which contains the <head> and <body> elements.

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
    <meta charset="UTF-8">
</head>
<body>
    <p>This is a paragraph in the body.</p>
</body>
</html>

1. The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration is used to define the document type and version of HTML being used. It ensures that the browser renders the page in standards mode.

<!DOCTYPE html>

2. The <html> Tag

The <html> tag is the root element of an HTML document. All other HTML elements must be nested within this tag.

<html>
    <!-- Other elements go here -->
</html>

3. The <head> Tag

The <head> element contains meta-information about the HTML document, such as its title, character set, styles, scripts, and other metadata.

<head>
    <title>My First HTML Page</title>
    <meta charset="UTF-8">
</head>

4. The <title> Tag

The <title> tag sets the title of the webpage, which is displayed in the browser's title bar or tab. It is a required element and should be placed within the <head> element.

<title>My First HTML Page</title>

5. The <body> Tag

The <body> element contains the content of the HTML document, such as text, images, links, and other media. It is the main container for the visible part of the webpage.

<body>
    <p>This is a paragraph in the body.</p>
</body>

6. The <p> Tag

The <p> tag defines a paragraph of text. It is a block-level element, meaning it will start on a new line and take up the full width available.

<p>This is a paragraph.</p>

7. The <h1> to <h6> Tags

The <h1> to <h6> tags define headings, with <h1> being the highest (most important) level and <h6> the lowest. Headings are also block-level elements.

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

8. The <a> Tag

The <a> tag defines a hyperlink, which is used to link from one page to another. The href attribute specifies the URL of the page the link goes to.

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

9. The <img> Tag

The <img> tag is used to embed an image in an HTML page. It has several attributes, with src (source) and alt (alternative text) being the most important.

<img src="image.jpg" alt="Description of the image">

10. The <ul>, <ol>, and <li> Tags

The <ul> tag defines an unordered list (bulleted list), <ol> defines an ordered list (numbered list), and <li> defines a list item.

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

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

11. The <div> Tag

The <div> tag defines a division or section in an HTML document. It is a block-level element often used as a container for other elements to style them with CSS or to manipulate them with JavaScript.

<div>
    <p>This is a paragraph inside a div.</p>
</div>

12. The <span> Tag

The <span> tag is an inline container used to mark up a part of a text or a part of a document. It is useful for applying styles or scripts to a portion of the text.

<p>This is a <span style="color: red;">red</span> word.</p>

13. The <form> Tag

The <form> tag is used to create an HTML form for user input. Forms can contain various input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

<form action="/submit_form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <input type="submit" value="Submit">
</form>

14. The <input> Tag

The <input> tag is used to create interactive controls in an HTML form. It can be of various types, such as text, password, submit, radio, checkbox, etc.

<input type="text" id="name" name="name">
<input type="submit" value="Submit">

15. The <label> Tag

The <label> tag defines a label for an <input> element. It helps improve the usability and accessibility of web forms.

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

16. The <textarea> Tag

The <textarea> tag is used for multi-line text input.

<textarea id="message" name="message" rows="4" cols="50">
Enter your message here...
</textarea>

17. The <button> Tag

The <button> tag defines a clickable button.

<button type="button" onclick="alert('Button clicked!')">Click Me!</button>

Conclusion

These are some of the basic HTML tags that form the foundation of web development. Mastering these tags will enable you to create well-structured, semantic, and accessible web pages. As you continue to learn and practice, you'll discover many more HTML elements and attributes that will allow you to create more complex and dynamic web content.

Happy coding!

Author: Aryan Kumar is a web developer specializing in HTML, CSS, and JavaScript, working at Asecurity. Contact here (Instagram) : @aryan_geek .

#webdevelopment #html #css #javascript