HTML Basic

Understanding the basic structure and essential elements of HTML is the foundation for creating any web page. This includes the document structure, headings, paragraphs, links, images, and how they work together.

The Minimal HTML Document

A minimal valid HTML5 document requires very few elements: the DOCTYPE declaration, html element, head element with a title, and body element. This represents the absolute bare minimum needed for a valid HTML page.

While this minimal structure is technically valid, real-world pages include additional metadata like character encoding, viewport settings, and CSS/JavaScript links.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal Page</title>
</head>
<body>
  Content goes here
</body>
</html>

The Document Head

The <head> section contains metadata—information about the document that is not displayed to users. This includes the page title (shown in browser tabs and search results), character encoding, viewport settings for responsive design, CSS stylesheets, JavaScript files, and search engine directives.

Essential head elements: <meta charset="UTF-8"> ensures proper character display, <meta name="viewport"> enables mobile responsiveness, <title> sets the page title, <meta name="description"> provides search engine descriptions, and <link> connects external stylesheets.

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">

  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page title (shows in browser tab) -->
  <title>My Website - About Page</title>

  <!-- SEO metadata -->
  <meta name="description" content="Learn about our company and mission">
  <meta name="keywords" content="web development, HTML, tutorial">
  <meta name="author" content="Jane Smith">

  <!-- External stylesheet -->
  <link rel="stylesheet" href="styles.css">

  <!-- Favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Headings: Creating Structure

HTML provides six levels of headings, <h1> through <h6>, with h1 being the most important and h6 the least. Headings create a hierarchical outline of your content, which is crucial for accessibility (screen readers use headings to navigate) and SEO (search engines use headings to understand page structure).

Best practices: Use only one h1 per page (typically the page title), follow a logical hierarchy (do not skip levels), do not use headings just for styling (use CSS instead), and make headings descriptive of the content that follows.

<h1>Main Page Title</h1>

<h2>First Major Section</h2>
<p>Content for first section...</p>

<h3>Subsection 1.1</h3>
<p>More detailed content...</p>

<h3>Subsection 1.2</h3>
<p>More detailed content...</p>

<h2>Second Major Section</h2>
<p>Content for second section...</p>

<h3>Subsection 2.1</h3>
<p>Content...</p>

Paragraphs and Text

The <p> element defines a paragraph of text. Browsers automatically add space above and below paragraphs. Multiple spaces and line breaks in your HTML source code are collapsed into a single space when displayed—use CSS or <br> elements for spacing control.

For explicit line breaks within text (like in addresses or poems), use the <br> element. For horizontal dividers between sections, use <hr>. These are void elements with no closing tags.

<p>This is a standard paragraph. Multiple     spaces
and line breaks in the source code are collapsed
into single spaces when displayed.</p>

<p>This is another paragraph. Each paragraph element
creates a distinct block of text with spacing.</p>

<!-- Line breaks for addresses or poetry -->
<p>
  123 Main Street<br>
  Apartment 4B<br>
  New York, NY 10001
</p>

<!-- Horizontal rule for section breaks -->
<hr>

<p>Content after the divider...</p>

Links: Connecting Pages

The anchor element <a> creates hyperlinks—clickable text or images that navigate to other pages, files, or page sections. The href attribute specifies the destination. Links can be absolute (complete URLs) or relative (paths from current file).

The target attribute controls where the link opens: _self (same window, default), _blank (new tab/window), _parent (parent frame), or _top (full window). When using target="_blank", always include rel="noopener noreferrer" for security.

<!-- Internal link (same site) -->
<a href="/about">About Us</a>
<a href="contact.html">Contact</a>
<a href="../index.html">Home</a>

<!-- External link (different site) -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- Phone link (mobile-friendly) -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link to page section -->
<a href="#pricing">Jump to Pricing</a>

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>