Jan Mikoláš
Glossary
HTML
HTML is the fundamental layer of the web: it carries content and its meaning. It is neither a programming language nor a presentation tool, but without a clear structure, CSS, JavaScript and assistive technologies have no solid foundation.
Short definition
Markup describes content before the page is styled or made interactive.
An HTML document consists of elements and their attributes. A heading uses h1 through h6, a paragraph p, navigation nav, main content main and a button button. The browser uses this information to create a document tree, render a basic presentation and communicate semantics to search engines and screen readers.
HTML is not a synonym for an entire web application. CSS controls presentation and layout, while JavaScript adds interaction where needed. A good page remains readable and operable even before scripts load: a link leads to a URL, a form can be submitted and a button performs a genuine action rather than merely imitating a link visually.
What it is used for
Content, navigation, forms and web interface semantics
HTML is the shared foundation of a marketing website, online store, administration interface and API documentation.
- the structure of an article, headings, lists, images and links on a company website
- a product detail, price, availability, variants and an order form in an online store
- navigation, main content, a footer and landmarks for screen readers
- form controls with labels, guidance and clear errors
- a server-rendered application foundation that CSS and JavaScript progressively enhance
Practical example
A product detail using the appropriate elements
The product heading is a heading, the price is part of the content and the purchase action uses a button inside a form. The code does not use a generic div for everything merely to make styling faster. CSS can change the appearance without changing the meaning for keyboard and screen-reader users.
The alt attribute should describe the meaning of an image in its context. It can be empty for a purely decorative image, but the product name and information from a chart must not disappear merely because they are presented visually.
HTML
<article>
<h1>Trekingový batoh 30 l</h1>
<p><strong>2 490 Kč</strong></p>
<form action="/kosik" method="post">
<button type="submit">Přidat do košíku</button>
</form>
</article>How it works
From source-code markup to content in the browser
HTML defines a structure used by the browser, CSS, JavaScript and assistive technologies.
- The server returns a document The HTTP response carries HTML containing information about the content, links, forms and attached resources.
- The browser parses the document It creates the DOM, an object tree subsequently used by both rendering and JavaScript.
- A semantic structure emerges Headings, landmarks, labels and native controls convey meaning beyond the purely visual presentation.
- CSS determines the presentation Selectors and rules modify layout, typography and responsiveness but do not turn the meaning of a button into that of a link.
- JavaScript adds behaviour A script can improve interaction but must not remove fundamental navigation, focus or form behaviour without careful consideration.
Important concepts and synonyms
HTML marks up content; it is not decoration made from divs.
The term “markup” reflects how tags add meaning and structure to content.
Semantic elements
main, nav, header, footer, article, section, button and form identify the role of part of a page. A generic div is suitable for neutral grouping, not as a replacement for every element.
DOM
The Document Object Model is the document tree a browser creates from HTML. JavaScript can modify it, but changes must preserve a meaningful structure and focus.
Links and buttons
A link navigates to another URL. A button initiates an action in the current interface, such as submitting a form or opening a dialog.
Forms and labels
Native input, select, textarea and label elements give the browser familiar behaviour, validation and keyboard controls.
ARIA
ARIA adds semantics when HTML does not provide them. It should not override a correctly used native element or conceal a poor structure.
Benefits and limitations
Native elements provide a strong foundation, not a complete interface.
Benefits
- content is available and readable even before JavaScript runs
- browsers and assistive technologies understand the behaviour of forms, links and headings
- a clear structure helps maintenance, SEO and automated testing
- CSS can change without losing the meaning of the document
Risks and common mistakes
- a clickable div instead of a button or link, without keyboard behaviour
- skipping heading levels merely to achieve a specific font size
- an image without a meaningful text alternative or informational text available only in an image
- inserting untrusted HTML without escaping and sanitisation
- an interface whose basic navigation or form works only after a script loads
When it matters most
Whenever a user needs to understand content or take an action.
Semantic HTML is valuable on a simple landing page and in a complex administration interface. In an online store, it affects the journey to a product, filters, the cart, order accessibility and whether links work when opened in a new tab. A JavaScript frontend still delivers its final interface to a browser and needs the same elements and meanings.
A custom component makes sense when native HTML is insufficient. It must then take over all of its responsibilities: keyboard controls, focus, state, a name for screen readers and failure behaviour. A native element should remain the default until there is a reason to replace it.
What to consider
Meaning and functionality first, appearance and enhancements second.
High-quality HTML is specific, readable and tested beyond the usual combination of a mouse and wide display.
- use one clear main heading and a logical hierarchy of subsequent headings
- use a link for navigation and a button for an action
- connect every form field with a label and explain errors in text
- test the Tab key, visible focus, a screen reader and the basic journey without JavaScript
- escape untrusted content for its output context and never insert it directly into HTML
Common questions
HTML in practice
Is HTML a programming language?
No. HTML is a markup language that describes a document structure. JavaScript or the application backend provides program logic and interactions, for example.
What is the difference between a link and a button?
A link leads to a URL, while a button performs an action. The distinction affects keyboard controls, user expectations and browser behaviour.
When do I need ARIA?
Only when native HTML cannot express the required information. A correctly selected button, input or nav already contains the necessary semantics.
Is handling accessibility in CSS enough?
No. Contrast and focus are important, but the foundation is correct HTML structure, native controls, text labels and working navigation.
How I build web interfaces in practice
I design frontends from a semantic, functional foundation.
In e-commerce and application interfaces, I connect HTML, CSS and JavaScript with APIs so they remain usable, readable and maintainable.