HTML (HyperText Markup Language) is the core language used to structure content on the web. It describes the pieces of a page — headings, paragraphs, images, links and more — and gives browsers the information they need to render text and media into a readable, interactive document.
How HTML works
HTML documents are made from elements. Each element is written with a tag, usually an opening tag and a closing tag, and may carry attributes that modify its behavior or supply metadata. Browsers read the HTML text, parse it into a document tree (the DOM), and then use that tree to display the page and provide programmatic access to scripts.
The document begins with a DOCTYPE declaration that tells the browser to use the standard HTML parsing mode. From there a minimal HTML page follows a simple structure: an <html> root, a <head> that contains document metadata, and a <body> that contains the visible content.
Core concepts: elements, tags, attributes
- Elements: Building blocks such as
<p>,<a>,<img>. - Tags: The textual markers that open and sometimes close elements (e.g.,
<h1>...</h1>). - Attributes: Key/value pairs inside a start tag that provide additional information (for example,
srcon an image orhrefon a link).
Semantic HTML and accessibility
Semantic HTML uses elements that describe their meaning: <header>, <nav>, <main>, <article>, <section> and <footer> communicate structure to browsers, assistive technologies, and search engines. Choosing semantic elements improves accessibility, keyboard navigation, and the clarity of your document’s outline.
How HTML fits with CSS and JavaScript
HTML defines structure and content. CSS (Cascading Style Sheets) controls presentation — layout, colors, typography — and JavaScript provides interactivity and dynamic behavior. Keeping these responsibilities separate (structure in HTML, presentation in CSS, behavior in JavaScript) helps maintainability and progressive enhancement: users with limited capabilities still receive usable content.
Minimal example
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Simple page</title> </head> <body> <header><h1>Welcome</h1></header> <main><p>This is a minimal HTML document.</p></main> <footer><p>© Example</p></footer> </body>
</html>Practical best practices
- Use semantic elements to improve accessibility and searchability.
- Keep content and presentation separate: prefer CSS over inline presentational markup.
- Provide meaningful alt text for images and labels for form controls.
- Validate your HTML with a validator to catch common syntax and accessibility issues.
- Favor progressive enhancement: deliver content first, layer on styles and scripts.
Learning HTML begins with reading and writing small pages, inspecting how browsers interpret tags, and using developer tools to examine the DOM. Once you’re comfortable with elements, attributes, and the document structure, focus on semantic choices and accessibility to make pages that work for the broadest range of users.
