HTML5 semantic elements

Semantics = meaning.

Semantic elements = meaning of elements.

What is semantics Element?

#A semantic element can clearly describe its meaning to browsers and developers.

No semanticsElement examples:

and - no need to consider content.

Semantic element examples:

, , and - clearly defines its content.

Browser support

Semantic elements are supported in Internet Explorer 9+, Firefox, Chrome, Safari and Opera.

Note: This element is not supported in Internet Explorer 8 and earlier. However, compatible workarounds are provided at the bottom of the article.

New semantics in HTML5 Element

Many existing websites contain the following HTML code:

#HTML5

Element

The

element describes the header area of the document

The

element is used to define the introductory display area of the content.

You can use multiple

elements.

The following example defines the header of the article:

    php中文网(php.cn) 
    Internet Explorer 9
 
 
  Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的

pubdate indicates that the date/time in the element is the document (or most recent Release date of the senior

element)

Run the program and try it

##HTML5

element

tag defines navigation link part. The

element is used to define the navigation link area of the page. However, not all links need to be included in the

element!

Example

    php中文网(php.cn) 
   HTML | CSS | JavaScript | jQuery

Run the program and try it

HTML5

element
##

tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.

According to W3C HTML5 documentation: section contains a set of content and its title.

Example

    php中文网(php.cn) 
   WWF
 世界自然基金会(WWF)是一个国际组织致力于保护问题,研究和恢复环境,前身世界野生动物基金。世界自然基金会成立于1961年。
 
  WWF's Panda symbol
 熊猫已经成为世界自然基金会的象征。著名的熊猫世界自然基金会的标志来自一个名为痴痴的熊猫,从北京动物园的伦敦动物园同年世界自然基金会的建立。

Run the program and try it

HTML5

Element

tag defines independent content. .

Element usage examples:

Forum post (Forum post)
Blog post (Blog)
News story
Comment

Example

    php中文网(php.cn) 
   Internet Explorer 9
  Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。

Run the program and try it

HTML5 < aside> element

tag defines content outside the main area of the page (such as a sidebar).

The content of the aside tag should be related to the content of the main area.

Example

    php中文网(php.cn) 
  我很喜欢在php中文网(php.cn)学习HTML知识
  php中文网(php.cn)
 php中文网(php.cn)有很多的PHP和HTML教程

Run the program to try it

HTML5

Continuing Learning

new file

php中文网(php.cn)

黄山：世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，
全国文明风景旅游区示范点，中华十大名山，天下第一奇山。黄山位于安徽省南部黄山市境内

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

HTML5 semantic elements

IntermediateFront-end Vue3 actual combat [handwritten vue project]

ElementaryAPIPOST tutorial [Popularization of technical concepts related to network communication]

IntermediateIssue 22_Comprehensive actual combat

ElementaryIssue 22_PHP Programming

ElementaryIssue 22_Front-end development

IntermediateBig data (MySQL) video tutorial full version

ElementaryGo language tutorial-full of practical information and no nonsense

ElementaryGO Language Core Programming Course

IntermediateJS advanced and BootStrap learning

IntermediateSQL optimization and troubleshooting (MySQL version)

IntermediateRedis+MySQL database interview tutorial

ElementaryDeliver food or learn programming?