HTML Additional Tags

1. Div (<div>)

The <div> tag is a generic block-level container that is used to group other elements and apply styles or scripts to them.

HTML Example:

<div class="container">
    <h2>Welcome to My Website</h2>
    <p>This is a section of content inside a div element.</p>
</div>

Copy

Explanation:

• <div> is often used to create layout sections or containers for styling purposes.

2. Span (<span>)

The <span> tag is a generic inline container used to group text or other inline elements. It is commonly used for styling or scripting.

HTML Example:

<p>This is a <span style="color: red;">red text</span> inside a paragraph.</p>

Copy

Explanation:

• <span> does not create a new block; it only affects the inline content within it.

3. Details (<details>)

The <details> tag is used to create a disclosure widget from which the user can obtain additional information or controls.

HTML Example:

<details>
    <summary>More Information</summary>
    <p>Here is some additional information that is revealed when the details are expanded.</p>
</details>

Copy

Explanation:

• <summary> inside <details> provides a heading or summary that can be clicked to expand or collapse the details.

4. Summary (<summary>)

The <summary> tag is used inside the <details> element to specify a summary or heading for the details. It is clickable and toggles the visibility of the content inside the <details> tag.

HTML Example:

<details>
    <summary>Frequently Asked Questions</summary>
    <p>Here you will find answers to frequently asked questions.</p>
</details>

Copy

Explanation:

• <summary> acts as the clickable heading for the <details> element, allowing users to expand or collapse the content.

5. Dialog (<dialog>)

The <dialog> tag represents a dialog box or other interactive component. It can be used for modals or pop-ups.

HTML Example:

<dialog id="myDialog">
    <h2>Dialog Title</h2>
    <p>This is a dialog box with some content.</p>
    <button onclick="document.getElementById('myDialog').close();">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal();">Open Dialog</button>

Copy

Explanation:

• <dialog> can be shown or hidden using JavaScript methods like show() or close().
• Use showModal() to display the dialog as a modal that disables the background content.