The Basics of HTML and CSS: Build Your First Webpage

HTML & CSS create the foundation of a webpage. HTML defines the structure and content, while CSS enhances the style and appearance.

In this chapter, we’ll explore the fundamentals of HTML and CSS, giving you the skills to start building your own webpages.

What is HTML?

HTML stands for HyperText Markup Language. It defines the structure of webpages using HTML elements.

To start writing HTML, try the code demo below in the Code Playground 👉

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <link rel="stylesheet" href="/styles.css" />
  </head>
 
  <body>
    <p>Hello, World!</p>
  </body>
</html>

Modify the source code directly to see how it affects the webpage. For example, change the content between <p>...</p>:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <link rel="stylesheet" href="/styles.css" />
  </head>
 
  <

Click Run, and the webpage below should be updated.

The basic structure

A typical HTML document always has the following structure:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- . . . -->
  </head>
  <body>
    <!-- . . . -->
  </body>
</html>

The <!DOCTYPE html> tag defines the document type.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- . . . -->
  </head>
  <body>
    <!-- . . . -->
  </body>
</html>

When the web browser encounters <!DOCTYPE html>, it understands that the page should be parsed and displayed according to the specifications of HTML5.

This ensures that modern browsers interpret the webpage's content and layout correctly.

Everything else in the file should be enclosed inside an <html> element, defined by an opening tag (<html>) and a closing tag (</html>).

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- . . . -->
  </head>
  <body>
    <!-- . . . -->
  </body>
</html>

lang is called an attribute, and it has the value "en" in our example.

This tells the browser and the search engine that English is the primary language used for this webpage.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- . . . -->
  </head>
  <body>
    <!-- . . . -->
  </body>
</html>

Inside the <html> element, there are two child elements, <head> and <body>:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- . . . -->
  </head>
  <body>
    <!-- . . . -->
  </body>
</html>

<head> contains metadata and other information about the HTML document.

This information will not be displayed in the browser but is often used by search engines for SEO (Search Engine Optimization) purposes.

<body>, on the other hand, contains the main content of the webpage that is visible to the users. And for that reason, it is also the part of the HTML file that we are going to focus on in this chapter.