Prev Next

HTML Elements

HTML elements are the fundamental units of a webpage. They define the structure, content, and presentation of the information displayed in a browser. Each element has an opening tag (e.g., <p>) and a closing tag (e.g., </p>), except for self-closing elements (like <img>), which do not wrap content.

Key Topics

Common HTML Elements

Here are some commonly used HTML elements, along with their complete usage examples. For single element code snippets, the code will be displayed simply as a pre block. For comprehensive multi-line code demonstrations, a copy code button and box will be provided for convenience.

  • <p></p>: Defines a paragraph. 
    <p>This is a paragraph of text.</p>
  • <a></a>: Creates a hyperlink. 
    <a href="https://www.example.com">Visit Example</a>
  • <img>: Embeds an image (self-closing). 
    <img src="image.jpg" alt="A descriptive text">
  • <div></div>: Defines a block-level container. 
    <div>This is a division (block) element.</div>
  • <h1> to <h6>: Define headings from largest (<h1>) to smallest (<h6>). 
    <h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

Basic Page Structure Example

Below is a simple HTML page structure demonstrating how these elements might be combined. Since this is a full HTML code demonstration, it will be enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML Structure</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph with some text.</p>
    <a href="https://example.com">Click here to visit an example site</a>
    <img src="image.jpg" alt="Sample Image">
    <div>
        <h2>A Subsection</h2>
        <p>This is a paragraph inside a division element.</p>
    </div>
</body>
</html>

Explanation: The example above illustrates the general structure of an HTML5 document. It includes a heading, a paragraph, a link, an image, and a subsection. Notice the use of semantic tags like <h1> and <h2> for headings, and how the content is structured inside the <body>.

Output:

This is a Heading (displayed as a large, bold heading)
This is a paragraph with some text. (displayed as a block of text)
Click here to visit an example site (displayed as a clickable link)
[Sample Image displayed here: alt text "Sample Image"]
A Subsection (displayed as a smaller heading)
This is a paragraph inside a division element. (displayed as another block of text)

More Complex Example: Tables

HTML also provides elements to create structured data representations, like tables. Since this is also a multi-line code demonstration, it will be displayed with a copy code box.

  • <table></table>: Defines a table.
  • <tr></tr>: Defines a table row.
  • <th></th>: Defines a header cell within a row.
  • <td></td>: Defines a standard cell within a row.
<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

Explanation: The table above shows how to structure tabular data in HTML. The <th> elements are used for headers, and <td> for data cells. This allows for clearer, more organized presentation of information.

Output:

Name    Age
Alice   30
Bob     25

Key Takeaways

  • Always include a doctype declaration (<!DOCTYPE html>) for modern HTML5 documents.
  • Use semantic elements (e.g., <header>, <footer>, <section>) to structure content logically.
  • Apply proper nesting and closing of tags to ensure valid HTML.
  • Use attributes like alt for images, href for anchors, and src for images to provide additional context.
  • Keep your HTML clean and well-indented to improve readability and maintainability.
Prev Next