IDs, Classes, and Block vs. Inline

1. The id Attribute

The id attribute is used to provide a unique identifier to a specific HTML element.

• Uniqueness Rule: An id must be unique within the entire HTML document. No two elements on the same page can share the same id.
• Purpose:
  • CSS: To apply styles that target only that single element (e.g., #main-header).
  • JavaScript: To quickly find and manipulate a specific element (e.g., document.getElementById('myButton')).
  • Links: To create anchors for linking to a specific section on the same page (e.g., <a href="#section-2">).

<header id="main-header">
    <h1>Welcome</h1>
</header>

<div id="footer-copyright">
    </div>

2. The class Attribute

The class attribute is used to group multiple elements for the purpose of styling or general behavior.

• Reusability Rule: A class can be reused on any number of elements within the same HTML document.
• Purpose: Primarily used by CSS to apply a common set of styles to many different elements (e.g., .highlight, .button-primary).
• Multiple Classes: An element can have multiple classes by separating the class names with a space.

<article class="card featured">
    <h2>Featured Article</h2>
</article>

<div class="card">
    <p>A standard news card.</p>
</div>

<button class="button-primary checkout">
    Proceed to Checkout
</button>

3. Block-Level vs. Inline-Level Elements

HTML elements fall into two main categories based on how they behave and interact with surrounding content. This is a fundamental concept for understanding CSS layouts.

A. Block-Level Elements

Block-level elements always start on a new line and naturally take up the full available width of their parent container, pushing other elements below them.

• They can contain both inline and other block elements.
• You can set their height, width, margins, and padding on all four sides (top, right, bottom, left).

B. Inline-Level Elements

Inline-level elements do not start on a new line. They only take up the width required by their content, allowing other inline elements to flow immediately next to them on the same line.

• They can only contain data and other inline elements (not block elements).
• You cannot set the width or height on them, and they only accept horizontal margins/padding (left and right), ignoring vertical margins/padding (top and bottom).

4. Inline-Block (Bridge)

The display: inline-block CSS property is often used to give an inline element the ability to accept width and height properties, while still allowing other elements to flow next to it. This is a common technique for structuring navigation menus.