Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating web pages.
With HTML you define the structure and content of a web page using tags.

What is HTML?

HTML stands for HyperText Markup Language:

  • HyperText: text that links to other text (links).
  • Markup: you use tags to “mark up” the content.
  • Language: it has its own syntax and rules.

Basic structure of an HTML document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

✅ Exercise:
Create an index.html file with the basic structure and open it in your browser.

Basic Tags

Headings

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<!-- ... up to h6 -->

Paragraphs and line breaks

<p>This is a paragraph.</p>
<p>Another paragraph.<br />Line break within the same paragraph.</p>

Formatted text

<strong>Bold (important)</strong>
<em>Italic (emphasis)</em>
<u>Underline</u>
<mark>Highlighted</mark>
<small>Small text</small>
<del>Strikethrough</del>
<ins>Inserted</ins>
<sub>Subscript</sub> H<sub>2</sub>O
<sup>Superscript</sup> x<sup>2</sup>

✅ Exercise:
Create a paragraph with words in bold, italic, and highlighted.

<a href="https://example.com">Go to Example</a>
<a href="https://example.com" target="_blank" rel="noopener">Open in new tab</a>
<a href="#section">Internal link to a section</a>
<a href="mailto:email@example.com">Send email</a>
<a href="tel:+15551234567">Call by phone</a>

Images

<img src="image.jpg" alt="Description of the image" width="300" height="200" />
  • src: path to the image.
  • alt: alternative text (accessibility and SEO).
  • width / height: dimensions (optional, prevents layout shifts).

✅ Exercise:
Add an image and a link that opens in a new tab.

Lists

Unordered list (bullets)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered list (numbers)

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

Definition list

<dl>
  <dt>HTML</dt>
  <dd>Markup language for the web</dd>
  <dt>CSS</dt>
  <dd>Styling language</dd>
</dl>

✅ Exercise:
Create a list of your 3 favorite languages and an ordered list with steps to make coffee.

Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>Luis</td>
      <td>35</td>
      <td>Barcelona</td>
    </tr>
  </tbody>
</table>
  • <table>: table container.
  • <thead>: header.
  • <tbody>: body.
  • <tr>: table row.
  • <th>: header cell.
  • <td>: data cell.

✅ Exercise:
Create a table with 3 columns and 4 rows of made-up data.

Basic Forms

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Submit</button>
</form>

Common input types

  • text, email, password, number, tel, url
  • checkbox, radio
  • date, time, datetime-local
  • file, color, range
  • submit, reset, button

✅ Exercise:
Create a contact form with name, email, subject (select), and message.

Semantic Elements (HTML5)

HTML5 introduced tags with semantic meaning to improve accessibility and SEO.

<header>Page or section header</header>
<nav>Main navigation</nav>
<main>Main content</main>
<article>Independent content (article, post)</article>
<section>Thematic section</section>
<aside>Sidebar content</aside>
<footer>Footer</footer>

Semantic structure example

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#articles">Articles</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Article Title</h2>
      </header>
      <section>
        <p>Article content...</p>
      </section>
      <footer>
        <small>Published on 2025-08-25</small>
      </footer>
    </article>
  </main>

  <aside>
    <h3>About Me</h3>
    <p>Web developer...</p>
  </aside>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>

✅ Exercise:
Rewrite a simple page using only semantic tags (header, main, section, footer, etc.).

Multimedia

Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support HTML5 audio.
</audio>

Video

<video controls width="640" height="360" poster="cover.jpg">
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support HTML5 video.
</video>
  • controls: shows playback controls.
  • poster: cover image before playing.

Best Practices and Closing

  • Always use semantic tags instead of generic <div>s.
  • Always include alt on images.
  • Validate your HTML with the W3C Validator.
  • Keep a clean, well-indented structure.
  • Use lang on <html> to declare the language.

🎯 Final Project

Create a simple personal page with:

  • A header and a navigation menu.
  • A section with text and images.
  • A table and a list.
  • A contact form.
  • Full semantic structure (header, main, footer, article, section, etc.).