Div, Section, Header, Footer

These elements are considered block elements. They occupy the entire width of their parent container and typically start on a new line.

• div: A generic container element used for grouping and styling content. It is often used to define sections or areas within a page.
• section: Represents a thematic grouping of content, often used for articles, chapters, or other distinct sections within a document.
• header: Typically contains introductory content for a page or section, such as a logo, navigation menu, or page title.
• footer: Usually contains information about the page or website, such as copyright notices, contact details, or links to other pages.

Span, A, Q, Strong

These elements are considered inline elements. They occupy only the space required by their content and do not start on a new line.

• span: A generic inline element used for grouping and styling text. It is often used to apply styles to specific words or phrases within a paragraph.
• a: Used for creating links to other web pages or resources. The text within an <a> element will be styled as a hyperlink.
• q: Represents quoted text. It is typically used to indicate direct quotations from another source.
• strong: Indicates strong emphasis on the enclosed text. It is visually represented by bold text.

Code Examples:

<div class="container">
  <header>
    <h1>My Website</h1>
  </header>
  <section>
    <p>Welcome to my website.</p>
    <span class="highlight">This text is highlighted.</span>
    <a href="https://www.example.com">Visit Example.com</a>
  </section>
  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</div>

Summary:

• Block elements take up the full width of their container and start on a new line.
• Inline elements occupy only the space required by their content and flow within the line of text.
• Understanding the differences between block and inline elements is crucial for structuring web pages effectively.
• Div, section, header, and footer are examples of block elements, while span, a, q, and strong are examples of inline elements.