124 HTML Today and Tomorrow — Why the Foundation of the Web Still Matters

The Technologies That Built the Web

HTML is the oldest member of the modern browser trio.

HTML provides structure and meaning.

CSS provides presentation and layout.

JavaScript provides behavior and interactivity.

Because HTML has been around since the beginning of the World Wide Web, it can sometimes seem like the least exciting of the three.

That would be a mistake.

Modern HTML continues to evolve.

Browsers understand more about the meaning of documents.

Forms are more capable.

Images are more adaptable.

Audio and video are built into the platform.

Interactive elements that once required custom JavaScript can increasingly be created with native HTML.

And as search engines, accessibility tools, automated systems, and artificial intelligence attempt to understand web content, meaningful HTML may become even more important.

HTML Is Not Just What the Page Looks Like

One of the most important ideas in modern web development is that HTML should not primarily describe appearance.

A heading is not simply large bold text.

A navigation area is not simply a row of links.

A button is not simply a rectangle that responds when clicked.

HTML describes what these things are.

CSS can determine how they look.

JavaScript can enhance what they do.

But HTML establishes their fundamental meaning.

Semantic HTML

Semantic HTML means choosing elements according to the meaning and purpose of the content.

Modern HTML includes elements such as:

• <header>
• <nav>
• <main>
• <article>
• <section>
• <aside>
• <footer>
• <figure>
• <time>

These elements provide information beyond visual appearance.

They help describe the organization of the document.

Why Meaning Matters

A human visitor can often determine meaning visually.

We see large text and recognize a heading.

We see a row of links and recognize navigation.

We see a rectangular control and recognize a button.

But software does not necessarily interpret appearance the way a person does.

Browsers, search engines, screen readers, automated tools, and artificial intelligence benefit from explicit structure.

HTML provides that structure.

A Button Should Usually Be a Button

Modern websites sometimes create controls from generic elements such as <div> or <span> and then use JavaScript to make them clickable.

That can work visually.

But HTML already has a button element.

A real <button> comes with useful browser behavior.

It can receive keyboard focus.

It responds appropriately to keyboard interaction.

Assistive technology understands that it is a button.

The browser already knows what it is supposed to do.

Recreating all of that behavior manually is often unnecessary.

Use the Native Element First

This leads to a powerful principle:

Before building something with JavaScript, ask whether HTML already knows how to do it.

Native HTML usually provides better browser integration.

It may require less code.

It often improves accessibility.

It usually requires less maintenance.

And it benefits automatically as browsers improve their implementation.

HTML and Accessibility

Accessibility is one of the strongest reasons to understand modern HTML.

Semantic elements provide information that assistive technologies can use.

Headings establish document structure.

Labels identify form controls.

Buttons identify actions.

Links identify navigation to resources.

Lists identify collections of related items.

Tables describe relationships between tabular data.

Landmark elements help identify major regions of a page.

Good HTML provides accessibility before we add anything special.

ARIA Is Important, But HTML Comes First

ARIA — Accessible Rich Internet Applications — provides additional accessibility information when native HTML alone cannot adequately describe an interface.

ARIA is extremely valuable.

But it should not automatically replace native HTML semantics.

If HTML already provides an element with the correct meaning and behavior, that element is often the better starting point.

ARIA can enhance semantics.

It does not mean we should ignore the semantics HTML already provides.

Heading Structure Still Matters

Headings are not simply typography.

They describe the organization of a document.

A logical heading hierarchy helps visitors scan the page.

It helps screen-reader users navigate sections.

It helps search engines and automated systems understand how information is organized.

CSS can make any text visually large.

That does not make it a heading.

HTML establishes the structure.

Links and Buttons Are Different

Another useful semantic distinction is the difference between links and buttons.

A link generally takes the visitor somewhere.

A button generally performs an action.

They can be styled to look similar if the design requires it.

But their underlying purposes remain different.

Choosing the appropriate element gives the browser and the visitor the expected behavior.

Forms Have Become Smarter

Forms are one of the oldest interactive parts of HTML.

Modern HTML forms are much more capable than their early ancestors.

Input types can identify different kinds of information:

• Email addresses
• Telephone numbers
• Numbers
• Dates
• Times
• Ranges
• URLs
• Search fields
• Colors

When the browser knows what kind of information is expected, it can provide appropriate behavior.

HTML Can Improve the Mobile Keyboard

This becomes especially useful on phones.

If an input expects an email address, the browser can present a keyboard designed to make entering an email address easier.

If the field expects a telephone number, the device can provide a more appropriate keypad.

The developer describes the meaning.

The browser chooses an interface appropriate for the device.

That is a perfect example of the web platform working as intended.

Built-In Validation

HTML can also perform certain forms of validation.

A field can be required.

A value can have minimum and maximum limits.

Text can be checked against certain patterns.

Email fields can receive basic email-format validation.

This does not eliminate the need for server-side validation.

Anything important must still be validated on the server.

Client-side validation improves the experience.

Server-side validation protects the application and its data.

HTML Can Reduce JavaScript

Forms demonstrate a larger trend.

As HTML becomes more capable, developers can sometimes remove JavaScript that was previously necessary.

This can make pages:

• Smaller
• Faster
• More accessible
• More reliable
• Easier to maintain

The simplest code is often code we do not need to write.

details and summary

Consider expandable content.

Developers once routinely created an element, added JavaScript click handlers, changed CSS classes, tracked whether the section was open or closed, and implemented keyboard behavior.

Modern HTML provides <details> and <summary>.

The browser can provide an expandable disclosure interface directly.

CSS can style it.

JavaScript can enhance it if necessary.

But the fundamental behavior already exists.

The dialog Element

Dialog boxes provide another example.

Developers have built custom modal windows with JavaScript for many years.

Modern HTML includes the <dialog> element, which provides native support for dialog interfaces.

JavaScript may still be used to control when the dialog opens and closes, but the browser understands more of the underlying behavior.

The platform is absorbing patterns developers previously had to recreate themselves.

Native HTML Is Getting More Interactive

This does not mean JavaScript is becoming unnecessary.

It means the boundary is moving.

HTML increasingly handles standard interface structures and behaviors.

CSS increasingly handles visual states, transitions, layouts, and responsive behavior.

JavaScript can concentrate on interactions that genuinely require programming.

That produces a cleaner division of responsibility.

Responsive Images

Images create an interesting challenge on the modern web.

A large desktop display may benefit from a high-resolution image.

A phone may not need to download that same enormous file.

Different screen shapes may also benefit from different image compositions.

Modern HTML provides capabilities such as srcset, sizes, and the <picture> element.

These allow developers to provide multiple image possibilities.

The browser can then select an appropriate resource.

Let the Browser Help

This resembles the direction we observed in modern CSS.

Instead of trying to predict every possible device ourselves, we provide the browser with useful choices and rules.

The browser knows important information about the visitor's environment.

It can participate in the decision.

Modern web development increasingly involves telling the browser what we need rather than micromanaging exactly how it must achieve it.

Lazy Loading

HTML can also help improve page performance through features such as native lazy loading for images and certain embedded content.

A browser may postpone loading an off-screen resource until the visitor approaches it.

This can reduce unnecessary network traffic and speed initial page loading.

Techniques that once required custom JavaScript can increasingly be expressed directly in HTML.

Audio and Video

Native audio and video remain important examples of the modern web platform.

There was a time when multimedia commonly required plugins.

Today HTML provides native <audio> and <video> elements.

The browser provides much of the playback infrastructure.

CSS can influence presentation.

JavaScript can add advanced controls when needed.

Again, the layers work together.

HTML and Performance

HTML itself is usually relatively lightweight.

But the way HTML references other resources can strongly affect performance.

Images can be optimized.

Scripts can be loaded thoughtfully.

Resources can be prioritized.

Unnecessary embeds can be avoided.

Metadata can help the browser make better decisions.

Performance is not solely a JavaScript or server problem.

The document itself participates in the loading strategy.

HTML and Search Engines

Search engines do not merely see a screenshot of a webpage.

They analyze the document and its relationships.

The page title matters.

Headings matter.

Links matter.

Alternative text matters.

Document structure matters.

Good HTML helps explain what the page contains.

Search optimization begins with making the information understandable.

Metadata

The HTML document's <head> contains information that may not appear directly as part of the visible page.

This can include the page title, character encoding, viewport instructions, descriptions, references to style sheets, icons, and other metadata.

This information helps browsers, search engines, social platforms, and other systems understand how the document should be handled.

The invisible parts of HTML can be just as important as the visible ones.

Structured Data

Websites can also provide additional machine-readable information describing their content.

Structured data can help identify things such as organizations, products, events, articles, recipes, people, and other entities.

This information goes beyond visual presentation.

It helps software understand what the information represents.

That idea is becoming increasingly important.

The Web Has Two Audiences

We often think of a webpage as something created for a person.

But webpages are also read by machines.

Search engines read them.

Screen readers interpret them.

Browsers analyze them.

Archiving systems preserve them.

Automated services process them.

And increasingly, artificial-intelligence systems retrieve and interpret them.

Good HTML serves both audiences.

HTML in the Age of AI

Artificial intelligence creates an interesting new reason to care about document structure.

An AI system attempting to understand a webpage benefits when the page clearly identifies its information.

A heading should actually be a heading.

Navigation should be identifiable.

Main content should be distinguishable from surrounding material.

Lists should be lists.

Tables should represent actual tabular information.

HTML can provide clues about the relationships between pieces of information.

Semantic HTML May Become More Valuable, Not Less

It might be tempting to assume that increasingly intelligent AI systems will make structured markup less important.

The opposite may often be true.

AI can attempt to infer structure from visual presentation and surrounding context.

But why force it to guess when the document can state the structure directly?

Meaningful markup gives machines better information to work with.

The better structured the source, the less inference may be required.

AI Will Write HTML

Artificial intelligence is already capable of generating HTML from ordinary-language instructions.

A developer can describe a page:

“Create an accessible contact form with name, email, telephone, message, and submit fields.”

An AI system can produce the initial markup almost instantly.

This dramatically lowers the effort required to create routine structures.

But generated markup still needs judgment.

Generated HTML Can Still Be Wrong

An AI system can create unnecessary div elements.

It can produce poor heading structure.

It can omit labels.

It can use a link when a button would be more appropriate.

It can create invalid nesting.

It can misunderstand the purpose of the content.

It can generate technically functional markup that is semantically weak.

The ability to generate HTML does not eliminate the value of understanding HTML.

Understanding Becomes the Quality Control

This follows the pattern we saw with JavaScript and CSS.

AI may reduce the importance of memorizing every detail of syntax.

But understanding the concepts becomes even more important.

Is this really a heading?

Is this navigation?

Should this be a button or a link?

Does this image need alternative text?

Is this table actually tabular data?

Is this form understandable without visual clues?

Those are questions about meaning.

AI can assist with them.

A knowledgeable human can evaluate the result.

HTML Is a Contract With the Browser

There is another useful way to think about HTML.

When we choose an HTML element, we are telling the browser something.

This is a heading.

This is a button.

This is a form.

This is an image.

This is navigation.

This is the main content.

Once the browser understands what something is, it can provide appropriate behavior and expose that information to other technologies.

HTML Is Also a Contract With the Future

A well-structured document can survive visual redesigns.

The CSS may be replaced.

The JavaScript may be rewritten.

The server may change.

The database may change.

The page may be displayed on devices that did not exist when it was written.

But meaningful content structure can remain useful.

That makes HTML remarkably durable.

Progressive Enhancement Begins With HTML

The progressive-enhancement philosophy begins with a strong foundation.

First, provide meaningful HTML.

Then use CSS to improve presentation.

Then use JavaScript to enhance behavior where appropriate.

This creates layers:

HTML → CSS → JavaScript

Each layer builds upon the previous one.

If the foundation is strong, everything above it becomes easier to reason about.

Do We Need So Many div Elements?

Generic containers remain useful.

Sometimes a <div> really is the correct element because no more meaningful semantic element applies.

But modern HTML gives developers more choices than early HTML did.

Before automatically creating another div, it can be useful to ask:

“What is this part of the page?”

If HTML has an element that answers that question, it may be a better choice.

Less Markup Can Be Better Markup

Modern CSS also reduces the need for excessive HTML wrappers.

Table layouts required large amounts of structural markup.

Float layouts often needed clearing elements or extra containers.

Modern Grid and Flexbox can frequently create sophisticated layouts from simpler document structures.

Cleaner HTML and more capable CSS complement one another.

The Separation Is Better Than Ever

We can now see why the evolution of HTML, CSS, and JavaScript is so interconnected.

As CSS became better at layout, HTML needed less presentation markup.

As HTML gained native interactive elements, JavaScript needed less custom interface code.

As JavaScript became more capable, applications could perform behaviors impossible with HTML alone.

The technologies evolved together.

HTML Does Not Need to Do Everything

That is an important part of HTML's strength.

HTML does not need to become CSS.

HTML does not need to become JavaScript.

It needs to describe documents and interfaces clearly enough that the other layers can do their jobs.

A good foundation does not need to be the entire building.

Web Components

Modern web standards also provide technologies for creating reusable custom components.

Web Components combine browser capabilities such as custom elements, templates, and encapsulated DOM structures.

They allow developers to create reusable interface components using native web-platform technologies.

This represents another direction for the future:

Some capabilities associated with frameworks can increasingly be expressed through browser standards themselves.

Browsers Keep Learning

This has been one of the recurring themes throughout our series.

Developers encounter a problem.

They create a workaround or library.

The solution becomes popular.

Standards developers learn from it.

Browsers eventually gain a native capability.

The platform becomes stronger.

HTML continues to participate in that process.

HTML Tomorrow

HTML's future probably will not involve suddenly becoming an entirely different language.

Its strength is continuity.

New elements and capabilities can be added carefully.

Browsers can become better at understanding semantic relationships.

Native interface controls can become more capable.

Accessibility can become more deeply integrated.

Images and media can become more responsive and efficient.

HTML can provide increasingly useful structure for automated systems and AI.

And old documents can continue working.

There May Never Need to Be an HTML6

The modern web increasingly follows a living-standard model.

Rather than waiting years for one giant new version number, HTML can evolve continuously.

That reflects a larger change in software development.

The web itself is continuously maintained.

There does not need to be one dramatic moment when the old HTML ends and a completely new HTML begins.

The foundation can evolve while remaining the foundation.

HTML and the Web's Long Memory

A webpage created decades ago may still open in a modern browser.

A webpage created today may still be useful decades from now.

That is an extraordinary characteristic for a technology platform.

HTML's simplicity, openness, text-based format, and commitment to backward compatibility give it unusual durability.

A plain HTML document may ultimately outlive many of the applications used to create it.

Simple HTML Is Powerful

Modern development culture can sometimes make websites appear to require enormous technical stacks.

But HTML reminds us of something important.

A useful website does not have to be complicated.

A well-structured document containing useful information, meaningful headings, good links, appropriate images, and accessible navigation can be an excellent website.

CSS can make it attractive.

JavaScript can enhance it.

PHP can make it dynamic.

MySQL can give it memory.

But the usefulness of the information remains central.

Content Still Matters

The earliest web was built around sharing information.

More than three decades later, that purpose remains.

People visit websites because they want something.

Information.

A product.

A service.

An answer.

A photograph.

A story.

A connection.

A website can use the most sophisticated technology available and still fail if it does not provide something useful to the visitor.

The Foundation Should Be Strong

This brings us back to HTML's role.

If the document is logically structured, everything built on top of it has a better starting point.

CSS has meaningful elements to style.

JavaScript has predictable controls to enhance.

Screen readers have useful structure to navigate.

Search engines have better information to interpret.

AI systems have clearer relationships to analyze.

The foundation matters.

The Technology Can Become Invisible Without Becoming Unimportant

A visitor may never know that a page uses <main>.

They may never know that the navigation uses <nav>.

They may never notice that a form field has a correctly associated label.

They may never think about heading hierarchy.

They may never inspect the alternative text on an image.

They simply experience a website that is understandable and usable.

Once again:

The technology can become invisible without becoming unimportant.

Use the Simplest Tool That Solves the Problem

Our recurring principle appears again.

If HTML can solve the problem, use HTML.

If CSS can handle the presentation, use CSS.

If JavaScript is needed for behavior, use JavaScript.

If the server needs to process information, use the appropriate server technology.

Do not recreate browser behavior merely because we can.

Do not add complexity simply because a modern tool exists.

Technology should serve the project. The project should not exist to serve the technology.

The Foundation Is Still There

Think about everything that can happen before a modern webpage appears.

DNS may locate the server.

TLS may create a secure connection.

Nginx or Apache may receive the request.

PHP may execute application logic.

MySQL may retrieve information.

Linux may support the entire server environment underneath it all.

Then the response crosses the internet.

The browser receives it.

And somewhere near the center of that response is something Tim Berners-Lee would recognize:

HTML.

More Than Thirty Years Later

The screens changed.

The networks became faster.

The servers became vastly more powerful.

The browsers became application platforms.

CSS became a sophisticated responsive design system.

JavaScript became a major programming language.

Databases grew enormous.

Cloud computing transformed infrastructure.

Artificial intelligence began helping humans create the web.

And still:

<h1> means heading.

<p> means paragraph.

<a> means connection.

Sometimes the technologies that last the longest are the ones built around the simplest ideas.

Where Do We Go Next?

We have now followed several major layers of the web.

Linux provides the operating environment.

Apache and nginx serve requests.

PHP performs server-side work.

MySQL remembers information.

HTML gives the document structure and meaning.

CSS gives it presentation and responsive layout.

JavaScript gives it behavior.

We are no longer looking at isolated technologies.

We are beginning to see a system.

And that opens the door to one of the most useful topics in this entire series:

How does all of this actually work together?

What really happens after someone types a web address into a browser and presses Return?

That journey will eventually connect nearly every technology we have explored.

And once we can follow that journey from beginning to end, the web stops looking like a collection of mysterious technologies.

It becomes a machine we can understand.