HTML Elements

3. HTML Elements

HTML elements are the building blocks of web pages. Each element consists of a start tag, content, and an end tag. Some elements also have attributes that provide additional information.

Block-Level Elements

Block-level elements take up the full width available and start on a new line. These are typically used for larger sections of content, such as paragraphs, headings, and divs.

<p>: Defines a paragraph of text.
<h1> to <h6>: Define headings of different levels.
<div>: A generic container used for grouping content.
<section>: Defines a section in a document.

Inline Elements

Inline elements only take up as much width as necessary and do not break the flow of the content. They are used for smaller pieces of content inside block-level elements.

<a>: Defines a hyperlink.
<span>: Used to group inline elements.
<strong>: Defines important text (typically bold).
<em>: Defines emphasized text (typically italic).

Self-Closing Elements

Some HTML elements do not have a closing tag. These are known as self-closing elements. For example, the <img> tag is used to insert images, and the <br> tag is used for line breaks.


<img src="image.jpg" alt="A sample image">
<br>

Example: Basic HTML Structure

Here's an example that demonstrates the use of block-level, inline, and self-closing elements:


<html>
  <head>
    <title>Example of HTML Elements</title>
  </head>
  <body>
    <h1>Welcome to HTML Elements</h1>
    <p>This is a <strong>block-level</strong> element.</p>
    <div>
      <span>This is an inline element</span> within a block-level element.
    </div>
    <img src="image.jpg" alt="Example Image">
  </body>
</html>

In the next lesson, we will dive deeper into HTML attributes and how they can modify the behavior of elements.