Block vs. Inline Elements
Block-Level Elements
- Take up the full width of their container.
- Start on a new line.
- Examples:
<div>,<p>,<h1>to<h6>,<section>
<div>This is a block element.</div>
<p>This is another block element.</p>
Inline Elements
- Occupy only as much width as needed.
- Do not start on a new line.
- Examples:
<span>,<a>,<strong>,<em>
<p>This is an <span>inline element</span> inside a paragraph.</p>
Semantic HTML5 Tags
Semantic elements provide meaning to content, improving readability and accessibility.
Structural Semantic Elements
<header>: Represents introductory content.<nav>: Contains navigation links.<main>: Encloses the primary content.<section>: Groups related content.<article>: Defines self-contained content.<aside>: Used for sidebar content.<footer>: Represents the footer of a webpage.
Example of a Semantic HTML Page Structure
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Title</h2>
<p>This is an example of an article.</p>
</article>
</main>
<aside>
<p>Related Content</p>
</aside>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Semantic HTML improves SEO and accessibility. Next, we’ll cover tables for data display.