刺激一区仑乱,国产a级毛片

Table of Contents

: The header of a page or block

: main content area of ??the page

and

: Organize content blocks

Home

Web Front-end

HTML Tutorial

What are some common semantic HTML elements (e.g., , , , , , , )?

Emily Anne Brown

Jun 21, 2025 am 12:59 AM

html element Semantic HTML

Using semantic HTML elements not only improves code readability, but also enhances structural clarity, accessibility and SEO effects. 1. <header> is used for the header of a page or block, often containing a title, navigation or logo; 2. <nav> wraps the main navigation link, such as the top menu or sidebar; 3. <main> defines the unique main content area of ??the page and cannot be nested in other semantic tags; 4. <section> organizes content blocks with titles, and <article> represents independent content units, such as blogs or product cards; 5. <footer> place footer information, such as copyright notice or related links. Using these tags rationally can help build a clear-cut and easy-to-understand web page.

Semantic HTML elements in web pages are not just for writing good code, but for making the structure clearer and more accessible, and search engines can also make the page content easier. The following elements are the most common semantic tags, each with its specific purpose.

<header></header> : The header of a page or block

<header></header> is usually placed at the top of the page to contain titles, navigation bars, logos, or introductory content. It doesn't have to be the head of the entire page, it can also be the beginning of a section.

Note: A page can have multiple <header> as long as they belong to different content blocks.

<nav> : Main navigation area

As the name suggests, <nav> is specially used to wrap the main navigation link. For example, the menu at the top of the website, the link list in the sidebar, etc.

But not all links need to be packaged in <nav> . For example, auxiliary navigation such as "Previous article" and "Next article" at the end of the article is generally unnecessary.

<main> : main content area of ??the page

The <main> tag is used to identify the main content part of the page. This part of the content should be unique and does not include repeated navigation, footer, etc.

A page can only have one <main> , and it should not be nested in <article> , <aside> , <footer> , <header> , or <nav> .

<section> and <article> : Organize content blocks

These two tags are often used together, depending on what type of content you are expressing.

<footer> : The bottom information of a page or block

Similar to <header> , <footer> is used to place footer content, such as copyright information, contact information, related links, etc. Similarly, a page can have multiple <footer> , corresponding to different blocks.

Basically that's it. The rational use of these semantic tags not only improves code readability, but also contributes to SEO and barrier-free access. Although it doesn't seem complicated, it is easy to ignore details in actual projects, such as misuse of tags or excessive nesting, so you still need to pay more attention.

The above is the detailed content of What are some common semantic HTML elements (e.g., , , , , , , )?. For more information, please follow other related articles on the PHP Chinese website!