HTML Elements – Part 4

HTML elements are the building blocks of HTML documents. They define the structure and content of a webpage. Here is a list of some fundamental HTML elements along with examples and explanations for each.

1. Headings

html

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

Explanation:

• <h1> to <h6>: Define headings, with <h1> being the highest (most important) level and <h6> the lowest.

2. Paragraphs

html

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

Explanation:

• <p>: Defines a paragraph.

3. Links

html

<a href="https://www.example.com">This is a link</a>

Explanation:

• <a href="URL">: Defines a hyperlink.

4. Images

html

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

Explanation:

• <img src="URL" alt="description">: Embeds an image in the page. The alt attribute provides alternative text for screen readers and when the image cannot be displayed.

5. Lists

Unordered List:

html

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

Ordered List:

html

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

Explanation:

• <ul>: Defines an unordered list (bulleted).
• <ol>: Defines an ordered list (numbered).
• <li>: Defines a list item.

6. Tables

html

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Explanation:

• <table>: Defines a table.
• <tr>: Defines a table row.
• <th>: Defines a table header cell.
• <td>: Defines a table data cell.

7. Forms

html

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

Explanation:

• <form action="URL" method="post">: Defines a form that sends data to the specified URL using the POST method.
• <label for="id">: Defines a label for an input element.
• <input type="text" id="id" name="name">: Creates a text input field.
• <input type="email" id="id" name="email">: Creates an email input field.
• <input type="submit" value="Submit">: Creates a submit button.

8. Divisions and Spans

html

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

Explanation:

• <div>: Defines a division or section in an HTML document (block-level).
• <span>: Defines a span of text (inline).

9. Semantic Elements

html

<header>
    <h1>My Website</h1>
</header>
<nav>
    <a href="/home">Home</a>
    <a href="/about">About</a>
</nav>
<main>
    <article>
        <h2>Article Title</h2>
        <p>This is an article.</p>
    </article>
    <section>
        <h3>Section Title</h3>
        <p>This is a section.</p>
    </section>
</main>
<footer>
    <p>Footer content here.</p>
</footer>

Explanation:

• <header>: Defines a header for a document or section.
• <nav>: Defines a set of navigation links.
• <main>: Defines the main content of a document.
• <article>: Defines an independent, self-contained content.
• <section>: Defines a section in a document.
• <footer>: Defines a footer for a document or section.

10. Buttons

html

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

Explanation:

• <button type="button">: Defines a clickable button.
• onclick="alert('Button clicked!')": Adds a JavaScript action to be performed when the button is clicked.

These elements form the core of HTML and are essential for creating structured, accessible, and interactive web pages.