Hello everybody welcome back to my blog from today onwards I am starting a new series of web development in this series we are going to learn about all the fundamentals of web development, from HTML, CSS, JS, ReactJs, to everything I know so keep reading my blogs and you will surely get valuable information.
Okay, so now let's get started with HTML5 fundamentals.
HTML5 is the latest version of the Hypertext Markup Language (HTML), used to structure and display content on the web. Here are some of the fundamentals of HTML5:
Document structure: The basic structure of an HTML5 document includes the <!DOCTYPE html> declaration, <html> tags, <head> tags, and <body> tags.
Semantic elements: HTML5 introduced new semantic elements, such as <header>, <nav>, <main>, <footer>, and <article>, which provide more context and meaning to the content.
Audio and video: HTML5 includes built-in support for audio and video elements, which allow developers to embed multimedia content directly into web pages.
Forms: HTML5 includes new form input types, such as email, date, and range, as well as new attributes like required and autocomplete, which make it easier to build user-friendly forms.
Canvas: HTML5 includes the <canvas> element, which provides a way to draw graphics and animations on the web using JavaScript.
Accessibility: HTML5 includes several accessibility features, such as the <figcaption> element for image captions, the <mark> element for highlighting text, and the aria-label attribute for describing elements to assistive technologies.
Responsive design: HTML5 provides the tools necessary to build responsive web pages that adapt to different screen sizes, such as the <meta> viewport tag and the use of media queries in CSS.
Local storage: HTML5 includes the localStorage object, which allows developers to store data on the user's computer and retrieve it later, even after the browser is closed.
Web workers: HTML5 introduced web workers, which allow developers to run scripts in the background without blocking the main thread, improving performance and user experience.
Web sockets: HTML5 includes support for web sockets, which allow for real-time, bidirectional communication between the browser and server, enabling features such as chat applications and online gaming.
Okay, so this was just an overview now let's take a deep dive into all the points mentioned above.
Document structure: The structure of an HTML5 document is essential to organize and presenting content on the web. The <html> tag is the root element of an HTML document, and the <head> and <body> tags provide additional information about the document and contain the visible content, respectively. The <!DOCTYPE html> declaration is used to tell the browser which version of HTML is being used.
Semantic elements: Semantic elements in HTML5 provide a more meaningful way to structure content. For example, the <header> element defines the top section of a web page, while the <nav> element defines a navigation menu, making it easier for search engines to understand the content and improve accessibility.
Audio and video: HTML5 allows developers to include audio and video elements directly in web pages, without the need for third-party plugins like Flash. The <audio> and <video> tags support various formats and provide a consistent way to add multimedia content to web pages.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
</audio>
</body>
</html>
Forms: HTML5 introduced several new input types and attributes to make it easier for users to complete forms. For example, the email input type ensures that users enter a valid email address, while the required attribute ensures that users fill out all required form fields.
<form> <input name="q" placeholder="Go to a Website"> <input type="submit" value="Search"> </form>Canvas: The <canvas> element provides a way to draw graphics and animations on the web using JavaScript. Developers can use canvas to create interactive games, data visualizations, and other dynamic content.
<!DOCTYPE HTML> <html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id = "mycanvas" width = "100" height = "100"></canvas> </body> </html>Accessibility: HTML5 includes several new elements and attributes to improve accessibility for users with disabilities. For example, the <figcaption> element provides a way to add a caption to images, while the aria-label attribute provides a description of an element that can be read by assistive technologies.
Responsive design: With the rise of mobile devices, it's essential to build web pages that look and function well on screens of different sizes. HTML5 provides tools like the <meta> viewport tag and the use of media queries in CSS to make it easier to build responsive web pages.
Local storage: The localStorage object in HTML5 allows developers to store data on the user's computer and retrieve it later, even after the browser is closed. This is useful for creating web applications that work offline or improve performance by caching data locally.
Web workers: Web workers in HTML5 allow developers to run scripts in the background without blocking the main thread, improving performance and user experience. For example, a web worker can be used to perform a long-running task like image processing while the user continues to interact with the web page.
Web sockets: HTML5 includes support for web sockets, which enable real-time, bidirectional communication between the browser and server. Web sockets allow for features like chat applications and online gaming, where data needs to be transmitted quickly and reliably.
Here is the markup of how the HTML5 structure will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Markup for HTML5</title>
</head>
<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<nav>
<ul>
<li><a href = "https://kumarvaibhav.netlify.app/">My Portfolio</a></li>
<li><a href = "https://github.com/PrgVaibhav">Github id</a></li>
</ul>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p><a href = "www.google.com">Google web page</a></p>
</footer>
</body>
</html>
Thank you for reading, and if you reach this point and you got some knowledge from this article make sure to like and comment on this article 😊.