HTML5

What is it common between Apple, Nike, Amazon, and Tesla? Technology. Yes. But what specific tech are we talking about? The answer to that is HTML 5.

Yes, all these companies have their webpages built using HTML 5.

When a website is built, it has to be hosted on a server to make it accessible for the worldwide web. All servers have an IP address that is easily remembered by using a domain name like apple.com or tesla.com etc.

When we type the domain name, it gives a server call. The server will then send files which include the HTML, CSS and JavaScript etc. The browser starts by loading the main HTML file before it continues with the CSS and JavaScript. These files enable the browser to render a beautiful and interactive website.

HTML is the skeleton of the webpage. Everything is built on it. CSS makes the website presentable and enhances the user experience while Javascript makes the website dynamic.

We are here to know in-depth about HTML 5. It is basically the 5^th generation of HTML.;

HTML 5 is the latest specification of the HTML language and represented a major break with previous markup practices. The purpose of the many, profound changes to the language was to standardize the many new ways in which developers were using it, as well as to encourage a single set of best practices with regards to web development.

How HTML 5 will help you out?

Multimedia:

Using the <video>and <audio> HTML5 tags, we can add multimedia elements without using Adobe Flash or any other third-party plugin. All the action happens from the browser itself, which can help reduce the size of the final version file. For example, we can include product presentation videos, video reviews, podcasts, music samples, etc. The addition of these two tags expands the usage of HTML5.

Also, you can upload your videos to third-party sites like Youtube and embed them on your new website. This is one of the most preferable options because despite placing multimedia elements, the final size of your file is not affected.

Applications:

One of the main features of developing HTML5 applications are that the final result is completely accessible. That is, you can access this application from a computer, tablet, or mobile phone. Even if you change devices, you can still access the web application via the respective URL, which is not the case with a mobile application.

Storage:

Data can be stored on a user’s computer or a mobile device which helps in web apps working without net connection.

Motion:

<motion> tag helps to track the movement of cursor and accordingly the web page react.

Form Validation:

HTML5 helps in validating different inputs from the user. Users get prompted to complete required fields, we need to make sure that the data they submit is in the format we require. We can use HTML5 attributes and input types to validate forms using JavaScript.

These attributes are added to <input> tag which allows browser, client-side validation. Client-side validation is fast which does not require a round trip to the server.

Let’s see how we can validate a form using HTML5

<form action="" method="post">

<fieldset>

<legend>Registration Form</legend>

<div>

<label for="name">Name (required):</label>

<input type="text" id="name" name="name" value="" required>

<span id="name-format" class="help">Format: firstname lastname</span>

</div>

<div>

<label for="email">Email (required):</label>

<input type="email" id="email" name="email" value=""required>

</div>

<div>

<label>Address:</label>

<input type="text" id="address" name="website" value="">

</div>

<div>

<label for="Mobile">Mob No (required):</label>

<input type="text" id="mob" name="MobileNO" value="">

</div>

<div class="submit">

<input type="submit" value="Submit">

</div>

</fieldset>

</form>

Writing your first HTML file

Open up any text editor of your preference (VS code, Atom, or Sublime Text).

Create a new file and type Hello World and save it as hello.html and save it on the desktop or any drive you want to. 

The file will look like this. If you open this in your browser, it will show the following screen.

That is basically your first website created.

Now, to make the text bold or increase the size of it, we use what is called as HTML tags.

<h1>hello world!</h1>

This will make the above hello world something like below:

But the HTML structure should follow certain rules to make it valid. So, to make the above heading valid, it has to be written as below:

<!DOCTYPE HTML>
<HTML> 
<head> 
</head> 
<body>   
<h1>Hello world!</h1> 
</body>
</html>

This will be dealt with in detail later.

Let’s add a paragraph below the hello world!

<h1>Hello world!</h1>
<p>if you are reading this, you are privileged. <p>

If you want to add a list to this, that can be done by two different tags, <ul>; and <li>. The former stands for an unordered list and the latter stands for list item. We’ll need to wrap the <li>; tags inside the <ul> tag.

<ul>  
<li>Wash your Hands</li> 
<li>Drink Lots of Water</li>
<li>Code</li></ul>

So, now our code will look like:

This will result into:

If you change the <ul> to an <ol> and type of ol to “a” then the bullets will be replaced with alphabets, as it stands for an ordered list. 

It will result into:

To learn more about HTML 5 course in-depth, follow this link.

                   http://skillbakery.com/courses/html5.html