https://github.com/itsdouges/html5.2-cheat-sheet
Collection of HTML examples that are relevant in HTML5.2
https://github.com/itsdouges/html5.2-cheat-sheet
Last synced: 5 months ago
JSON representation
Collection of HTML examples that are relevant in HTML5.2
- Host: GitHub
- URL: https://github.com/itsdouges/html5.2-cheat-sheet
- Owner: itsdouges
- Created: 2017-12-26T21:19:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-26T22:15:25.000Z (about 8 years ago)
- Last Synced: 2025-03-02T13:26:04.523Z (11 months ago)
- Size: 0 Bytes
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML5.2 Cheat Sheet
This cheat sheet will primarily be going over sematic markup changes, and things that affect the average web app developer. For a full summary of HTML5.2 go check out the [w3 changes](https://www.w3.org/TR/html52/changes.html#changes).
## [](https://www.w3.org/TR/html52/interactive-elements.html#elementdef-dialog)
Now there is semantic meaning when wanting a `dialog`.
```html
Hello, World!
```
* Note the use of the `open` attribute. It should only be shown to the user if it is present.
* Do not set tab index on a dialog.
### Programatic usage
```javascript
const dialog = document.getElementById("my-dialog");
// Displays the dialog element.
dialog.show(/* optional anchor element */);
// Displays the dialog element and makes it the top-most modal dialog.
dialog.showModal(/* optional anchor element */);
// Closes the dialog element.
dialog.close(/* optional return value */ "my-value");
// Returns the dialog’s return value.
dialog.returnValue; // 'my-value'
```
## New markup constructions
* `` can be placed within `<body>` now.
* Multiple `<main>` can exist, _so that only one is visible to the user_.
* `<div>` as a child of a `<dl>` element.
* `<dfn>` as a descendent of an `<li>` element that contains a definition of the term defined.
* Headings within `<legend>` in a `<fieldset>`.
* Empty `<option>` element as a child of `<datalist>`.
## Invalid constructions
* `roles` value for `<caption>` element
* Inline blocks/tables/floats/positioned block-level elements inside a `<p>`.