Forum digitalis

1.7 Structure and layout

<div> and <span>

<div> is a block-level element that wraps entire sections, whereas <span> is an inline element that groups smaller parts of text or elements within a paragraph. Both are mainly used for structuring content and styling purposes.

Semantic Tags

Semantic HTML tags clarify the role of a content section. Examples include:

Semantics improves readability for developers, enhances search engine optimization (SEO), and supports screen readers for accessibility. It ensures that content and layout are clearly separated.

Example

The following example demonstrates a simple semantic structure of a webpage.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Structure & Layout</title> </head> <body> <header> <h1>My Website</h1> </header> <nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> </nav> <main> <section id="section1"> <h2>Section 1</h2> <p>Content of Section 1.</p> </section> <article id="section2"> <h2>Article</h2> <p>This is a standalone article.</p> </article> </main> <footer> <p>© 2026 My Website</p> </footer> </body> </html>

<div> and <span>

Semantic tags

Example