HTML and HTML5
HTML (HyperText Markup Language) and its most recent iteration,
HTML5, are the backbone of the web, responsible for structuring
content on web pages. They provide the foundation for web
development, enabling the creation of documents that can be displayed
in a web browser.
While HTML (introduced in 1991 by Tim Berners-Lee) has undergone
several updates over the years, HTML5, released in 2014, represents
the most significant update, focusing on modern web features such as
multimedia, semantic elements, and enhanced mobile compatibility.
Let's dive deeply into both HTML and HTML5, comparing their
differences and exploring their critical features.
1. HTML: The Fundamentals
What is HTML?
HTML is a markup language used to structure web pages and web applications.
It uses a system of tags (also known as elements) to describe content, such as text,
links, images, and other media. These tags tell the browser how to display the
content.
Basic Structure of an HTML Document
Every HTML document follows a standard structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Notes By:- Amol Gaikwad 1
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Key Parts of an HTML Document:
1. <!DOCTYPE html>: Defines the document type as HTML5. In older
versions, the doctype was longer and more complex.
2. <html>: The root element of the document. All other elements are nested
inside this tag.
3. <head>: Contains metadata about the document, such as the title, character
encoding, and links to stylesheets or scripts.
4. <meta charset="UTF-8">: Specifies the character encoding (UTF-8) to
support a wide range of characters.
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures that the page is responsive to different screen sizes,
especially mobile devices.
6. <title>: Sets the title of the page that appears in the browser tab.
7. <body>: Contains all the visible content of the webpage, such as headings,
paragraphs, images, and links.
Notes By:- Amol Gaikwad 2
Common HTML Elements
HTML elements (tags) are used to define different types of content on a webpage.
Here are some of the most common elements:
1. Headings: <h1> to <h6> elements are used to create headings of different
sizes, <h1> being the largest and most important, while <h6> is the
smallest.
html
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
2. Paragraphs: <p> is used to define a block of text or a paragraph.
html
<p>This is a paragraph of text.</p>
3. Links: <a> is used to create hyperlinks. The href attribute specifies the
URL of the page the link goes to.
html
Copy code
<a href="[Link] Example</a>
4. Images: <img> embeds images on a webpage. The src attribute defines the
image source, and alt provides alternative text for accessibility.
html
Copy code
<img src="[Link]" alt="A descriptive text about the image">
5. Lists: HTML allows both ordered (numbered) and unordered (bulleted)
lists.
o Ordered list: <ol> with <li> for list items.
html
<ol>
<li>First item</li>
<li>Second item</li>
Notes By:- Amol Gaikwad 3
</ol>
o Unordered list: <ul> with <li> for list items.
html
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
6. Forms: HTML forms are used to collect user input. Key form elements
include <form>, <input>, <textarea>, <button>, and more.
html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
Notes By:- Amol Gaikwad 4
Attributes in HTML
Attributes are used to provide additional information about an HTML element.
They are always specified in the opening tag and follow the format:
attribute="value". For example:
href in <a href="[Link] Defines the link destination.
src in <img src="[Link]">: Defines the image file location.
alt in <img alt="Description">: Provides alternative text for an image.
HTML Entities
Special characters in HTML need to be represented by entities (e.g., < for <,
> for >, & for &, etc.). This ensures that the browser does not interpret
them as actual HTML code.
HTML Comments
You can include comments in HTML that will not be displayed in the browser
using <!-- comment here -->.
2. HTML5: The Major Upgrade
HTML5, the latest version of HTML, introduces new elements, attributes, and
features designed for modern web development, emphasizing support for
multimedia, mobile devices, and interactivity without relying on plugins like
Flash.
Key Features of HTML5
2.1. Simplified Doctype Declaration
HTML5 simplified the doctype declaration to just:
html
Copy code
<!DOCTYPE html>
Notes By:- Amol Gaikwad 5
In earlier versions of HTML, the doctype was more complex.
2.2. New Semantic Elements
HTML5 introduced semantic elements that clearly define the structure of web
content. These elements improve the readability of the code, enhance
accessibility, and provide more meaningful structure to the content for search
engines.
<header>: Defines the header section of a document or section.
html
Copy code
<header>
<h1>Website Title</h1>
<nav>Navigation links go here</nav>
</header>
<nav>: Defines a navigation section for links.
html
Copy code
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<article>: Defines an independent, self-contained content section.
html
<article>
<h2>Article Title</h2>
<p>This is an article's content.</p>
</article>
Notes By:- Amol Gaikwad 6
<section>: Represents a thematic grouping of content, typically with a
heading.
html
<section>
<h2>Section Title</h2>
<p>Content for this section goes here.</p>
</section>
<footer>: Defines the footer section of a document or section.
html
<footer>
<p>Footer content goes here.</p>
</footer>
<aside>: Defines content related to the main content, such as a sidebar.
html
Copy code
<aside>
<h3>Related Information</h3>
<p>This is a sidebar with related content.</p>
</aside>
<main>: Specifies the main content of a document, typically unique to the
document.
html
<main>
<h1>Main Content Area</h1>
<p>This is where the primary content goes.</p>
</main>
2.3. Multimedia Support
Notes By:- Amol Gaikwad 7
HTML5 introduced native support for multimedia without the need for external
plugins like Flash.
Audio Element: Embeds audio directly in the page.
html
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video Element: Embeds video directly in the page.
html
<video controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
2.4. Forms Improvements
HTML5 introduced new input types and attributes that significantly enhance form
usability:
New Input Types: email, url, number, date, range, color, search, etc.
html
<form>
<input type="email" placeholder="Enter your email">
<input type="url" placeholder="Enter your website URL">
</form>
New Form Attributes:
o placeholder: Displays a short hint in the input field.
o required: Specifies that the input field is mandatory.
o autofocus: Automatically focuses on an input field when
html
Notes By:- Amol Gaikwad 8
Copy code
<form>
<input type="text" placeholder="Enter your name" required autofocus>
<input type="email" placeholder="Enter your email">
</form>
Pattern Attribute: Allows for the use of regular expressions to validate
the format of the input field.
Html:-
<input type="text" pattern="[A-Za-z]{3,}" title="Only alphabets (at least 3
characters)">
These form enhancements in HTML5 make it easier for developers to create user-
friendly forms with built-in validation without relying on JavaScript for basic
tasks like checking if a field is filled in or if the email is in the correct format.
2.5. APIs in HTML5
HTML5 comes with several new JavaScript APIs that allow for more interactive
and dynamic web applications. These APIs are directly integrated into HTML5,
making them much easier to use and eliminating the need for third-party plugins.
Some important APIs introduced in HTML5 include:
Geolocation API: Allows web applications to access the geographical
location of the user, with their permission.
javascript
if ([Link]) {
[Link](function(position) {
[Link]("Latitude: " + [Link]);
[Link]("Longitude: " + [Link]);
});
}
Notes By:- Amol Gaikwad 9
Local Storage and Session Storage: These are storage solutions that allow
web applications to store data in the browser without using cookies. Local
storage persists even after the browser is closed, while session storage is
cleared when the session ends (i.e., when the browser tab is closed).
javascript
// Storing data
[Link]('username', 'John');
// Retrieving data
let user = [Link]('username');
// Removing data
[Link]('username');
Canvas API: The <canvas> element, combined with JavaScript, allows
developers to draw 2D graphics directly onto the webpage. It's used for
rendering complex graphics and animations, as well as for gaming.
html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let canvas = [Link]('myCanvas');
let ctx = [Link]('2d');
[Link] = 'red';
[Link](10, 10, 150, 75);
</script>
Drag-and-Drop API: Provides an easy way to implement drag-and-drop
functionality in web applications.
html
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me!</div>
Notes By:- Amol Gaikwad 10
<script>
function drag(ev) {
[Link]("text", [Link]);
}
</script>
Web Workers API: Allows developers to run JavaScript code in the
background without affecting the performance of the page. Web Workers
are useful for tasks that require heavy computation.
javascript
let worker = new Worker("[Link]");
[Link]("Start computation");
[Link] = function(event) {
[Link]("Result: " + [Link]);
};
WebSocket API: Provides a way to establish a two-way communication
channel between the browser and server, allowing for real-time data
transfer (e.g., chat applications, live updates).
javascript
let socket = new WebSocket("[Link]
[Link] = function() {
[Link]("Hello Server");
};
[Link] = function(event) {
[Link]("Message from server: " + [Link]);
Notes By:- Amol Gaikwad 11
};
File API: Allows web applications to interact with files on the user’s
computer, making it possible to upload files to the server, or read and
manipulate files locally in the browser.
html
<input type="file" id="fileInput">
<script>
[Link]('fileInput').addEventListener('change',
function(event) {
let file = [Link][0];
let reader = new FileReader();
[Link] = function(e) {
[Link]([Link]);
};
[Link](file);
});
</script>
2.6. Responsive Web Design Support
HTML5, along with CSS3, supports responsive web design, which ensures that
websites look and function well on all devices (desktops, tablets, smartphones,
etc.).
The Viewport Meta Tag: This tag ensures that web pages scale properly
on different devices, especially mobile devices.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Media Queries: Media queries in CSS allow developers to apply different
styles based on the characteristics of the user's device (screen width,
resolution, etc.). This is a core part of responsive design.
Notes By:- Amol Gaikwad 12
css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
With HTML5 and CSS3, developers can create adaptive layouts, meaning that
the website adjusts its design and content to provide the best user experience
across a wide range of devices and screen sizes.
2.7. Deprecated Features in HTML5
HTML5 also deprecates or removes several elements and attributes that were
common in older versions of HTML. This is part of its effort to modernize web
development and reduce reliance on features that have been replaced by more
modern techniques, particularly CSS for styling.
Deprecated Tags:
o <font>: Used to change font style and size (now done through CSS).
o <center>: Used to center elements (now done through CSS).
o <big>, <small>: Used to increase or decrease font size (now done
through CSS).
o <acronym>: Replaced by <abbr>.
o <basefont>, <strike>, <tt>: All deprecated in favor of CSS styling.
Deprecated Attributes:
o align, bgcolor, border on elements like <table>, <img>, and others
are replaced by CSS properties like text-align, background-color,
and border.
Using these deprecated elements in HTML5 will not cause the page to break, but
it is strongly recommended to use modern techniques (primarily CSS) for styling
and layout.
Notes By:- Amol Gaikwad 13
3. Conclusion: HTML vs. HTML5
HTML5 marks a significant evolution from its predecessors, bringing the web in
line with modern standards. It does this through a combination of semantic
elements, multimedia support, and APIs that allow for more dynamic,
interactive, and accessible web applications.
Key Differences Between HTML and HTML5:
Doctype Declaration: HTML5 simplified the doctype to <!DOCTYPE
html>.
Semantic Elements: HTML5 introduces semantic elements like <header>,
<footer>, <nav>, <article>, and <section>, which make the content more
meaningful and structured.
Multimedia: HTML5 provides native support for audio, video, and canvas
graphics, whereas older versions of HTML required external plugins (e.g.,
Flash) to handle multimedia.
APIs: HTML5 comes with built-in JavaScript APIs like Geolocation, Web
Workers, Web Storage, and WebSockets, which enable more interactive
and dynamic web applications.
Mobile and Responsive Design: HTML5, combined with CSS3, is
optimized for mobile and responsive web design, ensuring that websites
look and perform well across various screen sizes and devices.
Deprecated Features: HTML5 removes outdated elements and attributes
that are now handled by CSS and modern JavaScript, encouraging
developers to adopt best practices.
Why HTML5 Matters Today
HTML5 is essential for building modern web applications that are:
Cross-platform: HTML5 is supported on all modern web browsers and
works seamlessly across desktops, tablets, and smartphones.
Multimedia-rich: With built-in support for audio, video, and graphics,
HTML5 enables a richer user experience without relying on plugins.
Efficient: HTML5 is designed to be lightweight and efficient, making web
applications faster and more responsive.
Notes By:- Amol Gaikwad 14
Accessible: By using semantic elements and following best practices,
HTML5 makes web content more accessible to users with disabilities and
more understandable to search engines.
In conclusion, whether you’re building a simple static web page or a complex
web application, HTML5 provides the tools you need to create efficient,
interactive, and accessible websites that cater to the demands of today’s users and
devices.
Notes By:- Amol Gaikwad 15