This is a note originally from the article of Jeffrey, Lucy and w3s , and picked up the parts that is inspiring to me.
I am recently involving time and effort in mastering front-end skill, and I would say front-end is evoluting so fast , new framework and standard come up every few months. Sound like it is so hard to catch and to become a front-end master, but it is not true, likelihood the animal kingdom, it is diverse, there is so much to study about different species, or different behavior of individual of one species. But there is couple of perpetual core in animal, like cell. And I can say that HTML, CSS, Javascript and HTTP request are the cell of website.
Many longevity website, 10, 20 years old, are supporting both outdated browser for the loyalty users and the browser on newest mobile for hipster users, support cross browser and old browser are always the two big problem in web development, there is not a silver bullet.
Understanding HTML5 is understanding the cell of website, which makes an organic web to speak, to move, to interact with human.
Content:
- New Doctype
- The Figure Element
- No More
Typesfor Scripts and Links - Flexibility with “Quotation marks”
- Content Editable
- Mark Element
- Audio Support
- Video Support
- Local Storage
- [input] Email type
- [input] Placeholders Attribute
- [input] Required Attribute
- [input] Autofocus Attribute
- [input] Autofocus Attribute
1. New Doctype (from)
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.
<!DOCTYPE
2.The Figure Element
HTML5 comes up with the new <figure> and <figcaption> element, effectively isolates its content from its ancestor’s structure. Whatever’s inside the figure doesn’t contribute to the document outline outside it.
<figure>
<img
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. No More Types for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link
<script
It is connoted that both of these tags are concerned with stylesheets and scripts.
<link
<script
4. Flexibility with “Quotation marks”
Quote whether you want to close your elements with quotes or not.
<p class=myClass id=someId> Start the reactor. </p>
5. Content Editable
New attribute called contenteditable that enables the user to edit any of the text included within the element.
<ul contenteditable=true>
6. Mark Element
Use the <mark> tag if you want to highlight parts of your text.
<p>Do not forget to buy <mark>milk</mark> today.</p>
7. Audio Support
No longer do we have to rely upon third party plugins in order to render audio (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.
https://www.w3schools.com/html/html5_audio.asp
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
8. Video Support
Much like the <audio> element, before HTML5, a video could only be played in a browser with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page. However, Safari and IE9 will accept HTML5 video in the H.264 format while Firefox and Opera accept the Theora and Vorbis formats. And, the Chrome will show off videos that are encoded in both the mp4 and Ogg formats.
<video width="400" controls><source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">Your browser does not support HTML5 video.</video>
9. Local Storage
With local storage, web applications can store data locally within the user’s browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
if (typeof(Storage) !== "undefined") {localStorage.setItem("lastname", "Smith");localStorage.getItem("lastname");}
10. Email Inputs Attribute
If we apply a type of "email" to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure.
<form action="/action_page.php">E-mail:<input type="email" name="email"><input type="submit"></form>
11. Placeholders Attribute
Placeholder text is a hint text, displayed in the form field when the field is unfocused.
Earlier, developers have to use a JavaScript to build placeholders for textboxes. But now you don’t need to utilize JS for this because HTML5 introduces the Placeholder attribute that will display the text in a field until the field is focused.
<input name="email" type="email" placeholder="xyx@abc.com" />
12. Required Attribute
The required attribute is a Boolean attribute that determines whether input field is filled out or not before the final submission of the form.
<input type="text" name="someInput" required>
or
<input type="text" name="someInput" required="required">
13. Autofocus Attribute
The autofocus is a new attribute in HTML5 used to specify that an input element automatically gets focused when the page loads.
<form action="/action_page.php">First name: <input type="text" name="fname" autofocus><br>Last name: <input type="text" name="lname"><br><input type="submit"></form>
14. Pattern input
Earlier, developers have to use a JavaScript and difficult to quickly write a regular expression. Pattern attribute that makes it easy to add a regular expression into the markup.
<input type="text"name="username"id="username"placeholder="4 <> 10"** pattern="[A-Za-z]{4,10}"**autofocusrequired>
Reference:
https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520