HTML5 elements and semantic tags

  Front end, html, html5

Sites:Front-end development document
Original:HTML element
Original:Semantic label

HTML element

Element classification

  • Block level elementdivh1-h6hrmenuolullidldtddtablepform

    • Its own attribute isdisplay: block;The elements of the, usually use block level elements for layout (structure) building.
  • Characteristics of block-level elements

    • Exclusive line
    • Arranged sequentially from top to bottom
    • Directly control the width, height, and relevant CSS properties of the box model
    • Without setting the width, the width of a block-level element is the width of its parent element content and the height is the height of its own content
    • You can nest inline elements
    • ul/olThe following can only beli,dlThe following can only bedt dd;pCan’t contain other block-level elements including itself
  • inline elemenspanastrongiem,su,textareainputselect,labelimgsup,sub

    • Its own attribute isdisplay: inline;Elements of, usually use inline elements to build text, small icons (small structures).
  • Features of Inline Elements

    • Not exclusive to one line, and other inline elements are displayed on one line from left to right.
    • You cannot directly control the width, height and CSS properties of the box model. You can directly set the left and right values of the inner and outer margins.
    • The width and height are determined by the size of the content (text, pictures, etc.)
    • Only text or other inline elements can be accommodated (block-level elements cannot be nested within inline elements)

CSS external chain introduction method

  • linkYeshtmlLabels,@importYescssThe method provided is written incssDocuments orstyleIn the label.
  • The loading order is different. When a page is loaded,linkReferencedcssThe files are loaded at the same time and@importincomingcssThe file will not be loaded until all pages have been downloaded.
  • UsejsControl DOM to change CSS style, only uselinkLabel, becauseimportCannot be controlled by DOM.

CSS naming convention

  • Head:header
  • Contents:content/container
  • Tail:footer
  • Navigation:nav
  • Sidebar:sidebar
  • Column:column
  • The page periphery controls the overall layout width:wrapper
  • Right and left center:left right center
  • Landing strip:loginbar
  • Signs:logo
  • Advertising:banner
  • Page body:main
  • Hotspots:hot
  • News:news
  • Download:download
  • Subnavigation:subnav
  • Menu:menu
  • Submenu:submenu
  • Search:search
  • Links:friendlink
  • Footer:footer
  • Copyright:copyright
  • Vote:vote
  • Partners:partner
  • Scroll:scroll
  • Contents:content
  • Tabs:tab
  • Article list:list
  • Prompt message:msg
  • Tips:tips
  • Column title:title
  • Add:joinus
  • Guidelines:guild
  • Services:service
  • Registration:register
  • Status:status

Semantic label

  1. Minimize the use of meaningless labels, such asspanAnddiv
  2. Try not to use CSS properties of the tag itself, such asbfonts
  3. What needs to be emphasized, usestrongem
  4. When building the form, use<thead>Table header</thead><tbody>Table body</tbody><tfoot>End of form</tfoot>
  5. When building a list, use the<ul>Unordered list</ul><ol>Ordered list</ol><dl>Define list</dl>
  • section: dividing a web page to represent a section of the page, such as a chapter, header, footer, or other part of the page. Can andh1,h2,h3 ...Such as other tags used in combination, said the document structure.
  • hgroup: Combines the titles of one content block in the entire page/page.
  • header: The head portion of a content block or an entire page.
  • footer: The end of an entire page or page block.
  • nav: The part of the page that is linked by navigation.
  • article: Complete independent content block independent of the rest of the content.articleElements are specifically designed for abstracts.
  • aside: IndicatesarticleBeyond the label content, andarticleAuxiliary information related to tag content,asideElement is used for unrelated content.

    • Content that should be separate from the main content
    • asideThe content in an element can be isolated without affecting the document orsectionThe meaning of the main content
    • Can be used in the main content related references, such as sidebar, advertising,navElement group, etc
    • asideIf the content of is deleted, the rest is still reasonable.
  • figure: Indicates an independent piece of streaming content, generally indicating an independent unit (figureElements are often used for pictures)
  • figcaption

    • Description of a legend
    • figureA title or related explanation of an element
    • UsefigcaptionWhen, it is best tofigureThe first or last element of a block

Compatibility Issues for New Labels

  • HTML5 semantic tags are displayed as inline elements by default under IE6-8.
  • By introductionjsResolve compatibility issues for new labels below IE9


  • NewinputType of element:

    • search: search input box
    • tel: phone number input box
    • url: Enter URL Address
    • email: mail input box
    • number: Number input box
    • rang: numeric selector within a specific range
    • color: Color Selector is only available in Opera and Blackberry browsers
    • datetime: Displays the full date and time UTC Standard Time
    • datetime-local: Displays the full date and time
    • time: display time
    • month: Displays the month
    • week: Display Week
  • New form features:

    • placeholder: input box placeholder used as input prompt
    • autocomplete: whether to save the user input value; the default ison, closed asoff
    • autofocus: auto focus
    • required: This item is required and cannot be empty
    • pattern: regular validationpattern="\d{1,5}"
    • form: plusformProperty, form elements can be placed anywhere on the page
    • formnovalidate/novalidate

      • Indicates that there is no need to validate the form and submit it directly (novalidateUserformLabel)
      • formnovalidatebe used forsubmitSubmit button of type
  • Form validation

    • validityObject through the followingvalidYou can see if the verification passes

      • oText.addEventListener("invalid"fn1,false);
      • valid: Return when validation failsfalse
      • valueMissing: when the input value is blank
      • typeMismatch: control value does not match expected type
      • patternMismatch: The input value is not satisfiedpatternRegular
      • customError: does not conform to custom validation

        • setCustomValidity();Custom validation