Phase 1 — HTML Fundamentals

#1 Introduction to HTML

tags, attributes, document structure

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of a page using tags (also called elements).

Every website you visit is built on HTML. It is the foundation that CSS styles and JavaScript makes interactive.

Your first HTML document

An HTML document starts with a <!DOCTYPE html> declaration, followed by the <html> element containing <head> and <body>:

index.html

<!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>

Tags and attributes

HTML elements are written with opening and closing tags. Tags can have attributes that provide additional information:

Tags and attributes

<!-- Opening tag with attribute -->
<a href="https://example.com">Click me</a>
<!--  ^       ^                  ^         ^ -->
<!-- tag  attribute          content   closing tag -->

<!-- Self-closing tag -->
<img src="photo.jpg" alt="A photo">

Semantic structure

Modern HTML uses semantic elements that describe the meaning of content, not just its appearance:

Semantic elements

<header>Site navigation and branding</header>
<nav>Navigation links</nav>
<main>Primary page content</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar content</aside>
<footer>Page footer</footer>

Using semantic elements makes your pages more accessible to screen readers and better indexed by search engines.

Your turn

Try the commands below to explore HTML structure:

terminal — browser

Lesson 2Text elements