What are HTML Elements? 🏗️

• HTML elements are the building blocks of web pages. They define the structure and content of a web page.

Two Main Types of Elements: 🔲✏️

• Block Elements: Create larger sections or blocks of content.

• Inline Elements: Format small pieces of content within a block.

1. Block Elements

What are Block Elements? 📋

• Block elements are elements that start on a new line and take up the full width available (by default).

• They create distinct sections on the page, such as paragraphs, divs, and headers

Common Block Elements:

• <div>: A generic container for content.

• <p>: Represents a paragraph.

• <h1>, <h2>, <h3>, etc.: Headings that range from the most important (<h1>) to the least important (<h6>).

• <ul>, <ol>: Unordered and ordered lists.

• <section>: Defines a section in a document.

• <article>: Represents an independent piece of content.

Example:

<div>
    <h1>Welcome to Our Website</h1>
    <p>This is a paragraph within a block element.</p>
    <section>
      <h2>About Us</h2>
      <p>We are a company that values innovation.</p>
    </section>
</div> 

Characteristics of Block Elements: 📏

• Start on a new line.

• Take up the full width available.

• Can contain other block and inline elements.

2. Inline Elements

What are Inline Elements? 🖋️

• Inline elements do not start on a new line. They only take up as much width as necessary.

• They are typically used to style or format small portions of content within a block element.

Common Inline Elements:

• <span>: A generic container for inline content.

• <a>: Defines a hyperlink.

• <strong>: Makes text bold (semantically strong).

• <em>: Emphasizes text (italic by default).

• <img>: Embeds an image.

• <br>: Inserts a line break.

Example:

<p>
  This is a paragraph with an
  <strong>inline element</strong>
  to make this text bold. Visit our
  <a href="https://example.com">website</a>
  for more information.
</p>

Characteristics of Inline Elements:

• Do not start on a new line; they appear within the flow of the text.

• Only take up as much width as necessary.

• Can contain other inline elements but not block elements.

Differences Between Block and Inline Elements

Display

• Block Elements: Starts on a new line. 📏
• Inline Elements: Stays within the same line. 📝

Width

• Block Elements: Takes up the full width available. 🌐
• Inline Elements: Takes up only as much width as needed. 🌟

Containment

• Block Elements: Can contain both block and inline elements. 🔲🖋️
• Inline Elements: Can only contain other inline elements. ✏️

Examples

• Block Elements: <div>, <p>, <h1>, <section>
• Inline Elements: <span>, <a>, <strong>, <img>