HTML, short for HyperText Markup Language, is the language that gives every web page its structure and content. It marks up text and media as headings, paragraphs, links, images, lists, and other elements so the browser knows what each piece of content is and how to display it. It is not a programming language; it does not calculate or make decisions. It describes structure. Almost every page you have ever opened is HTML underneath. This guide covers how tags work, why semantics matter, and how HTML fits with CSS and JavaScript.
How HTML works
HTML is made of elements, and most elements use a pair of tags: an opening tag, the content, and a closing tag. For example, a paragraph is written between tags that mark it as a paragraph, and a heading uses heading tags. The browser reads this markup top to bottom and builds the page from it. Tags can nest inside each other, which is how you get structure: a list containing list items, or a section containing a heading and several paragraphs.
// a small block of HTML
<article>
<h2>About us</h2>
<p>We build calm, useful tools.</p>
<a href="/contact">Get in touch</a>
</article>
That markup tells the browser: here is an article, with a subheading, a paragraph, and a link. Nothing about color or position; that is CSS work.
The three pillars of the web
| Layer |
Language |
Responsibility |
| Structure |
HTML |
What content is and how it nests |
| Style |
CSS |
Color, spacing, layout, fonts |
| Behavior |
JavaScript |
Interactivity and logic |
HTML is the foundation the other two build on. You can have a page with only HTML, but you cannot meaningfully style or script a page that has no HTML. Style lives in CSS, and HTML is the first of the three skills in frontend development.
Why semantic HTML matters
A heading should be a heading element, navigation should be a nav element, and a button should be a button. Using the right element, rather than a generic container styled to look right, helps in three ways: screen readers can navigate the page, search engines understand the content, and other developers can read your code. Semantic markup is one of the easiest wins in web development and one of the most often skipped.
How to start
- Learn the common elements. Headings, paragraphs, links, images, lists, and forms cover most pages.
- Build a static page by hand. No framework, just markup, to feel how structure works.
- Use semantic tags. Reach for the meaningful element before a generic container.
- Add CSS next. Once the structure is right, style it.
- Validate your markup. A quick validator catches unclosed tags and structural mistakes early.
What to skip
- Do not use HTML for styling. Color, spacing, and layout belong in CSS, not in markup.
- Do not skip semantics. Generic containers everywhere hurt accessibility and SEO.
- Do not learn outdated tags. Presentational tags and old layout tricks are obsolete; modern CSS replaces them.
- Do not treat HTML as programming. It has no logic; pairing it with JavaScript is what adds behavior.
FAQ
Is HTML a programming language?
No. HTML is a markup language that describes the structure and content of a page. It has no logic, loops, or variables. Programming logic comes from JavaScript.
What is the difference between HTML and CSS?
HTML defines what content is and how it is organized. CSS controls how that content looks: color, layout, spacing, and fonts. They work together but do different jobs.
Do I need to learn HTML before JavaScript?
Yes, generally. HTML and CSS give you something to work with; JavaScript then manipulates that structure. Learning HTML first makes the rest much clearer.
What is semantic HTML?
Using elements according to their meaning, such as a nav element for navigation or a button for buttons, rather than generic containers. It improves accessibility, SEO, and readability.
Where to go next
Style your markup with what CSS is, see where HTML fits in frontend development, and follow a path in how to learn HTML and CSS.