The W3C HTML 5.2 specification has a section on the changes introduced in this version, which I have compiled from What’s New in HTML 5.2? In the description of this article, here are some important parts for me.

New features

native<dialog>The element

Dialogs are often used in development, and the HTML 5.2 specification provides a


element to create dialogs.


elements are hidden by default.

<! -- Hidden by default -->
<dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>
Copy the code

Add the open attribute to display.

<dialog open>
Copy the code

HTMLDialogElement is the low-level element representation of


and provides show(), close(), showModal() methods to control the display and hiding of dialog boxes.

<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>
Copy the code

The difference between show() and showModal() is that the showModal() creation is a modal box, and when you open it by default you can’t manipulate the content behind the page; Show () is shown as a popbox.

allowpaymentrequestattribute

It is now possible to add an allowPaymentRequest attribute to < Iframe > to allow internal pages to use the Payment Request API.

<iframe allowpaymentrequest>
Copy the code

rel="apple-touch-icon"

We use to specify web ICONS. In addition, it supports sizes property which defines ICONS of different sizes for browsers to display.

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

Prior to HTML 5.2, Apple iOS devices did not support sizes < Link rel=”icon”>. Instead, Apple-touch-Icon REL was used to support ICONS for displaying web pages or installing web apps (such as PWA) on their own devices.

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

The specification now recognizes apple-touch-icon as an REL and supports setting sizes on this property.

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

New effective practices

multiple<main>The label

Prior to HTML 5.2, only one


tag could exist on a page, which was used to represent the unique topic content of a page. However, starting with HTML version 5.2, it is possible to have more than one

tag on a page at the same time, but only one of them can be displayed. The others must be hidden with the hidden attribute.

<main>.</main>
<main hidden>.</main>
<main hidden>.</main>
Copy the code

Note that any other


that is not displayed should be hidden with the hidden property, using display: None; Or the visibility: hidden; The way of hiding is invalid.

<body> 内 <style>

HTML 5.2 allows the use of the 

<body>
    <p>I 'm cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I 'm cornflowerblue!</p>
</body>
Copy the code

It’s best not to do this, though, and it’s better to write styles in. The specification states:

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.

That is,

<legend>You can use a title element in

is used as a caption in the

tag, and

is used in the

tag to group form fields.

Here’s 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>
Copy the code

Before HTML 5.2, < Legend > could only use plain text. Starting with HTML 5.2, you can use header elements.

<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>
Copy the code

Remove features

  • <keygen>,<menu> 和 <menuitem>The element
  • The text<input> 的 inputmode 和 dropzoneattribute
  • widow.showModalDialog()methods

New ineffective practices

<p>Invalid content in

The following three elements cannot be used as content in a

paragraph.

  • Inline blocks, table elements (Inline blocks, Inline tables)
  • Floating elements (Floated)
  • 21. Positioned element

strict doctype

Strict docType declarations for HTML4 and XHTML1 are no longer valid HTML.


      
Copy the code

      
Copy the code

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)