HTML (HyperText Markup Language) forms the backbone of every webpage. As a web developer, understanding HTML elements and tags is essential to structure content and ensure it renders correctly in browsers. This post will guide you through the basics of HTML tags, elements, and how they work.
What Are HTML Tags and Elements?
- HTML Tags: Tags are the keywords surrounded by angle brackets <>. They are used to define content and structure.
Example: <h1> and </h1> - HTML Elements: An HTML element consists of a start tag, content, and an end tag.
Example:
<p>This is a paragraph.</p>Here:
• <p> → Start tag
• </p> → End tag
• This is a paragraph. → Content
Some tags do not have content or closing tags; these are called self-closing tags.
• Example: <img />, <br />
Commonly Used HTML Tags
Here are some of the most common HTML tags:
1. Document Structure Tags
• <html>: Root element that wraps all other tags.
• <head>: Contains metadata, links to stylesheets, and scripts.
• <title>: Defines the page title.
• <body>: Contains the visible content of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first webpage.</p>
</body>
</html>2. Headings Tags
Headings range from <h1> (largest) to <h6> (smallest).
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>3. Paragraph and Text Formatting Tags
• <p>: Paragraph.
• <strong>: Bold text.
• <em>: Italic text.
• <br>: Line break.
Example:
<p>This is a <strong>bold</strong> statement.</p>
<p>This is an <em>italic</em> word.</p>4. List Tags
HTML supports two types of lists:
•Ordered List (<ol>): Displays numbered items.
•Unordered List (<ul>): Displays bulleted items.
•List Item (<li>): Used within <ul> or <ol>.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>5. Link and Image Tags
• <a>: Creates hyperlinks.
• <img>: Displays images.
Example:
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of Image" />6. Table Tags
HTML tables allow you to display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Self-Closing Tags
Some tags do not require closing. Examples include:
• <br>: Line break.
• <img>: Insert images.
• <hr>: Horizontal rule.
Example:
<p>This is the first line.<br />This is the second line.</p>
<hr />HTML tags and elements are the foundation of web development. By understanding the purpose and syntax of these tags, you can structure web pages effectively. Whether you are adding headings, images, links, or tables, mastering these core concepts will pave the way for advanced web design and development.
Ready to dive deeper? Learn how to style these elements with CSS in our next post!
