Core HTML Elements

HTML Elements vs. Tags

Difference Between Elements & Tags

• HTML Tags: Enclosed in angle brackets, e.g., <p>, <h1>.
• HTML Elements: Include opening and closing tags along with content, e.g., <p>This is a paragraph.</p>.

Nested & Self-Closing Tags

• Nested Elements: Elements inside another element. <div> <p>Nested Paragraph</p> </div>
• Self-Closing Tags: Do not require a closing tag. <img src="image.jpg" alt="Example Image">

HTML Attributes

Attributes provide additional information to elements.

Common Global Attributes

• id: Unique identifier.
• class: Groups elements for styling.
• style: Inline CSS styling. <p id="intro" class="text-large" style="color: blue;">Styled Text</p>

Data Attributes

• Custom attributes starting with data-. <button data-role="admin">Click Me</button>

Text Formatting

Headings

<h1>Main Title</h1>
<h2>Subheading</h2>

Paragraphs & Line Breaks

<p>This is a paragraph.</p>
<p>New line<br>break.</p>

Formatting Tags

<strong>Bold Text</strong>
<em>Italicized Text</em>
<u>Underlined Text</u>
<mark>Highlighted Text</mark>

Lists in HTML

Ordered & Unordered Lists

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Description Lists

<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
</dl>

This article explains core HTML elements. Next, we’ll cover links and media.