section label
  <section> label , Define the sections in the document . Like chapters 、 header 、 Footers or other parts of a document . It's usually used for content in sections , Will start a new section in the document stream . It's used to represent common document content or application blocks , Usually consists of content and its title . but section An element tag is not an ordinary container element , It represents a piece of thematic content , Usually with a title .

article label
  <article> It's a special one section label , It is better than section It has more explicit semantics , It represents an independent 、 Complete related content block , Can be used independently of other content on the page . For example, a full forum post , A blog post , A user comment and so on . Generally speaking ,article There will be a title section ( Usually included in header Inside ), Sometimes it includes footer.article Can be nested , The inner layer of the article For the outer layer article Labels have affiliation . for example , A blog post , It can be used article Show , Then some comments can be made in the form of article Embedded in it in the form of .

nav label
   nav The tag represents a part of the page , It's a link group that can be used as page navigation , The navigation elements are linked to other pages or other parts of the current page , send html Code is more precise in terms of semantics , At the same time, the support for screen readers and other devices is also better .

aside label
   aside Tags are used to load non text content , It's seen as a separate part of the page . The content it contains is separate from the main content of the page , Can be deleted , Without affecting the content of the page 、 The message of a chapter or page . Such as advertising , Groups of links , Sidebar, etc .

header label
  <header> The tag defines the header of the document , Usually some guidance and navigation information . It's not just written in the head of the page , It can also be written in the content of the web page . Usually <header> The label contains at least ( But not limited to ) A title tag (<h1>-<h6>), It can also include <hgroup> label , You can also include table content 、 identification 、 Search form 、<nav> Navigation etc. .

footer label
   footer Tag definition section or document The footer of , Contains information related to the page 、 Information about the article or part of the content , For example, the author or date of the article . As the page's footers , It generally includes copyright 、 Related documents and links . It and <header> Tag usage is basically the same , It can be used multiple times in one page , If you add after a section footer, So it's equivalent to the section's footers .

hgroup label
   hgroup Tags are on pages or sections section The title element of (h1-h6) Are combined . for example , In a section you have continuous h The label elements of the series , You can use hgroup Wrap them up

figure label
   Used to combine elements . It is mainly used for the combination of picture and picture description .

audio label

Tags define sounds , Like music or other audio streams

video label

Tag definition video , Like movie clips or other video streams

time label

The label defines the date or time , Or both

source  label

For media elements ( such as <video> and <audio>) Define media resources


Process label , have access to <progress> Tag to show JavaScript Time consuming functions in the process


Labels define graphics , Like charts and other images . This HTML The element is designed for vector graphics on the client side . It has no behavior of its own , But a drawing API Show it to the client JavaScript So that the script can draw everything it wants on a canvas

HTML5 More articles about new tags

  1. Box model , Location Technology , Negative margin ,html5 New label

    Box model /*[margin Margin ] margin Up to four attributes 1. Just write one value , In four directions margin It's all this value 2. Write two values : On , Right two directions , By default = On , Right Default = Left 3. Write three values : On . Right . Next three ...

  2. html5 New label / Remove the label

    gossip : Xiaoying's work is a little easier recently , If you have nothing to do, just look at MOOCS , Have a look :HTML5 The elements and tag structure of , There is a brief explanation of HTML5 Some new features of , Xiaoying hasn't written before HTML5 The page of , So it's like taking notes to sort out the new features , Yefang ...

  3. solve ie9 The following browser pairs html5 New tags are not recognized , And lead to CSS Problems that don't work html5shiv.js and respond.min.js Do common things on the page , Save time when you write here ...

  4. Let old browsers support HTML5 New label

    First we use JS Create tags , by HTML File creation we need these several HTML5 label . Next , We need to use CSS Do these HTML5 Label style control , This is because , New tags created in this way , The default is inline elements .   ...

  5. HTML5 New label and specific usage

    html5 Since the popularization , Quickly supported by major browsers . use html5 Web design has gradually become the fashion of web design . Now let's review html5 New label of . HTML 5 New features in include embedded audio . Video and graphics capabilities , Number of clients ...

  6. HTML5 Summary and explanation of new labels

    Take advantage of a little leisure time , hold HTML5 I've sorted out the new labels of , In the form of a table , The usage and attribute analysis of each tag are summarized respectively . This is convenient for you to use in the future HTML5 When the mark is in doubt , It's clear from a direct comparison , I hope it can help you . ...

  7. Second articles 、HTML5 New label

    <html> <head> <meta charset="UTF-8"> <title>html5 New tags </title&g ...

  8. html5 New label compatibility

    Many low version browsers don't know html5 The new label is , So in order to solve the problem of browser compatibility , There are two main methods : js We can create our own custom tags , for example , We can use js sentence  document.createElement(' ...

  9. CSS3 Review and summarize the main knowledge points +HTML5 New label

    Folder : 1.CSS Attribute writing order 2.CSS3 attribute ( Kernel prefix ) 3.position relative / Absolute positioning 4.overflow:scroll And so on 5.display Attribute application 6. Box model calculation method and Bug ...

  10. HTML5 New labels and attributes

    Catalog One .HTML5 New properties 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable* 1.6.placehold ...

Random recommendation

  1. mybatis map Common data types

    JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String NUMERIC java.math.BigDecimal DECIM ...

  2. ASP.NET MVC When uploading large files 404

    Some time ago, the member's upload component changed to FLASH Of swfupload To upload , It can display the upload progress in a friendly way , And can fully meet the upload of large files . Later, the server was upgraded to windows 2008, Change it to IIS7 after , Once the upload file exceeds 30M ...

  3. android The correct introduction of third party jar package

    android The correct introduction of third party jar package andriod If we introduce jar If you don't do it in the right way, there will be some strange mistakes . There happens to be one at work jar The package needs to call , It took a long time to solve the problem bug. It was quoted like this at the beginning ...

  4. SELECT INTO and INSERT INTO SELECT Two table copy statements .txt

    Insert yes T-sql It's a common sentence in English ,Insert INTO table(field1,field2,...) values(value1,value2,...) This form of application development is essential . But I ...

  5. java.lang.NoClassDefFoundError: javax/wsdl/OperationType

    You should find the javax.wsdl package inside wsdl4j.jar Check for the line starting with 'Found IBM ...

  6. 《Genesis-3D Open source game engine complete example tutorial - Parkour game 02: How to realize internal purchase 》

    2. How to realize internal purchase Overview of internal purchase : In game shopping refers to players in the game , A way to get game props with money . Developers get the benefits of developing games from players' internal purchase , So a lot of games have in store modules . Next, let's talk on the mobile phone IOS Platform to achieve Parkour game purchase as an example , ...

  7. HTML Page loading animation effect

    browser :Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...

  8. MVC 5 - Passing data from the controller to the view

    MVC 5 - Passing data from the controller to the view Before we talk about databases and data models , Let's first discuss how to pass data from the controller to the view . The controller class will respond to the request URL. The controller class is where you write code to handle incoming requests , And from the data ...

  9. use Python Realization gmail mailbox service , Realize the binding between two mailbox ( in )

    This blog , It's mainly for explanation Python Several modules that need to be learned to realize mailbox service :E-mail Compotion and Decoding( Mail generation and parsing ).SMTP.POP.IMAP As the last blog said , I'm involved in the learning process ...

  10. install python caffe Some problems encountered in the process and the corresponding solutions

    About the system environment : Ubuntu 16.04 LTS cuda 8.0 cudnn 6.5 Anaconda3 compile pycaffe You need a configuration file before Makefile.config ## Refer to h ...