


Applying Semantic Structure with article, section, and aside in HTML
Jul 05, 2025 am 02:03 AMThe rational use of semantic tags in HTML can improve page structure clarity, accessibility and SEO effects. 1.<article> is used for independent content blocks, such as blog posts or comments, and must be self-contained; 2.
The rational use of semantic tags, such as <article></article>
, section>
and <aside></aside>
in HTML, can make the page structure clearer and more accessible, and also helps SEO. The key is to understand their respective uses and organize them according to the logical relationship of the content.

<article></article>
: Independent content block
<article></article>
is suitable for blocks of content that can exist independently, such as a blog post, forum post or news entry. It emphasizes "self-containment", which means that even if this part is taken out separately, others can understand its meaning.

For example:
<article> <h2>How to write semantic HTML</h2> <p>This article will introduce...</p> </article>
If you put multiple <article>
on a page, each should exist independently. Common usage scenarios include article list page, each comment in the comment area, etc.

suggestion:
- Don't wrap the entire page in one
<article>
. - If the content is nested (such as a comment under an article), you can use
<article>
in<article>
, but pay attention to the level of the layer being too deep.
: Blocks of content grouping
For example, if you make a product introduction page, you might write it like this:
<section> <h2>Product Features</h2> <p>This product has the following advantages...</p> </section> <section> <h2>User Reviews</h2> <p>Many users reported that...</p> </section>
Need to note:
-
should have a title, otherwise it might be more suitable to use <div>
. - It is not used for layout, don't abuse it for the sake of style.
<aside>
: Auxiliary information related to the main content
<aside>
means those parts that are related to the main content but are not the core. For example, the recommended reading, advertisement, author introduction, terminology explanation, etc. in the sidebar.
For example:
<aside> <h3>About the Author</h3> <p>This article was written by a front-end developer...</p> </aside>
Pay attention to when using:
- If the content has nothing to do with the current context, it is not suitable to be placed in
<aside>
. - It does not necessarily have to appear on the side of the page, and its position does not affect its semantics.
A few tips for comprehensive use
In actual development, these tags often appear together. For example, a typical blog post page might have a structure like this:
<article> <header> <h1>Article Title</h1> <p>Author: Zhang San</p> </header> <section> <h2>Body Content</h2> <p>This is the first paragraph of the article...</p> </section> <aside> <h3>Recommended reading</h3> <ul> <li><a href="#">Beginner of HTML Basics</a></li> <li><a href="#">CSS layout skills</a></li> </ul> </aside> </article>
Several practical suggestions:
- Tags such as
<header></header>
,<footer></footer>
,<nav></nav>
can also be used in conjunction with each other to enhance semantics. - Avoid repeatedly nesting too many layers of semantic labels and keep the structure simple.
- Use browser developer tools to see if the structure meets expectations, which is helpful for debugging.
Basically that's it. It is not complicated to use the right label, but it is easy to ignore details. Just remember that <article></article>
is independent content, <aside></aside>
is auxiliary information, and you can write a well-structured HTML page.
The above is the detailed content of Applying Semantic Structure with article, section, and aside in HTML. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

AgeneratorinPHPisamemory-efficientwaytoiterateoverlargedatasetsbyyieldingvaluesoneatatimeinsteadofreturningthemallatonce.1.Generatorsusetheyieldkeywordtoproducevaluesondemand,reducingmemoryusage.2.Theyareusefulforhandlingbigloops,readinglargefiles,or

The urlencode() function is used to encode strings into URL-safe formats, where non-alphanumeric characters (except -, _, and .) are replaced with a percent sign followed by a two-digit hexadecimal number. For example, spaces are converted to signs, exclamation marks are converted to!, and Chinese characters are converted to their UTF-8 encoding form. When using, only the parameter values ??should be encoded, not the entire URL, to avoid damaging the URL structure. For other parts of the URL, such as path segments, the rawurlencode() function should be used, which converts the space to . When processing array parameters, you can use http_build_query() to automatically encode, or manually call urlencode() on each value to ensure safe transfer of data. just

To prevent session hijacking in PHP, the following measures need to be taken: 1. Use HTTPS to encrypt the transmission and set session.cookie_secure=1 in php.ini; 2. Set the security cookie attributes, including httponly, secure and samesite; 3. Call session_regenerate_id(true) when the user logs in or permissions change to change to change the SessionID; 4. Limit the Session life cycle, reasonably configure gc_maxlifetime and record the user's activity time; 5. Prohibit exposing the SessionID to the URL, and set session.use_only

You can use substr() or mb_substr() to get the first N characters in PHP. The specific steps are as follows: 1. Use substr($string,0,N) to intercept the first N characters, which is suitable for ASCII characters and is simple and efficient; 2. When processing multi-byte characters (such as Chinese), mb_substr($string,0,N,'UTF-8'), and ensure that mbstring extension is enabled; 3. If the string contains HTML or whitespace characters, you should first use strip_tags() to remove the tags and trim() to clean the spaces, and then intercept them to ensure the results are clean.

There are two main ways to get the last N characters of a string in PHP: 1. Use the substr() function to intercept through the negative starting position, which is suitable for single-byte characters; 2. Use the mb_substr() function to support multilingual and UTF-8 encoding to avoid truncating non-English characters; 3. Optionally determine whether the string length is sufficient to handle boundary situations; 4. It is not recommended to use strrev() substr() combination method because it is not safe and inefficient for multi-byte characters.

In PHP, you can use square brackets or curly braces to obtain string specific index characters, but square brackets are recommended; the index starts from 0, and the access outside the range returns a null value and cannot be assigned a value; mb_substr is required to handle multi-byte characters. For example: $str="hello";echo$str[0]; output h; and Chinese characters such as mb_substr($str,1,1) need to obtain the correct result; in actual applications, the length of the string should be checked before looping, dynamic strings need to be verified for validity, and multilingual projects recommend using multi-byte security functions uniformly.

To set and get session variables in PHP, you must first always call session_start() at the top of the script to start the session. 1. When setting session variables, use $_SESSION hyperglobal array to assign values ??to specific keys, such as $_SESSION['username']='john_doe'; it can store strings, numbers, arrays and even objects, but avoid storing too much data to avoid affecting performance. 2. When obtaining session variables, you need to call session_start() first, and then access the $_SESSION array through the key, such as echo$_SESSION['username']; it is recommended to use isset() to check whether the variable exists to avoid errors

How to quickly create new emails in Outlook is as follows: 1. The desktop version uses the shortcut key Ctrl Shift M to directly pop up a new email window; 2. The web version can create new emails in one-click by creating a bookmark containing JavaScript (such as javascript:document.querySelector("divrole='button'").click()); 3. Use browser plug-ins (such as Vimium, CrxMouseGestures) to trigger the "New Mail" button; 4. Windows users can also select "New Mail" by right-clicking the Outlook icon of the taskbar
