By Ronnie Mbuqe
HTML describes structure and meaning, while CSS controls much of the appearance. A bold paragraph does not automatically become a navigable heading for assistive technology.
Use a heading element for a section title and choose its level by structure. Styling can then change without removing the document's outline.
A booking form can look finished and still leave its fields unnamed
Imagine reaching two identical input boxes with a screen reader. The page looks clear to someone who can see nearby text, but the controls have no programmatic labels. The problem begins in the document's meaning, before colours or animation enter the picture.
We will build the smallest useful field, connect its label and identify its action. No programming experience is needed. The outcome is practical: you should be able to distinguish a meaningful control from a shape that merely looks right.
Why can a clickable-looking box still fail a keyboard user?
HTML describes meaning and structure.
Trace the explanation
A real button includes built-in interaction behaviour that a decorated div does not automatically have. Styling can change appearance, but the underlying element still affects focus, keyboard use and assistive technology.
Source and further reading: MDN Web Docs
Give the field a name the browser can connect
The label's for value matches the input's id. That relationship connects the words Arrival date to the control rather than relying on their visual proximity. The name supplies the field identifier used when a form is submitted; it is not a substitute for the label.
<label for="arrival">Arrival date</label>
<input id="arrival" name="arrivalDate" type="date" />
<button type="button">Check these dates</button>
The button uses type=button here because this illustration must not submit the surrounding site's form. In a real form, choose submit when the intended action is submission. Keep the action's wording specific enough that a reader knows what will happen.
After reading the markup, try navigating the guide's actual practice field with the keyboard. Focus should be visible. A placeholder can provide a hint, but the label must remain meaningful after someone types. The browser preview is a teaching demonstration, not a working booking request.
Which attribute value on the input must match the label's for value? Type the attribute name.
This checks a prediction about the worked example. It does not run server code, contact an API or change a booking.
id. The label points to the input's id, while name identifies a submitted field. They have different jobs.Read the explanation without the checker
id. The label points to the input's id, while name identifies a submitted field. They have different jobs.
Find a form you use regularly. Can its fields still be understood after placeholder text disappears? Test the labels and keyboard order rather than judging only the screenshot.
A button-shaped rectangle is not necessarily a button
A styled div can resemble a button while lacking the expected keyboard and browser behaviour. A real button element communicates an action and supports familiar interaction. HTML therefore carries meaning, not merely a set of boxes for CSS to decorate.
Try using a page with only the keyboard. Can you reach the action, see focus and activate it? A visual imitation that cannot do those things has lost part of the interface. A link should navigate to a destination; a button should perform an action.
Practical examples: HTML
Website
A website begins as a structured document. The main heading identifies the page, sections group related ideas and buttons represent actions. CSS may completely change the appearance, but the HTML remains the browser’s map of what each piece means.
Article
An article uses one clear main heading, logical subheadings, paragraphs, lists and quotations. That hierarchy helps readers scan, allows screen-reader users to navigate by heading and gives search engines stronger clues about the subject and relationships inside the page.
Navigation
Navigation links need useful wording and a real destination. A nav region tells assistive technology that the links form a menu, while descriptive anchor text explains where each choice leads without relying on colour or position alone.
Forms
A form connects labels to inputs, groups related choices and uses the correct controls for email, dates, checkboxes and submission. Native HTML provides keyboard behaviour and basic validation that a collection of styled generic containers would have to recreate badly.
A page has 1 main heading and 4 section headings. How many headings are present altogether?
Trace the explanation
1 + 4 = 5 headings. The main heading and section headings perform different structural jobs. Heading level should express the outline, not simply whichever font size looks attractive.
Source and further reading: MDN Web Docs
Why does a real button work better than a clickable box?
A native button already has keyboard behaviour and accessibility semantics. A generic container needs extra work to provide those expectations.
Use links to navigate and buttons to perform actions. Choosing the correct element gives the browser useful information before you write JavaScript.
Why a form label is more than the words above a field
A label connected to an input gives the field an accessible name and often lets a user select the label to focus it. Placeholder text may disappear as soon as someone types, so it is a poor substitute for a persistent label.
Consider a booking date field. The reader needs to know whether it means arrival or departure even after entering a date. Clear labels, useful error text and sensible field order help both people and assistive technology follow the same task. Semantic HTML makes that intent available before styling or scripting adds anything.
Does a large bold paragraph become a heading for assistive navigation?
No. Its appearance does not give it heading semantics. Use a logical heading element and style it as needed; do not choose heading levels merely to obtain a font size.
Questions about HTML Explained Simply
Is HTML a programming language?
HTML is usually called a markup language, not a full programming language, because it describes structure instead of logic.
Can I build a website with only HTML?
Yes, but it will look basic. CSS and JavaScript make it more attractive and interactive.
What is the difference between HTML and CSS?
HTML describes the structure and meaning of the content. CSS controls presentation such as spacing, colours, layout and responsive behaviour.
What does semantic HTML mean?
It means choosing elements because of what the content represents, such as nav for navigation, article for self-contained content and button for an action, instead of using generic containers for everything.
Why is the head section important?
The head contains information about the document instead of the main visible article: the title, metadata, stylesheets, social-sharing tags and other browser instructions.
Does HTML need JavaScript?
No. A useful page can be built with HTML and CSS alone. JavaScript is added when the page needs richer behaviour, dynamic updates or application-style interaction.
You must let a user submit a form and visit another page. Which element would you choose for each action?
One reasoned response
Use a button for an action such as submission and a link for navigation to a URL. Clear semantic choices reduce the amount of behaviour that must be recreated manually.
Source and further reading: MDN Web Docs
Example: give a page meaningful structure
HTML describes the structure and meaning of web content. Semantic elements help browsers, assistive technology and developers understand the purpose of each part.
<article>
<h1>How plants use sunlight</h1>
<p>Plants use light energy to make sugars.</p>
<a href="#photosynthesis">
Learn about photosynthesis
</a>
<section id="photosynthesis">
<h2>Photosynthesis</h2>
<p>Plants use light, water and carbon dioxide to make sugars.</p>
</section>
</article>
The heading identifies the main topic, the paragraph contains an explanation, and the link jumps to a section in the same article. HTML alone does not make a page visually polished or interactive; CSS controls presentation and JavaScript can add behaviour. Use a real destination for links, keep heading levels logical, and provide useful alternative text when images communicate information.
Sources
Sources and further reading
A closer lookA button already knows how to be a button
A developer makes a clickable div for Show answer. A mouse user can activate it, but keyboard behaviour and its role are not supplied automatically.
Work through the distinction
Use a button with type="button" inside a form when no submission is intended. Give the answer a relationship such as aria-controls and update aria-expanded when appropriate. Semantic HTML reduces custom behaviour that has to be recreated and tested.
Which element fits an in-page action?
Choose an answer to see feedback. You can try again.
Show the answer and explanation
A button. Use a button with type="button" inside a form when no submission is intended. Give the answer a relationship such as aria-controls and update aria-expanded when appropriate. Semantic HTML reduces custom behaviour that has to be recreated and tested.