IT Course HTML Basics 016_Semantic Elements

Semantic Elements

HTML5 introduces many semantic elements whose purpose is to improve the semantics of document structure, making documents more readable, maintainable, and friendlier for both search engines and developers.

A page structure typically includes: header, footer, title, navigation, content, sidebar, etc.

Designing Page Layout Using `<div>` Elements:

Example effect

[!Summary]
Not conducive for developers to write code. When you face a screen full of <div> elements, it’s difficult to quickly distinguish their meanings.
Not conducive for SEO (Search Engine Optimization). The browser only knows you used <div> elements, and the div element itself has no meaning - it’s just a container.

Designing Page Layout Using Semantic Elements:

Example effect

Using <header> <nav> <main> <aside> <footer> to represent different areas of the page. These tags give the page good semantics and structure, making it easy for both developers and browsers to quickly understand the web content.

Element	Purpose
`<header>`	Used to define the header area of a page, typically including website logo, main navigation, site-wide links, and search box.
`<nav>`	Used to define the navigation links section of a page.
`<main>`	Used to define the main content or primary functionality of a page. This content should be unique to the page.
`<aside>`	Used to define sidebar content of a page. This content is related to the main content but optional.
`<footer>`	Used to define the footer area of a page, typically including copyright information, contact information, and other related information.
`<article>`	Used to define independent articles, documents, pages, applications, or other content areas.
`<section>`	Used to define a generic independent section in a webpage, usually containing a heading or paragraph/block.
`<figure>`	Used to define independent images, charts, photos, and other content.
`<figcaption>`	Used to provide a title or description for `<figure>` elements.

Example:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>My Webpage</title>
5
</head>
6
<body>
7
  <header>
8
    <h1>My Webpage</h1>
9
  </header>
10

11
  <nav>
12
    <ul>
13
      <li><a href="#">Home</a></li>
14
      <li><a href="#">About Me</a></li>
15
      <li><a href="#">Contact Me</a></li>
16
    </ul>
17
  </nav>
18

19
  <main>
20
    <article>
21
      <h2>My Introduction</h2>
22
      <p>My name is XXX, this is an example of semantic elements.</p>
23
    </article>
24
  </main>
25

26
  <aside>
27
    <h2>Related Links</h2>
28
    <ul>
29
      <li><a href="#">My Blog</a></li>
30
      <li><a href="#">My GitHub Page</a></li>
31
    </ul>
32
  </aside>
33

34
  <footer>
35
    <p>Copyright 2023 XXX</p>
36
  </footer>
37
</body>
38
</html>

Effect:

Example effect

This example contains a webpage that uses HTML5 semantic elements to describe the meaning of web content.

The <header> element defines the header area of the page, containing the website logo and main navigation.
The <nav> element defines the navigation links section of the page.
The <main> element defines the main content of the page, containing my introduction article.
The <aside> element defines the sidebar content of the page, containing related links.
The <footer> element defines the footer area of the page, containing copyright information.

[!Summary]
Search engines can better understand web content, improving the page’s ranking in search results.
Can help people with disabilities more easily understand web content, improving web accessibility.
Can help developers better organize webpage structure, improving web maintainability.

Link: Bird Watching Website (roy-tian.github.io)

Semantic Elements

Designing Page Layout Using <div> Elements:

Designing Page Layout Using Semantic Elements:

Comments

Designing Page Layout Using `<div>` Elements: