Dev.to

Why HTML Exists—And What Most Developers Miss

I’ve witnessed many people treat HTML as just a content container, but that’s only one part of what HTML is really about. I used to think of it that way myself—though not entirely—when I built my Tic Tac Toe game. I used a element for clicking to get X or O instead of a element. It worked fine—the app ran without issues—but when it comes to accessibility, things look different. When people with disabilities try to use my app with a screen reader, it doesn't work. The screen reader skips those 9 elements because they contain no text and no ARIA labels. When users try to navigate using the keyboard, they can't. That's because elements—like many HTML elements—are not part of the default tab order. They aren't focusable with the Tab key. To make them keyboard-accessible, you must add the attribute tabindex="0". This small Tic Tac Toe example—a drop in the vast ocean of HTML—shows us that HTML is far more than just a content wrapper. The purpose of this article is to give you a broad overview of HTML, so you can include all essential features in your web pages. For example: for better search visibility—SEO, for accessibility—ARIA labels, and more. At the end of this article, you’ll find 5 quizzes designed to strengthen your understanding of HTML’s true purpose. Each quiz comes with detailed solutions and explanations to deepen your insight. I’ve also added a “Things to Keep in Mind” section—your quick guide to remembering what truly matters when writing clean, semantic, and accessible HTML. Let's dive in! What is HTML? HTML stands for HyperText Markup Language. It's the standard language used to create and structure content on the web. HTML isn't a programming language but a markup language used to define elements like headings, paragraphs, images, links, and more. Key Points: Structure: HTML builds the structure of a webpage using tags like , , , and others. HyperText: Allows linking to other documents or different parts of the same document via hyperlinks (). Markup: Means wrapping content in tags to give it structure and meaning—like bold text, lists, images, and so on. Basic Example of HTML: Simple HTML Page Welcome to My Website This is a paragraph of text. Click here to visit Example Breakdown: : Root element of the web page. : Contains metadata like title, character encoding, etc. : Holds the visible content like headings, text, and links. : Indicates the main heading. : Represents a paragraph. : Defines a hyperlink. Why Does HTML Exist? The Core Reason: HTML (HyperText Markup Language) exists to structure content on the web. It forms the skeleton of every webpage, telling browsers what to display and how different elements relate to one another. The Origin Story: In the early '90s, Sir Tim Berners-Lee (the inventor of the web) needed a way to share and connect scientific documents across computers. He created HTML as a simple markup language to: Add headings, paragraphs, lists, etc. Link documents through hypertext (hence the name). What HTML Does: Structures text, media, and interactive components. Uses semantic tags (, , , etc.) to add meaning. Works with CSS for styling and JavaScript for behavior. Enables accessibility and searchability. Without HTML: Browsers wouldn't know how to display content. The web would be plain, unreadable text. There would be no websites, just scattered, unstructured data. So, simply put: HTML makes the web usable, organized, and meaningful. Without it, the internet as we know it wouldn't exist—it'd be like reading a book with no chapters, no titles, and no structure. When you dig deeper, you'll see that HTML's real purpose is to make the web meaningful. But for whom? And how? Let's move on. HTML Exists to Make the Web Meaningful—But For Whom? 1. For Humans (Web Users): HTML helps present content in a way that's easy to read and navigate, improving user experience. A well-structured page helps users locate and understand information effortlessly. For developers (like you!), HTML's clear layout makes it easier to read and maintain the code. It uses intuitive text-based tags, simplifying development. The layout resembles plain text, making it easy to update or fix. Here's an example: Welcome to My Website This is a paragraph of text explaining what the website is about. Click here to learn more Even if you're new to coding, you can tell what each element means—it's human-readable. 2. For Machines (Browsers, Search Engines, etc.): When we say HTML is machine-readable, we mean that browsers, search engines, and assistive technologies can interpret its structure and content without needing a visual layout. Structure and Rendering: Browsers read HTML to determine how to render and structure content. For instanc

May 8, 2025 - 03:51
 0
Why HTML Exists—And What Most Developers Miss

I’ve witnessed many people treat HTML as just a content container, but that’s only one part of what HTML is really about. I used to think of it that way myself—though not entirely—when I built my Tic Tac Toe game.

I used a

element for clicking to get X or O instead of a
  • Accessibility: HTML supports features like alt text, keyboard navigation, and ARIA labels, making the web inclusive and usable for people with disabilities.
  • Example: Adding an alt attribute to an image ensures screen readers can describe it to users. 
 src="logo.png" alt="Company Logo">

2. For Machines (Browsers, Search Engines, etc.):

HTML isn't just for human eyes. It plays a critical role in helping machines understand, process, and present web content accurately. This enables browsers to render pages, search engines to index content, screen readers to describe interfaces to users with disabilities, and more.

1. Accessibility (a11y)

HTML allows assistive technologies—like screen readers—to interpret content and interactions for users with disabilities. Without proper markup, these users would be left out.

1.1 ARIA (Accessible Rich Internet Applications) Attributes

  • ARIA attributes help bridge gaps where native HTML elements don't provide enough semantic meaning.
  • Examples include aria-label, aria-hidden, aria-live, aria-expanded, etc. 
 aria-label="Close menu">✖
  • aria-label gives a custom name to elements.
  • aria-hidden="true" hides elements from screen readers.
  • aria-live="polite" announces dynamic content changes.

Note: Use ARIA only when semantic HTML doesn't suffice—native elements are preferred for accessibility.

1.2 Proper Labeling with and Form Controls

Associating elements with ,