HTML Section 5

Inline vs Block Elements

These are terms used to classify elements based on how they are displayed. For example, heading and paragraph elements take up the full width and appear on their own line—these are called block elements. In contrast, anchor and image tags do not break the flow and appear within a line—these are called inline elements.

Example of Block Elements

Another Block Element

This is a paragraph (block)

This is a link (inline)

Spans and Divs

Both <div> and <span> are container elements.

• Div:

  A div is a block-level container used to group content and apply styles to them as a unit.

• Span:

  A span is an inline container with similar use to div, but it does not start on a new line.

Some Quick Elements

hr

Creates a horizontal line and does not have a closing tag.

br

Breaks the line and moves the content to the next line.

sup / sub

Superscript: 2^nd
Subscript: H₂O

HTML Entities

Entities are used to display reserved or special characters in HTML. They begin with & and end with ;.

List of HTML Entities

Example: ©

Semantic Markup

Semantic elements describe the meaning or purpose of the content, making the code more readable and accessible. The following tags are like <div> but have specific roles:

• <main>

  Defines the main content of the document.

• <nav>

  Used for navigation menus or links.

• <section>

  Groups related content; preferred over generic <div> in many cases.

• <article>

  Used for self-contained content like blog posts or news articles.

• <aside>

  Contains content that is tangentially related to the main content (e.g., sidebars).

• <header>

  Represents the introductory content or navigation links.

• <footer>

  Defines the footer of a section or the entire page.

• <time>

  Used to represent dates and times.

• <figure> and <figcaption>

  figcaption is used inside figure to provide a caption for an image or diagram.