Best 13 Features Of HTML-5

0
99
views
Best 13 Features Of HTML-5
Best 13 Features Of HTML-5

Hey, guys welcome to another Fresh Article, in this Article i will come with ‘Best 13 Features of HTML-5 That Every Web Designer & Web Developer Must Know about It.

Download this Best 13 Features of HTML-5 File as a PDF file to your computer.

Download 🙂  (This link takes you to the download page)

Best 13 Features Of HTML-5 Article File – Developed by the startfrombasic.com

This WHAT IS HTML-5???

HTML-5 is the most recent version of the HTML standards.

#A
  1. It Comes with Simple DOCTYPE

The fifth version of HTML comes with a simple DOCTYPE. In order to indicate that your HTML content Utilizes HTML-5, you just need to write:

<! DOCTYPE HTML>

#B
  1. HTML-5 gives Flexibility with “Quotation marks”

If you are writing HTML-5 attributes, you don’t need to utilize quotation marks to define those values. It completely depends on you whether you want to close your elements with quotes or not.

<p class=myClass id=some Id> Start the reactor.

#C
  1. Use of New Figure Element

In the conventional printed reading material such as Magazines or Book, you can easily find the CAPTION. But before HTML-5, there was not a simple or semantic way to associate the caption, coated in a paragraph tag, with the image element.HTML5 come with the new <figure> and <figcaption> element that has the proficiency to solve this problem. By combining both these elements, you can semantically integrate captions with their Images. Consider the following coding if you want to generate captions into image

Element:

<figure>

    <img src=”path/to/image” alt=”About image” />

    <figcaption>

        <p>A beautiful image. </p>

    </figcaption>

</figure>

#D
  1. Easily Edit Text Content with HTML-5

Most of the new browsers incorporated with a new attribute called content-editable that enable the user to edit any of the text included within the element. With the use of this attribute, you can instruct the browser to enable users to add, delete and edit the text (added in your web page).

<ul contenteditable=true>

#E
  1. Don’t Need to Add type for Scripts and Links

This is a great feature of HTML-5. Now you don’t need to insert type for Scripts and Links if you are using HTML5. It is connoted that both of these tags are concerned with stylesheets and scripts. And therefore, we can remove the type attribute with ease. See the coding below:

<link rel=”stylesheet” href=”path/to/stylesheet.css” />

<script src=”path/to/script.js”></script>

#F
  1. New and easy Semantic Elements

Most of the websites use the HTML code like with an objective to symbolize header, navigation, and footer. However, this is quite a complicated technique. But HTML-5 offers new and easy-to-memorize semantic elements that can help developers to define different sections of a web page. Look at the following Semantic Elements:

<header>

<footer>

<nav>

<section>

<article>, and many more.

#G
  1. Placeholder Attribute of HTML-5

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 Place-Holders for textboxes. But now you don’t need to utilize JS for this because HTML-5 introduces the Placeholder attribute that will display the text in a field.

<input name=”email” type=”email” placeholder=”[email protected]” />

#H
  1. Use of 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. However, you can declare this attribute in two or more different ways as per your coding preference.

<input type=”text” name=”Any-Name” required>

Or, you can opt for a more structured method.

<input type=”text” name=” Any-Name ” required=”required”>

Both methods will work. But, a form can’t be submitted if that “Any Name” left blank while using this code. To solve this problem we have added another method where we will also insert the placeholder attribute.

<form method=”post” action=””>

<label for=”someInput”> Your Name: </label>

<input type=”text” id=” Any-Name ”

name=” Any-Name ” placeholder=”XYZ” required>

<button type=”submit”>Go</button>

</form>

By adding these lines of code, your form gets submitted, and the textbox will be highlighted if the “Any Name” is left blank.

#I
  1. Use of Autofocus Attribute

The autofocus is a new attribute in HTML-5 used to specify that an input element automatically gets focused when the page loads. Again, HTML-5 offers a better support for Autofocus than JavaScript.

<input type=”text” name=”someInput” placeholder=”XYZ” required autofocus>

#J
  1. Pattern Attribute

 It’s difficult to quickly write a regular expression in order to verify a specific textbox. But thanks to the new feature of HTML-5. It offers a pattern attribute that makes it easy to add a regular expression into the Mark-up Like This.

<form action=”” method=”post”>

<label for=”username”>Create a Username: </label>

<input type=”text” name=”username”

 id=”username” placeholder=”4 <> 10″

pattern=”[A-Za-z]{4,10}” autofocusrequired>

 <button type=”submit”>Go </button>

</form>

Note: If you are not familiar with regular expressions, let me tell you that this [A-Z a-z]{4,10} pattern accepts only upper and lower letters and the string should have minimum four characters and maximum ten characters.

#K
  1. It Supports For Audio

HTML-5 offers an Audio element which is used to add audio content in an HTML or XHTML document. However, only the current browsers are offering support for HTML-5 audio But Internet Explorer doesn’t support HTML-5 audio. Write this following code to embed audio content:

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg” />

<source src=”file.mp3″ />

<a>Download this file.</a>

</audio>

#L
  1. Support for Video

Alike an audio tag, HTML-5 also offers a video element that will support most of the recent browsers. In fact, Youtube has announced that a new HTML-5 video embed for their videos (only for the supported browsers). Unluckily, HTML-5 draft specification doesn’t specify particular codes for video; therefore, it is difficult to say how many browsers will support HTML-5 video? However, Safari and IE9 will accept HTML-5 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 controls preload>

<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora'” />

<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” /> <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>

</video>

#M
  1. Mark Element

HTML-5 offers a mark element that defines marked text. You can use this element to highlight the specific parts of your text.

<mark> Search Results </mark>

Hope you find this Article Helpful.

Download this Best 13 Features of HTML-5 File as a PDF file to your computer.

Download 🙂   (This link takes you to the download page)

LEAVE A REPLY

Please enter your comment!
Please enter your name here