This is a note originally from the article of , and , and picked up the parts that is inspiring to me. Jeffrey Lucy w3s 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 for Scripts and Links Types 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 and element, effectively its content from its ancestor’s structure. Whatever’s inside the figure doesn’t contribute to the document outline outside it. <figure> <figcaption> isolates <figure> <img <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> 3. No More for Scripts and Links Types You possibly still add the attribute to your and tags. type link script <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= id= > Start the reactor. </p> myClass someId 5. Content Editable New attribute called contenteditable that enables the user to edit any of the text included within the element. ( ) Example w3s <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> ( ) Example w3s 8. Video Support Much like the element, before HTML5, a video could only be played in a browser with a plug-in (like flash). <audio> The HTML5 <video> element specifies a standard way to embed a video in a web page. However, and will accept HTML5 video in the format while and accept the and formats. And, the will show off videos that are encoded in Safari IE9 H.264 Firefox Opera Theora Vorbis Chrome 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> ( ) Example w3s 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 , included in . Local storage is more , and of data can be stored locally, without affecting website performance. cookies every server request secure large amounts Unlike cookies, the storage limit is and information is never transferred to the server. far larger (at least 5MB) Local storage is per ( ). All pages, from one origin, can store and access the same data. origin per domain and protocol if (typeof(Storage) !== "undefined") {localStorage.setItem("lastname", "Smith");localStorage.getItem("lastname");} ( ) Example w3s 10. Email Inputs Attribute If we apply a of "email" to form inputs, we can instruct the browser to allow strings that conform to a valid email address structure. type only <form action="/action_page.php">E-mail:<input type="email" name="email"><input type="submit"></form> ( ) Example w3s 11. Placeholders Attribute Placeholder text is a hint text, displayed in the form field when the field is unfocused. Earlier, developers s 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. have to use a JavaScript to build placeholder <input name="email" type="email" placeholder=" " /> xyx@abc.com 12. Required Attribute The required attribute is a attribute that determines whether input field is filled out or not before the final submission of the form. Boolean <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" ><br>Last name: <input type="text" name="lname"><br><input type="submit"></form> autofocus ( ) Example w3s 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> ( ) Example w3s Reference: https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520 https://webdesign.tutsplus.com/tutorials/quick-tip-consider-wrapping-your-code-with-a-figure-element--cms-21646
![featured image - [HTML5] Review : the good parts](https://hackernoon.imgix.net/hn-images/1*7xbuvhfpHg5RUUoQYPIXmA.jpeg?auto=format&fit=max&w=1920)
![[Note] 19 Coding Rules that every coder must know](https://hackernoon.imgix.net/hn-images/1*LwkasdSEFs7rhv21ayrfxA.png?auto=format&fit=max&w=3840)
![[Javascript] ES7 Async Await BIBLE](https://hackernoon.imgix.net/fallback-feat.png?auto=format&fit=max&w=3840)
