Chapter 4: HTML Elements and Tags
HTML is built with elements, defined by tags that tell the browser how to display each part of a webpage. This chapter will cover the basics of HTML elements and tags, helping you understand how to create and structure your content.
1. What are HTML Elements?
An HTML element consists of a start tag, content, and an end tag. Together, they define a specific part of the HTML document, like a heading, paragraph, or image.
Example of an HTML element:
<p>This is a paragraph.</p>
In this example, <p> is the start tag, "This is a paragraph." is the content, and </p> is the end tag. Together, they form a <p> element, which represents a paragraph.
2. HTML Tags
Tags are keywords surrounded by angle brackets (< and >). They act as markers that tell the browser how to interpret the content between them.
Tags usually come in pairs: an opening tag and a closing tag, with the closing tag including a forward slash (/) before the tag name.
Example:
<h1>This is a heading</h1>
In this case, <h1> is the opening tag, </h1> is the closing tag, and the entire element defines a level-one heading.
3. Types of HTML Elements
HTML elements are divided into different types based on their functionality and usage:
Block-Level Elements
Block-level elements start on a new line and take up the full width available. Common block-level elements include:
<div>: A division or section of content.
<p>: A paragraph.
<h1> to <h6>: Headings of various sizes.
<ul> and <ol>: Unordered and ordered lists.
Example:
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph inside a div.</p>
</div>
Inline Elements
Inline elements do not start on a new line and only take up as much width as necessary. Common inline elements include:
<span>: A section within text or other content.
<a>: A hyperlink.
<img>: An image.
Example:
<p>This is a <span style="color:blue;">blue</span> word in a sentence.</p>
4. Self-Closing Tags
Some HTML tags do not have closing tags because they do not wrap around content. These are known as self-closing tags. Examples include:
<img>: Embeds an image.
<br>: Adds a line break.
<hr>: Adds a horizontal line.
Example:
<img src="image.jpg" alt="An example image">
<br>
<hr>
5. Nesting Elements
HTML elements can be nested inside other elements. When nesting, ensure that tags are properly opened and closed in the correct order.
Example of nested elements:
<div>
<h2>Welcome to My Website</h2>
<p>This is a paragraph with a <a href="https://example.com">link</a>.</p>
</div>
In this example, the <a> tag is nested inside the <p> tag, creating a clickable link within the paragraph.
6. Empty and Non-Empty Elements
Empty Elements: Do not contain any content, like <img> or <br>.
Non-Empty Elements: Contain content, like <p>, <div>, or <h1>.
Summary
This chapter covered the basic concepts of HTML elements and tags. You learned about block-level and inline elements, self-closing tags, and nesting elements. Understanding these foundational concepts is essential for building well-structured HTML documents. In the next chapter, we’ll explore text formatting in HTML and learn about various tags that allow you to style and structure text.
0 Comments