More modern consumers are going digital.
Still, using old XHTML doctype?
If so, why? Switch to the new HTML5 doctype. You’ll live longer – as Douglas Quaid might say.
In fact, did you know that it truly isn’t even really necessary for HTML5? However, it’s used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.
Figure Element
Consider the Below mark-up for an image:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt=" image" title="HTML5 New Features, Tips, and Techniques you Must Know 1" data-lazy-src="path/image"><noscript><img decoding="async" src="path/image" alt=" image" title="HTML5 New Features, Tips, and Techniques you Must Know 1"></noscript>
<p>This is an image. </p>
There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.
<figure>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="image" title="HTML5 New Features, Tips, and Techniques you Must Know 2" data-lazy-src="path/image"><noscript><img decoding="async" src="path/image" alt="image" title="HTML5 New Features, Tips, and Techniques you Must Know 2"></noscript>
<figcaption>
<p>This is an image some text. </p>
</figcaption>
</figure>
<small> Element Use
Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.
The
smallelement now refer.
No More Type attribute for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link rel="stylesheet" href="stylesheet.css" type="text/css">
This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
To Quote or Not to Quote
That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.
<p class="myClass" id="myid"></p>
Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.
The Semantic Header and Footer
an old structure like that:
<div id="header">
...
</div>
<div id="footer">
...
</div>
The mark-up above can now be replaced with
<header>
...
</header>
<footer>
...
</footer>
Audio & Video Support
Audio Support code write as below:
<audio autoplay="autoplay" controls="controls">
<source src="filename.ogg"></source>
<source src="filename.mp3"></source>
<a>Download this file.</a>
</audio>
<video controls preload>
<source src="vide.ogv" type="video/ogg"></source>
<source src="video.mp4" type="video/mp4"></source>
<p> Your browser not supported.</p>
</video>
Conclusion
In conclusion, HTML5 is a powerful tool that offers many new features and techniques that can help developers build more advanced and dynamic web applications. By using the new semantic elements, multimedia support, and other features, developers can create more accessible, efficient, and responsive websites. It’s important to stay up-to-date with the latest HTML5 features and best practices to ensure that your website is modern and user-friendly.
