What is it?

Html5 is the latest HTML standard with new semantic, graphical, and multimedia elements that simplify Web applications and are designed for rich Web content. It’s called H5 for short. Simply put, it adds some more intuitive tags. H5 is much simpler than HTML4.0.

New HTML tags

  1. Structure tag: mainly used to divide the page structure into top, navigation, content (header, block), footer and so on.
  • Header: General web page header information/title.
  • Nav: indicates the content of the navigation bar.
  • Section: independent content block, general content area.
  • Article: special independent block that represents the core content in the header.
  • Aside: Supporting information related to the content of the label.
  • Figure: independent unit, such as text and text mixing module.
  • Hgroup: header information or header information.
  • Footer: indicates the bottom information.

Code examples:

<header> Top information </header> <nav> Navigation information </nav> <div> <section> <hgroup> Title related </hgroup> <article> <footer> Bottom information </footer> </section> <aside> sidebar </aside> </div> <footer> bottom </footer>Copy the code

The code results are as follows:

2. Form labels

The input element in the form remember? H5 New form label is mainly for the input type attribute value. The specific attribute value is described as follows:

  • Search: indicates the search box. The difference with text is that there will be a clear button when there is value.
  • Email: indicates the email address for automatic verification.
  • Url: indicates the HTTP address for automatic verification.
  • Number: You must enter a value. You can set the min and Max values.
  • Range: Values within a certain range must be entered.
  • Color: color picker.
  • Date picker: Date: selects the year, month and day. Month: selects the month. Week: Select the week and year. Time: indicates the selected time. Datetime: Select the time and date.
<input type="number" min="0" Max ="3">Copy the code

3. Media labels

  • Video: video
  • Audio: audio
  • Embed: Embed content, including various media, flash, images, etc.

4. Labels for other functions

  • Progress: indicates the progress bar.
<progress max="100" min="1" value="20"></progress>
Copy the code
  • Datalist: Text field drop-down prompt.
  • Detail: Expand the menu.
  • Mark: Mark.
  • Time: Data tag, used by search engines, the primary date tag.
  • Canvas: Use JS to draw images.
  • Ruby: Comment something.
  • Command: button.