HTML5

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the structure of web pages.

HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces(API) and Document Object Model(DOM). It has introduced various new features like drag and drop, geo-location services, multimedia features, easy doctype declaration, offline data storage, graphic elements, and various semantic tags like the article, section, header, footer, figure, summary, etc. It is supported by all modern browsers.

Why HTML5?

Below are some differences that may or may not have caught your attention since developers started using HTML5:

• Some data can be stored on the user's device, which means apps are cached and can continue to work properly without an Internet connection.
• Web pages can display fonts with a wider array of colors, shadows, and other beautiful effects.
• Objects on the page can be more responsive and can move in response to the user's cursor movements.
• New elements like section, header, article, and nav can replace most div elements, which helps eliminate div soups and makes it easier to scan for mistakes.
• Before HTML5 cookies which hold a limited amount of data were the only reliable way to store data, HTML5's localStorage provides developers a way to work around the stateless nature of the HTTP protocol.
• Browsers can display interactive 3D graphics using the computer's own graphics processor.
• By limiting the need for external plugins, HTML5 allows for faster delivery of more dynamic content.

What's new in HTML5?

1. Audio and Video: HTML5 has two key additions: audio and video tags. It enables website developers to insert video or music into their pages.
2. Vector Graphics: This is a new feature in the updated version that has had a significant impact on the use of Adobe Flash in websites. It may be used to create visuals using a variety of shapes and colors using scripting, most commonly JS. Scalable vector graphics are simple to generate and manipulate.
3. Header and Footer: There is no need to use a div> tag to separate the two elements with these new tags. The footer appears at the bottom of the page, while the header appears at the top. The browser will know what to load first and what to load later if you use the HTML5 elements header and footer.
4. Figure and Figcaption: The <figure> element in HTML5 can be used to mark up a photo in a document, and the <figcaption> element can be used to define a caption for the photo. A caption for a figure element is defined using the <figcaption> tag.
5. Nav tag: The <nav> tag defines a set of navigation links. It is used for the part of an internet site that links to different pages on the website.
6. Progress tag: The progress tag is used to check the progress of a task during the execution. Progress tag can be used with the conjunction of JavaScript.
7. Placeholder Attribute: The placeholder attribute offers a brief description of an input field's/text area's intended value. Before the user inputs a value, a small hint appears in the field.
8. Email attribute: When the form's input type is set to email, the browser receives instructions from the code to write an email in a valid format. The format of the input email id is automatically verified to ensure that it is correct.
9. Storage: In HTML, we can utilize the browser as temporary storage, however in HTML5, we use an application cache, a web SQL database, and web storage.
10. Ease of use: While HTML5 has hazards, such as constant modifications, the simplified syntax makes it easier to keep up with changes and updates than other versions of HTML.

What has been dropped?

1. The HGROUP Element: The HGROUP element was created to group together one or more H1-H6 elements, usually a title and its subtitle. It was designed for a document outlining algorithms, with the goal of omitting all but the highest level heading from the resulting document outline.
2. The CENTER Element: All of its content is horizontally centered within its containing element. It has always come in handy for centering headings and tables.
3. The SCOPED Attribute: The SCOPED attribute was unique to the STYLE element and served as a boolean switch, indicating whether or not the styles should be applied to the STYLE block's container element and child elements rather than the entire document.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>HTML 5</title>
    <style>
        .GFG {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="GFG">GeeksforGeeks</div>
    <aside>
        <div>A computer science portal for geeks</div>
    </aside>
</body>

</html>

Output: