What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It describes the structure of a webpage using a series of elements, which tell the browser how to display the content. HTML elements are represented by tags, which are enclosed in angle brackets.

HTML is not a programming language — it defines structure and meaning. Styling comes from CSS; behavior comes from JavaScript.

Basic Structure of an HTML Document

An HTML document has a specific structure, which includes the following essential components:

  1. <!DOCTYPE html>: Declares HTML5. Without it, browsers may enter quirks mode and render inconsistently.
  2. <html>: Root element. Always include lang="en" (or the page language) for accessibility and SEO.
  3. <head>: Metadata — title, charset, viewport, stylesheets, scripts that load before body content.
  4. <title>: Page title shown in the browser tab and search results.
  5. <body>: Visible content — text, images, links, forms, and media.

Here’s an example of a basic HTML document:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gazehub</title>
</head>
<body>
    <h1>Welcome to GazeHub</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>

Line-by-Line Breakdown

Element Purpose
<!DOCTYPE html> Tells the browser to use standards mode (HTML5)
<html lang="en"> Root container; lang helps screen readers and search engines
<meta charset="UTF-8"> Character encoding — required for emoji, accents, and non-Latin scripts
<meta name="viewport" ...> Enables responsive scaling on mobile devices
<title> Unique page title for tabs, bookmarks, and SEO
<h1> Primary heading — one per page is best practice
<p> Paragraph block for body text

Tags, Elements, and Attributes

  • Tag: Markup delimiter, e.g. <p> and </p>
  • Element: Opening tag + content + closing tag (or self-closing)
  • Attribute: Extra information on an opening tag
  <a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>
<img src="photo.jpg" alt="Team photo" width="400" height="300">
<input type="email" name="email" required>

Void (self-closing) elements have no closing tag: <img>, <br>, <hr>, <input>, <meta>, <link>.

Block vs Inline Elements

Block Inline
Starts on a new line, takes full width Flows within text
<p>, <div>, <h1>–<h6>, <ul>, <section> <a>, <span>, <strong>, <em>, <img>

Use block elements for layout sections; inline elements for text-level semantics.

The Role of HTML in Web Development

HTML provides the foundation every web page is built on:

  • Content Organization: Headings, paragraphs, lists, tables, and landmarks
  • Hypertext Links: Navigation between pages and resources
  • Multimedia Integration: Images, audio, video, SVG, and canvas
  • Form Handling: User input, validation, and data submission
  • SEO and Accessibility: Semantic structure helps search engines and assistive technology

Best Practices for Beginners

  1. Validate early — use the W3C Validator or browser DevTools
  2. Indent consistently — 2 or 4 spaces; match opening and closing tags
  3. One <h1> per page — use <h2>–<h6> for subsections in order
  4. Always add alt on images — even if empty for decorative images
  5. Separate concerns — structure in HTML, presentation in CSS, behavior in JS

Common Beginner Mistakes

Mistake Fix
Missing <!DOCTYPE html> Add it as the first line
Forgetting lang on <html> Set lang="en" or appropriate locale
Using <head> content in <body> Keep <title>, <meta>, <link> in <head>
Skipping closing tags on non-void elements Close every <div>, <p>, <li>, etc.
Nesting block inside inline incorrectly e.g. don’t put <div> inside <p>

Troubleshooting

Page looks unstyled or broken on mobile

  • Check for a viewport meta tag in <head>
  • Validate HTML for unclosed tags that break the DOM tree

Special characters display as gibberish

  • Ensure <meta charset="UTF-8"> is present and the file is saved as UTF-8

Changes don’t appear in the browser

  • Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
  • Confirm you’re editing the file the server actually serves

HTML Versions and Standards

Modern development uses HTML5 — the living standard maintained by WHATWG. Key HTML5 additions include semantic elements, form input types, <video>, <audio>, <canvas>, and APIs like localStorage. Always use <!DOCTYPE html> and validate against current standards.

Comments in HTML 

  <!-- This is a comment — not rendered in the browser -->
<p>Visible content</p>

Comments help document structure but are visible in page source — never put secrets in comments.

Your First Exercise

Create index.html with a title, one heading, two paragraphs, and a link to an external site. Open it in a browser, then validate it with the W3C tool. Fix any errors before moving on.

By understanding HTML fundamentals, you build the foundation for accessible, well-structured, professional web pages.