Forms, Media, Semantic HTML, and HTML APIs

In the previous blog, we introduced the basics of HTML, guiding you through your first webpage. Now, let’s go a little deeper into the world of HTML by exploring advanced concepts like forms, embedding media, APIs, and using semantic HTML. These skills are essential if you want to create user-friendly, interactive, and accessible web pages.

Working with Forms in HTML

Forms are one of the most important parts of any website, allowing you to gather user data such as names, emails, or feedback. Understanding forms is essential for any web developer, especially when you want to create registration forms, search boxes, or contact pages.

Example of a simple form

<form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br> <input type="submit" value="Send Message"> </form>

Explanation

<form>: The main tag that wraps the form. <label>: Describes the input field. <input>: Creates fields like text boxes or emails. <textarea>: Creates a large text box for user input. <input type="submit">: A button that submits the form.

Embedding Media in Your Webpage

Adding media, such as images, videos, and audio, can make your webpage more engaging. HTML provides easy-to-use tags to embed various media formats.

Adding Images:

We’ve already seen how to add images in the previous blog, but here’s a quick recap:

Remember to always include the alt attribute to provide a description of the image. This helps improve accessibility and ensures users with visual impairments can still understand your content.

Embedding Videos

HTML makes it simple to embed videos using the video tag.

Example

<video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

Explanation

<video>: Defines the video element. <source>: Specifies the path to the video file. controls: Adds play, pause, and volume controls to the video.

Similarly, the audio tag lets you embed sound files:

<audio controls> <source src="song.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>

Embedding media is a great way to enhance the user experience.

Semantic HTML – The Key to Meaningful Web Pages

One of the most important things you’ll learn as you advance is semantic HTML. Semantic tags provide meaning to the web content, making it easier for search engines and browsers to understand the structure of the page.

Some common semantic tags

header: Represents the top section or introductory part of a webpage.
nav: Represents a navigation section with links.
article: Represents a self-contained piece of content like an article or blog post.
section: Defines sections of the content.
footer: Represents the bottom section or footer of a webpage.

Example:

<header> <h1>Welcome to CredoSystemz!</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#courses">Courses</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </nav> </header> <section> <article> <h2>About Our Web Development Courses</h2> <p>At CredoSystemz, we offer in-depth web development courses that teach HTML, CSS, and JavaScript from scratch.</p> </article> </section> <footer> <p>© 2024 CredoSystemz. All rights reserved.</p> </footer>

Why Use Semantic HTML

Better Accessibility: Screen readers can easily navigate and understand your webpage.
Improved SEO: Search engines prioritize pages with well-structured content.
Cleaner Code: Semantic tags make your code easier to read and maintain.

Advanced HTML Input Types

HTML has evolved to include many types of input fields that improve the user experience. Some of the most useful ones include:

● <input type="date">: Allows users to select a date. ● <input type="range">: Adds a slider for choosing a value between a range. ● <input type="color">: Let users pick a color from a color picker.

Example:

<form> <label for="date">Select a date:</label> <input type="date" id="date" name="date"><br> <label for="quantity">Choose a value:</label> <input type="range" id="quantity" name="quantity" min="1" max="100"><br> <label for="favcolor">Choose a color:</label> <input type="color" id="favcolor" name="favcolor"><br> </form>

By using advanced input types, you create a more interactive and user-friendly experience.

HTML IFrames

IFrames are used to embed another HTML document within your webpage. This is useful when you want to show external content, like a YouTube video or another website.

Example:

IFrames are powerful but should be used sparingly to avoid slowing down your page.

HTML APIs – Extending HTML’s Functionality

As you progress in web development, you’ll come across the term API, which stands for Application Programming Interface. HTML5 introduced several APIs that allow you to interact with browsers and provide more dynamic, feature-rich experiences on your web pages. While APIs might sound intimidating, they are actually quite straightforward once you understand the basics.

Let’s explore some commonly used HTML APIs.

Geolocation API

The Geolocation API allows your website to access the user’s location, provided the user grants permission. This can be useful for applications like weather updates, location-based services, or finding nearby stores.

Example

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { document.getElementById(“location”).innerHTML = “Latitude: ” + position.coords.latitude + “<br>Longitude: ” + position.coords.longitude; }); } else { document.getElementById(“location”).innerHTML = “Geolocation is not supported by this browser.”; }

Explanation

navigator.geolocation.getCurrentPosition(): This method gets the current position of the user. If the user allows access, the position object will provide latitude and longitude data.

Add the following HTML to display the result:

<p id="location">Click the button to get your location.</p> <button onclick="getLocation()">Get Location</button>.

Drag and Drop API

The Drag and Drop API allows you to create draggable elements on a web page. This API can be used to make interactive web applications like file upload interfaces, gaming interfaces, or custom UIs.

Example of a draggable element

<div id="dragElement" draggable="true" ondragstart="drag(event)">Drag me!</div> <div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)"> Drop here! </div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script>

Explanation

draggable=”true”: Makes an element draggable.

ondragstart, ondrop, and ondragover: Event handlers that manage the dragging and dropping functionality.

Web Storage API

The Web Storage API provides a way to store data in the browser. This API is useful for saving user preferences, session data, or even small amounts of data that you don’t want to send to the server.

It includes two storage types

Local Storage: Stores data with no expiration date.
Session Storage: Stores data that is deleted when the browser session ends.

Example of using Local Storage

// Save data to localStorage localStorage.setItem(“username”, “JohnDoe”); // Retrieve data document.getElementById(“displayUser”).innerHTML = localStorage.getItem(“username”);

Add this HTML to display the stored username:

HTML5 Canvas API

The Canvas API allows you to draw shapes, graphs, and even create simple animations on your webpage. It’s a powerful tool for adding visual content dynamically without needing additional plugins.

Example of how you can create a simple rectangle using the Canvas API:

<canvas id="myCanvas" style="border:1px solid #000;"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(20, 20, 150, 75); </script>

Explanation

canvas: This HTML element is used as a drawing area. In JavaScript, we obtain a drawing context with getContext(“2d”), which allows us to draw 2D shapes.
fillRect(): This method is used to draw a filled rectangle.

Conclusion

By mastering advanced HTML topics like forms, media, semantic HTML, APIs, and IFrames, you’re preparing yourself to create feature-rich and interactive web pages. HTML APIs, in particular, offer tremendous flexibility to make web applications smarter and more engaging for users.

Request more information

Forms, Media, Semantic HTML, and HTML APIs