Semantics is the study of the meaning of words and phrases in language. Semantic element = element that has meaning. The semantic element clearly describes what it means to browsers and developers. Examples of non-semantic elements ：<div>和<span>- nothing is known about their content. Examples of semantic elements: <form>, <table> and <article> - clearly define their content. All modern browsers support HTML5 semantic elements.
Many websites contain HTML code such as ：<div id =nav> <div class =header> <div id =footer> to indicate navigation, headers and footers. HTML5 provides new semantic elements to define different parts of a web page:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>HTML5 <section> element
The <section> element defines a section of a document. According to the W3C's HTML5 documentation: A section is a thematic grouping of content, usually with a title. Home pages can usually be divided into several sections for introduction, content, and contact information.
<!DOCTYPE html> <html> <body> <section> <h1>Java</h1> <p>Java is a widely used computer programming language with cross-platform, object-oriented, and generic programming features. Applied to enterprise-level web application development and mobile application development. </p> </section> <section> <h1>PHP</h1> <p>PHP (full name: PHP: Hypertext Preprocessor, namely PHP: Hypertext Preprocessor) is an open source general-purpose computer scripting language. Especially suitable for web development and can be embedded in HTML. </p> </section> </body> </html>HTML5 <article> element
The <article> element specifies independent included content. An article should make sense on its own and should be readable independently from the rest of the website. Examples of where the <article> element can be used:
<!DOCTYPE html> <html> <body> <article> <h1>Java</h1> <p>Java is a widely used computer programming language with cross-platform, object-oriented, and generic programming features. Applied to enterprise-level web application development and mobile application development. </p> </article> </body> </html>HTML5 <header> element
The <header> element specifies a file or section header. The <header> element should be used as a container for introductory content. You can include multiple elements in a <header>. The following example defines the title of the article:
<!DOCTYPE html> <html> <body> <article> <header> <h1>Java</h1> <p>What is Java:</p> </header> <p>Java is a widely used A computer programming language with cross-platform, object-oriented, and generic programming features, and is widely used in enterprise-level web application development and mobile application development. </p> </article> </body> </html>HTML5 <footer> element
The <footer> element specifies a file or partial footer. The <footer> element should contain information about its containing unit. The footer usually contains the document's author, copyright information, a link to the terms of use, contact information, etc. You can have multiple elements within a <footer>.
<!DOCTYPE html> <html> <body> <footer> <p>Copyright</p> <p>Contact information: <a href=mailto:[email protected]> [email protected]</a> .</p> </footer> </body> </html>HTML5 <nav> element
The <nav> element defines a set of navigation links.
<!DOCTYPE html> <html> <body> <nav> <a href=#>Java</a> | <a href=#>CSS</a> | <a href=#>HTML</a> | <a href=#>jQuery</a> </nav> </body> </html>HTML5 <aside> element
The <aside> element defines some content from the content it is placed on (such as a sidebar). <aside> content should be the surrounding content.
<!DOCTYPE html> <html> <body> <p>Java is a widely used computer programming language with cross-platform, object-oriented, and generic programming features. It is widely used in enterprise-level web application development and mobile application development. . </p> <aside> <h4>PHP</h4> <p>PHP is the best language in the world. </p> </aside> </body> </html>Summarize
The above is the HTML5 semantic elements introduced by the editor. Have you really used them correctly? I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!