The Basics of HTML and CSS: Build Your First Web Page

HTML and CSS are the foundations of a webpage, and they are also our first step towards becoming a web developer.

HTML defines the structure and content of the webpage, while CSS enhances the style and appearance, and together, they create the webpages we see today.

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

What is HTML?

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

To start writing HTML code, try the CodePen demo below:

Open demo in new tab

On the left side, you will find the HTML source code. Think of it as the blueprint for what will be displayed on the right side.

You can modify the source code directly to see how it affects the rendered webpage. For example, change the content of the <p>...</p> element on line 9:

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body>
9    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
10  </body>
11</html>

Save the changes, and the rendered webpage should be updated as well.

Set up your computer for coding

Of course, in practice, you need something more powerful than CodePen to do web development, so in this lesson, let's discuss how to set up your computer for coding.

To get started, make sure you have a browser installed. Any popular web browser such as Google Chrome, Microsoft Edge, Safari, or Firefox, should be sufficient for this course. You may download and install the browser from the linked websites.

Additionally, you'll need a code editor to write and edit your code. Visual Studio Code is a great option for beginners (and professionals, for that matter). Download the appropriate installer for your operating system from their official website.

After you've installed VSCode, make sure to install the Live Server extension as well. Navigate to the Extensions tab on the left sidebar, and type in Live Server in the search box. From there, you'll be able to download and install the extension.

Live Server will create a local development server with the auto-reload feature. For example, create a new work directory and open it using VSCode.

Create a new file named index.html under this directory. The .html extension indicates that this is an HTML document. Type in ! in VSCode, and you will see suggestions like this:

This is a shortcut for creating HTML documents quickly. You can navigate with the ↑ or ↓ keys. Select the first option, and the following code should be generated.

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body></body>
9</html>

Notice that at the bottom right corner of the VSCode window, there is a Go Live button.

Clicking this button will activate the Live Server extension. A local development server will be started, hosting the index.html file you just created.

Of course, the file is still empty right now, so you can't see anything. Add something between the <body> and </body> tags.

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body>
9    <p>Hello, world!</p>
10  </body>
11</html>

Save the changes, and the webpage will be automatically refreshed with the new content.

The structure of an HTML document

Take a closer look at our previous example, and notice that a typical HTML document always has the following structure:

html

1<!doctype html>
2<html lang="en">
3  <head>
4    . . .
5  </head>
6  <body>
7    . . .
8  </body>
9</html>

The <!DOCTYPE html> tag defines the document type. When the web browser encounters <!DOCTYPE html>, it understands that the page should be parsed and displayed according to the specifications of HTML5, the latest version of HTML standard. 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>).

lang is called an attribute, and it has the value "en" in our example. This tells the browser as well as the search engine that English is the primary language used for this webpage.

Inside the <html> element, there are two child elements, <head> and <body>. <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 we are going to focus on in this chapter.

Elements and attributes

The HTML document is made of different HTML elements in a nested structure. In HTML, most elements have both an opening tag and a closing tag:

html

1<tag>. . .</tag>

In this case, <tag> is the opening tag, and </tag> is the closing tag, and together, they define an HTML element. An element could hold textual content between the opening and closing tags.

html

1<tag>Hello, world!</tag>

Or wrap around other elements, forming a nested structure.

html

1<tag>
2  <tag>. . .</tag>
3  <tag>
4    <tag>. . .</tag>
5  </tag>
6</tag>

Inside the opening tag, you can define attributes, which are used to specify additional information about the element, such as its class, id, and so on.

html

1<tag attribute="value">. . .</tag>

The attribute is usually in a key/value pair, and the value must always be enclosed inside matching quotes (double or single).

There are some exceptions to these general formats. For example, the <br /> element, which creates a line break, does not need an opening tag. Some attributes, such as multiple, do not require a value. We will discuss these exceptions later in this course as we encounter them.

However, you should remember that if an element does require a pair of tags, then it should never be left out. In most cases, the webpage could still render correctly, but as the structure of your HTML document grows more complex, unexpected errors may occur.

Take a look at our best practice guidelines for writing HTML and CSS if you are interested.