Three languages behind one page

HTML: what is on this page?

An article contains a heading, paragraphs, lists, and links°. HTML° identifies each part’s role. Choosing an element involves more than font size; a main heading has a different meaning from an ordinary paragraph.

For example, a real link can open in another tab and work from a keyboard. Text merely colored like a link may lack that behavior. Appropriate structure forms the foundation of an experience many people can use.

<h1>Curiosity</h1>
<p>One question opens a path.</p>
<a href="/lexicon/">Explore the concept dictionary</a>

CSS: how does it look?

CSS° gives that structure its appearance. It controls color, spacing, font sizes, and column arrangements. The appearance can adapt to screen width without changing the article’s content.

Imagine reading the same notes on a phone and a monitor. The text is unchanged, but the available space differs. Responsive layout lets readers follow a paragraph without scrolling sideways.

JavaScript: what can change?

JavaScript° can respond to readers’ actions. In Lucia, search filters a list as you type, and the theme button remembers your preference. These interactions enhance an already readable page.

Browser° creates a document representation called the DOM°. Scripts can interact with it, such as updating the search result count. The DOM differs from the HTML source file because a page’s state can change after loading.

Useful without every part

Not every page needs JavaScript. A simple article can remain useful with HTML and CSS. When interactive features fail or are disabled, links and main content should remain available.

Consider a quiz button: HTML provides the control and label, CSS supports readability, and JavaScript checks the choice. These roles work together while keeping distinct responsibilities.