You're reading for free via habtesoft's Friend Link. Become a member to access the best of Medium.

Member-only story

Advanced HTML in 10 Minutes

habtesoft
3 min readOct 25, 2024

If you’re comfortable with basic HTML elements like <div>, <p>, and <img>, it’s time to level up! Advanced HTML introduces techniques and elements that enhance accessibility, SEO, interactivity, and performance of your web pages. In this quick guide, we’ll explore key advanced HTML concepts you can start using right away.

Not a Medium member? Read this article here

1. Semantic HTML for Better SEO and Accessibility

Semantic HTML adds meaning to your content, making it easier for search engines and screen readers to understand your site.

Examples of Semantic Elements:

<article>   <!-- Represents a self-contained content piece -->
<section> <!-- Groups related content -->
<aside> <!-- Sidebar content, like ads or links -->
<nav> <!-- Navigation links -->
<footer> <!-- Footer of a page or section -->

Example:

<article>
<h2>Breaking News</h2>
<p>This is a self-contained news article.</p>
</article>

<aside>
<h3>Related Articles</h3>
<p>Explore more on this topic.</p>
</aside>

<footer>Copyright © 2024</footer>

Why use Semantic HTML?

  • Improves SEO by making content easier to index.
  • Enhances accessibility for screen readers.

2. Custom Data Attributes (data-*)

Use custom data-* attributes to store extra information on HTML elements without affecting layout or style.

<button data-product-id="123">Add to Cart</button>

<script>
const button = document.querySelector('button');
console.log(button.dataset.productId); // Output: 123
</script>

This technique is useful for passing data between HTML and JavaScript.

3. Using picture and source for Responsive Images

Modern websites need images that adapt to different devices. HTML provides the <picture> element to serve different image formats based on the user's device or screen size.

<picture>
<source media="(min-width: 800px)" srcset="large-image.jpg">
<source media="(min-width: 400px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Responsive image">
</picture>

4. Forms with HTML5 Enhancements

HTML5 provides input types that validate user data effortlessly, improving user experience.

<form>
<label for="email">Email:</label>
<input type="email" id="email" required>

<label for="birthday">Birthday:</label>
<input type="date" id="birthday">

<button type="submit">Submit</button>
</form>
  • Input types like email, number, and date reduce the need for custom JavaScript validation.
  • Use the required attribute to enforce field completion.

5. Interactive Content with <details> and <summary>

Add collapsible content using the <details> element, which creates a simple accordion-style toggle.

<details>
<summary>More Information</summary>
<p>This section expands when clicked!</p>
</details>

This is great for FAQs and hiding less critical content.

6. Embedding External Content with <iframe>

Use <iframe> to embed other web pages or services, such as Google Maps or YouTube videos.

<iframe 
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allowfullscreen>

</iframe>

7. Meta Tags for SEO and Social Sharing

Use <meta> tags in your <head> to improve SEO and control how your content appears when shared.

<head>
<meta charset="UTF-8">
<meta name="description" content="Learn advanced HTML in 10 minutes.">
<meta property="og:title" content="Advanced HTML Guide">
<meta property="og:image" content="thumbnail.jpg">
</head>

8. Web Components (Custom HTML Elements)

Create reusable HTML components using Web Components.
Here’s a simple example using a custom element.

<my-button></my-button>

<script>
class MyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `<button>Click Me!</button>`;
}
}
customElements.define('my-button', MyButton);
</script>

9. Accessibility with ARIA (Accessible Rich Internet Applications)

ARIA attributes improve accessibility for interactive elements.

<button aria-label="Close menu" onclick="toggleMenu()">X</button>

10. Performance Optimization with defer and async Scripts

Control when your scripts run to improve page load times.

<script src="script.js" defer></script>  <!-- Runs after HTML parsing -->
<script src="analytics.js" async></script> <!-- Runs as soon as it loads -->

Conclusion

Mastering advanced HTML techniques ensures your websites are responsive, accessible, and performant. With just 10 minutes of learning, you can now leverage semantic elements, custom attributes, responsive images, and more to build more effective and efficient web pages.

Happy coding! 🎉

habtesoft
habtesoft

Written by habtesoft

Passionate JavaScript developer with a focus on backend technologies. Always eager to connect and learn. Let’s talk, https://buymeacoffee.com/habtesoftat

Responses (1)

What are your thoughts?