Explain the changes brought about by html5.2

Time:2020-8-18

In the W3C HTML 5.2 specification, there is a section that introduces the changes introduced in this version. I synthesize the description from the article “what’s new in HTML 5.2?” to list the more important parts for me.

New features

Primordial<dialog>element

2.5, which is more frequently used in the development of HTML<dialog>Element to create a dialog box.

<dialog>The default is hidden elements.

<! -- hidden by default -- >
<dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

add toopenProperty.


<dialog open>

Htmldialogelement is<dialog>Provides theshow()close()showModal()Method to control the visibility and concealment of the dialog box.


<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>

<dialog id="dialog">
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});
</script>

show()AndshowModal()The difference is,showModal()Creation is a modal box, which can’t operate the content in the back page by default when it is opened; andshow()It’s shown in a pop-up.

allowpaymentrequestattribute

Now you can<iframe>AddallowpaymentrequestProperty, allows<iframe>Internal web pages use the payment request API.


<iframe allowpaymentrequest>

rel="apple-touch-icon"

We use<link rel="icon">Specifies the web icon, in addition to which it supports the use ofsizesAttribute, define different sizes of icon, for the browser in the display is preferred display.


<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">

Before HTML 5.2, apple IOS devices did not support it<link rel="icon">OfsizesInstead, use the apple touch iconrelTo support the icon used when displaying web pages or installing Web Applications (such as PWA) on your own devices.


<link rel="apple-touch-icon" href="/example.png">

Now the norm recognizes itapple-touch-iconthisrelValue, and support in this<link rel="apple-touch-icon">Set onsizesProperty.


<link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="apple-touch-icon" sizes="32x32" href="path/to/icon32.png">

New effective practices

Multiple < main > tags

Before HTML 5.2, only one page could exist<main>Tag, used to represent the unique theme content of a page. However, starting with HTML version 5.2, multiple pages are allowed to exist at the same time<main>Tag, but there can only be one display, the other should be usedhiddenProperty is hidden.


<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

Note that others are not shown<main>Use bothhiddenProperties hidden, usingdisplay: none;orvisibility: hidden;The way of hiding is invalid.

<body>Internal < style >

<style>Before, they could only be in the<head>However, with the growth of component-sized development pattern, the pattern of writing component style near component structure becomes popular.

HTML 5.2 allows<body>Internal use<style>Tag, define the structure style nearby.


<body>
    <p>I’m cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I’m cornflowerblue!</p>
</body>

But it’s better not to do this. It’s better to write the style in. It is mentioned in the specification that:

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

Namely<body>Internal<style>May cause the layout of the previous elements to change, causing the page to redraw. So try to avoid using it.

Title elements can be used in < legend >

<legend>Used in<fieldset>The label is used as a title,<fieldset>It is used in<form>Group the form fields.

Here is an example:


<!-- See: https://www.w3schools.com/tags/tag_fieldset.asp -->
<form action="/action_page.php">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

Before HTML 5.2,<legend>You can only use plain text in HTML 5.2, you can use the title element.


<fieldset>
    <legend><h2>Basic Information</h2></legend>
    <!-- Form fields for basic information -->
</fieldset>
<fieldset>
    <legend><h2>Contact Information</h2></legend>
    <!-- Form fields for contact information -->
</fieldset>

Remove feature

  • <keygen><menu>and<menuitem>element
  • text<input>OfinputmodeAnddropzoneattribute
  • widow.showModalDialog()method

New ineffective practice

<p>Invalid content in

The following three types of elements cannot be used as<p>The content of the paragraph.

  • In line blocks, table elements (inline blocks, inline tables)
  • Floating element
  • Positioned block level elements

 strict doctype

The strict DOCTYPE of html4 and xhtml1 is no longer valid HTML.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This article on the detailed explanation of html5.2 version of the modification of this article introduced here, more relevant html5.2 version content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!