Web Development in general refers to developing a website for the internet. Web Developers are mainly divided into two- Front End Developers and Back End Developers. Back-end developers focus on data, modeling, and the backend of the website. They have sound knowledge of programming languages like java, C++, Python, database management, security, framework utilization, etc. Whereas a front-end developer helps build what users interact with and can see i.e. working on features like design, interactive buttons, navigations, and in general anything which enhances the viewability and usability of any website. A front-end developer works on HTML, Javascript, and CSS. And then comes Full Stack developer who can work with both front end and back end.

But Today in this blog, w uhu e are going to primarily focus on the front-end part and that too on The Advanced Features of HTML5. In our next blog, we will read more about CSS3

What is HTML5?
The preferred and the most popular markup language for documents intended to be viewed in a web browser is HTML or HyperText Markup Language. The web is growing on a daily basis and hence knowing HTML is more crucial than ever. It is used for creating web pages and web applications. HTML5 is the 5th version of HTML. With the advanced features of HTML5, it’s not only possible to create better websites, but we can also create dynamic responsive websites. It is used for structuring and displaying content for the World Wide Web.

HTML5 is introduced with new features and is developed to meet the growing demands presented by today’s media, cross-device and mobile internet needs. Because many of its features have been adjusted for access on low-powered devices, like Tablets and Smartphones, we can state that it is an excellent tool for cross-platform mobile app development. HTML5 also offers a common interface to make loading components simpler. For example, HTML5 doesn’t require a Flash plugin because the element will run by itself and is supported by the latest web browsers on PCs and tablets. Well, one of the design objectives for HTML5 is to provide support for multimedia on different mobile devices. To support various tags like audio, video, and canvas. some new syntactic features were added.

HTML 5 was released in 2014 and it was not only a historic year for web designers, UI developers, and web developers but also for the entire world. 

New features of HTML5 revolutionized the gadgets industry hugely especially smart devices like phones and televisions.

Here we have some most useful and popular HTML5 features to explore :

Video and Audio
Video and audio are the new tags that allow to embed a video in the website.HTML5 video can use CSS and CSS3 to style the video tag. One can change the border, opacity, reflections, gradients, transitions, transformations, and even animations. With HTML5, adding video may be done quickly and without needing to create a video player. This gives the developer time savings and gives the client a better, more cost-effective solution. By providing the code to embed their videos, YouTube also announces video embed. It helps the web to be more involved with multimedia. An audio tag is used to embed any audio on the web.

Example of using the Video tag

<video controls preload>

    <source src=“startxlabs.com” type=“video/Ogg” />

    <source src=”startxlabs.com” type=“video/mp4” />

    <p> Your browser is old. Please try in the latest browser.</p>

</video>

Example of Video in HTML

Video output would be something like this

Note: HTML5 supports only .mp4 and .ogv videos.

Example of using Audio tag

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

    <source src=“file.ogg” />

    <source src=“file.mp3” />

    <p>Your browser doesn’t support this feature.</p>

</audio> 

SVG
In HTML 5, the SVG element is used for scalable vector graphics. By using the SVG tag, you may animate any shape, like a circle, square, or rectangle, among others.

<svg width=“100” height=“100”>

  <circle cx=“50” cy=“50” r=“40” stroke=“green” stroke-width=“4” fill=“yellow” />

</svg>

Semantic tags in HTML5
 Semantic tag collection is the most anticipated one in HTML. Making websites and apps that are user- and search engine-friendly requires the usage of semantic tags. In the past, web page developers would only create columns, rows, and new sections using the div tag. DIV doesn’t give search engines any information about the page or its content, whereas semantic tags do.

Pic 1 – Semantic Layout Structure

The creation of accessible web pages was aided by semantic tags. Accessible sites are created in such a way that they are prepared, planned, and designed suitably for people with disabilities.

4. Header and Footer:

With the new <header> and <footer> tags, there is no longer a need to identify the two elements with a <div> tag.The header is put at the top of the web page and the footer is placed at the bottom. By using <header> and <footer> HTML5 elements, the browser will know what to load first and what to load later. 

The header can contain one or more heading elements (<h1> – <h6>), a Logo or icon, or any authorship information.

The Footer can contain Authorship information, Copyright information, Contact information, Back to top links, etc.

Layout of HTML vs HTML5

Example: Below examples illustrate the <header> element in HTML:

HTML
<!DOCTYPE html> 

<html> 

    <head> 

        <title>Header Tag</title> 

    </head> 

    <body> 

        <article> 

            <header> 

                <h1>This is the heading.</h1> 

                <h4>This is the sub-heading.</h4> 

                  

<p>This is the metadata.</p>

   

            </header> 

        </article> 

    </body> 

</html>