search
HomeWeb Front-endFront-end Q&ALet's talk about the semantic understanding of one of the major features of HTML5

This article brings you relevant knowledge about semantics in HTML. The so-called semantics means that you can experience the humanized structure with HTML itself. I hope it will be helpful to everyone.

Let's talk about the semantic understanding of one of the major features of HTML5

Before talking about what semantics is, let’s take a look at the background of semantics.

As mentioned in the previous article, the most important feature of HTML is tags. But the project is large, and there are so many labels that I can’t understand them. They are piled on top of each other. Some of the names were weird, and those who wanted to maintain them were persuaded to leave, and teamwork led to the start of team battles!

So semantics is urgent!

What is semantics

It actually doesn’t matter when we write HTML, because users can’t see what you look like inside, and they don’t need to see it.

Because you have the beautiful clothes of CSS, even if your HTML is a mess, CSS can make it shine.

But users can’t see it, developers can! Therefore, the friendliest of this semantics are the developers themselves.

The so-called semantic means that you can experience the humanized structure with HTML itself!

Benefits of semantics

  • Even without CSS, the page can also present a good content structure and code structure. In this way, developers can understand your intentions at a glance and break the ice in a second!

  • SEO friendly. If it is friendly to developers, it will also be friendly to developer bugs!

    When tags are applied properly and reflect the weight of your desired keywords in context, then search engine crawlers are on your side. Then the website traffic will come, right?

  • Can support some special devices (blind reading, mobile devices), web page translation, etc.

  • The most intuitive point is that your teammates want to cooperate with you! Your teammates love the semantics of your code!

    Semantic is more readable, and teams that follow W3C standards all follow this standard, which can reduce differentiation. (Job-hopping and quick integration?)

Semantic thinking at work

  • Don’t use some pure style tags, these CSS will help us do it . Such as: b, font, u and other tags.

  • Text that needs to be emphasized can be included in the strong or em tag (the default style of strong is bold (do not use b), and em is italic (do not use i). Use the mark tag To represent marked/highlighted text.

    But you can still consider using CSS to complete it.

  • The description text corresponding to each input label needs to use the label label , and associate the description text with the corresponding input by setting the id attribute for the input and setting for=someld in the lable tag.

  • The form field should be wrapped with the fieldset tag. And use the legend tag to describe the purpose of the form.

  • <h1> - <h6></h6> </h1> should be used to indicate the title.

  • When writing styles with CSS, naming also needs to follow the structure of HTML, reflecting the essence of semantics.

Semantic tags

1,<header></header> Tags define the header of the document

Usually contains the main and subtitles of the page.

<header>
<h1 id="他真的是美男子吗">他真的是美男子吗?</h1>
<p>据现场勘查,他真的是美男子!</p>
</header>

2, <footer></footer>Tag defines the document or section footer

The footer usually contains the document's author, copyright information, terms of use link, contact information, etc.

You can use multiple<footer in one document> element. </footer>

<footer>
  <p>Posted by: 美男子</p></footer>

3. <main></main> tag specifies the main content of the document.

<main></main> element The content should be unique to the document.

It should not contain content that appears repeatedly in the document, such as sidebars, navigation bars, copyright information, site logos, or search forms.

In one document, multiple <main></main> elements cannot appear. <main></main>The element cannot be a descendant of the following elements: <article> </article>, <aside></aside>, <footer></footer>, <header></header> or <nav></nav>.

<main>
  <h1 id="我的介绍">我的介绍</h1>
  <p>我是一个聪明的孩子</p></main>

4, <section></section> Tags define sections in the document.

Such as chapters, headers, footers, or other sections in the document.

<section>
  <h1 id="PRC">PRC</h1>
  <p>The People's Republic of China was born in 1949...</p></section>

5, <article></article> Tags specify independent self-contained content

such as comments under articles

<article>
   <h1 id="我为什么聪明呢">我为什么聪明呢</h1>
   <p>我聪明的秘诀是我爱思考</p></article>

6, <aside></aside> The tag defines content outside of the content within which it appears.

is used to load non-text content. Such as ads, groups of links, sidebars, etc.

<p>聪明的研究</p><aside>
  <h1 id="我为什么聪明呢">我为什么聪明呢</h1>
  <p>我聪明的秘诀是我爱思考</p></aside>

7, <nav></nav> elements represent the navigation link area of ​​the page.

is used to define the main navigation part of the page.

<nav>
<ul>
<li><a>百度</a></li>
<li><a>归子莫</a></li>
</ul>
</nav>

A semantic template

Let’s look at a picture first.

Lets talk about the semantic understanding of one of the major features of HTML5

It seems that a neat HTML structure is very clear.

Summary

Some friends will definitely ask, that code is usually written using frameworks, and you basically don’t need to use these. It’s not to write personal websites or official websites, but to write some business. H5 or background management.

In fact, for personal websites or official websites, semantics has practical value. Moreover, this has also been a frequently asked question in interviews in recent years. The most important thing is to learn the meaning of semantics. Achieve code semantics, including naming functions, naming components, and splitting component business functions. Always on the road!

Recommended tutorial: "html video tutorial"

The above is the detailed content of Let's talk about the semantic understanding of one of the major features of HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete
CSS: Can I use multiple IDs in the same DOM?CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

The Aims of HTML5: Creating a More Powerful and Accessible WebThe Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl

Significant Goals of HTML5: Enhancing Web Development and User ExperienceSignificant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

HTML5: Is it secure?HTML5: Is it secure?May 14, 2025 am 12:15 AM

HTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess

HTML5 goals in comparison with older HTML versionsHTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS: Is it bad to use ID selector?CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Article

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor