What is the HTML5: Differences Between HTML and HTML5

April 08, 2023 Posting Komentar

HTML (Hypertext Markup Language) has been a fundamental building block for the web since the inception of the World Wide Web. It provides the structure for web pages and their content.

The latest version of HTML is HTML5, which was released in 2014. HTML5 has brought many new features and improvements to the table, which we will discuss in this article.

What is HTML?

HTML is a markup language used for creating web pages. It provides a set of rules for structuring content on the web. It defines the elements and attributes used to mark up content, such as headings, paragraphs, images, and links. HTML is essential for creating the structure of web pages and conveying their meaning to web browsers.

What is HTML5?

HTML5 is the latest version of HTML, which was developed by the World Wide Web Consortium (W3C). It was released in 2014 and has become the new standard for web development. HTML5 introduces new features and improvements, which make it easier to create dynamic and interactive web pages.

Differences between HTML and HTML5

HTML and HTML5 share a lot in common, but there are also some key differences between the two versions. Here are some of the most significant differences:

Syntax

HTML5 introduced some new syntax and removed some old syntax compared to previous versions of HTML. Here are some of the key differences in syntax between HTML and HTML5:

1. Doctype Declaration

In HTML, the doctype declaration was required to specify the version of HTML being used. For example, the doctype for HTML 4.01 Strict was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

In HTML5, the doctype declaration is simplified to:

<!DOCTYPE html>

2. Character Encoding

In HTML, the character encoding was specified using a meta tag in the head of the document. For example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

In HTML5, the character encoding is specified in the doctype declaration itself:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>My Web Page</title>
</head>
<body>
	<!-- content here -->
</body>
</html>

3. Script and Style Tags

In HTML, the script and style tags had to specify the type of content being included. For example:

<script type="text/javascript">
	// JavaScript code here
</script>

In HTML5, the type attribute is no longer required:

<script>
	// JavaScript code here
</script>

New Elements and Attributes

HTML5 introduced several new elements and attributes that were not available in previous versions of HTML. These include:

1. Semantic Elements

HTML5 introduces several new semantic elements that allow web developers to create more meaningful web pages. These elements include:

<header> and <footer> for defining the header and footer of a web page.
<nav> for defining a section of a web page that contains navigation links.
<article> for defining a self-contained article on a web page.
<section> for defining a section of a web page.
<aside> for defining a section of a web page that is related to the main content.

For example, here's how you might use the <header> and <footer> elements in an HTML5 web page:

<!DOCTYPE html>
<html>
<head>
	<title>My Web Page</title>
</head>
<body>
	<header>
		<h1>My Web Page</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<article>
			<h2>Article 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel massa vitae nulla eleifend tempor.</p>
		</article>
		<article>
			<h2>Article 2</h2>
			<p>Nulla facilisi. Donec vel faucibus tellus. In hac habitasse platea dictumst.</p>
		</article>
	</section>
	<footer>
		<p>Copyright © 2023 My Web Page</p>
	</footer>
</body>
</html>

2. Forms

HTML5 introduces several improvements to forms, including new form elements and attributes. These improvements make it easier to create more sophisticated forms. HTML5 introduces several new form input types such as "date", "email", "number", and "range" that were not available in previous versions of HTML.

For example, HTML5 introduces the <input> type="date" attribute, which creates a date picker for selecting dates:

<input type="date" name="birthdate">

It also introduces the <input> type="email" attribute, which validates email addresses:

<input type="email" name="email">

These are just a few examples of the differences in HTML structure between HTML and HTML5. By using these new elements and attributes, web developers can create more meaningful and sophisticated web pages.

3. Attributes "data-*"

HTML5 introduced a new set of attributes called "data-*" attributes that can be used to store custom data on HTML elements. These attributes are used to store information that is not visible to the user but can be used by scripts and styles to enhance the functionality and interactivity of a web page.

The "data-*" attributes consist of two parts: the prefix "data-" followed by a custom name that describes the data being stored. For example, if you want to store a user's ID on a div element, you could use the "data-user-id" attribute:

<div data-user-id="12345">
	User content goes here
</div>

In this example, the "data-user-id" attribute stores the value "12345" as custom data on the div element. This data can be accessed and manipulated using JavaScript or CSS.

To access the value of a "data-*" attribute using JavaScript, you can use the "getAttribute()" method:

var userId = document.querySelector('div').getAttribute('data-user-id');

This will return the value "12345" stored in the "data-user-id" attribute of the div element.

You can also use "data-*" attributes to create custom CSS selectors. For example, if you want to style all elements that have a "data-user-id" attribute, you can use the following CSS selector:

[data-user-id] {
/* styles here */
}

This will apply the styles to all elements that have a "data-user-id" attribute, regardless of the value of the attribute.

Overall, the "data-*" attributes provide a flexible and powerful way to store custom data on HTML elements and enable developers to create more dynamic and interactive web pages.

Multimedia

HTML5 introduces new multimedia features, which make it easier to embed audio and video content in web pages. The <audio> and <video> elements allow web developers to embed audio and video content directly in their web pages, without the need for plugins like Flash.

The <canvas> element is another new feature introduced in HTML5. It provides a way to create dynamic graphics and animations on the web, using JavaScript.

Storage

HTML5 introduces two new storage features, which make it easier to store data on the client-side. The first is the localStorage API, which allows web developers to store data in the user's web browser, even after the browser is closed.

The second is the sessionStorage API, which allows web developers to store data in the user's web browser for the duration of the session.

These storage features are useful for creating web applications that require persistent data storage, such as online shopping carts or user preferences.

APIs

HTML5 introduces new APIs (Application Programming Interfaces), which make it easier to create web applications that can interact with the user's device.

For example, the Geolocation API allows web developers to retrieve the user's location, while the Drag and Drop API allows web developers to create drag-and-drop interfaces.

Other APIs introduced in HTML5 include the Web Storage API, which provides a way to store data on the client-side, and the Web Workers API, which provides a way to run scripts in the background without blocking the user interface.

Backward Compatibility

One of the advantages of HTML5 is that it is designed to be backward compatible with older versions of HTML. This means that web developers can use HTML5 features and still ensure that their web pages will work in older web browsers that do not support HTML5.

To ensure backward compatibility, HTML5 includes a set of rules for how web browsers should handle web pages that use HTML5 features. For example, if a web browser encounters an HTML5 element that it does not understand, it should ignore that element and render the rest of the page.

Web Standards

HTML5 is designed to be compliant with web standards, which are a set of guidelines and best practices for creating web pages. Web standards ensure that web pages are accessible, usable, and interoperable across different devices and platforms.

HTML5 follows the guidelines set forth by the W3C (World Wide Web Consortium), which is responsible for developing and maintaining web standards.

By following these guidelines, web developers can ensure that their web pages are accessible to all users, regardless of their device or platform.

Conclusion

HTML5 introduces many new features and improvements that make it easier to create dynamic and interactive web pages. Its relaxed syntax, new semantic elements, multimedia features, and storage and form improvements are just a few of the advantages of using HTML5.

HTML5 is also designed to be backward compatible with older versions of HTML and compliant with web standards, ensuring that web developers can create web pages that are accessible, usable, and interoperable across different devices and platforms.

In summary, HTML5 is the new standard for web development, and web developers should embrace its features and advantages to create modern and effective web pages.

Dzikri Muhammad Sopyana Silih Asih, Silih Asuh, Silih Asah. Hatur nuhun.

SHARE28S

Widget HTML #1