HTML — an introduction

getting that first webpage working

// updated 2025-05-09 12:52

Let us begin with the creation of a basic HTML file!

We will dive right in with some sample code. Some parts may seem strange if we've never seen HTML before. However, it helps to have a minimal but real example of HTML first and then analyze its smaller parts.

Prerequisites

To create a simple HTML page, we could use a simple text editor like TextEdit or Notepad.

However, a code editor (like Sublime Text or Visual Studio Code) helps a lot! These have more advanced features that focus on all kinds of code, rather than just plain text!

Setup

If we open the text or code editor, and copy and paste the code below:

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>(The title that will show in the browser tab)</title>        
    </head>
    
    <body>
        <p>(The content)</p>
    </body>
    
</html>

We should note the following:

The first line tells the browser to expect an HTML document
The <html> tag is where the actual HTML begins
- The <head> tag lies inside the <html> tag and contains information about the page
  - The <title> tag therein displays the page's name on the browser tab
- The <body> tag contains the actual content that the browser displays
  - The <p> tag represents a paragraph
  - Other tags could replace the <p> tag, such as
    - <h1> for a top-level heading
    - <img> for an image
    - (and so on)

Opening and closing tags

All HTML tags have opening tags, while most have closing tags
- e.g. <tag> would be an opening tag
  - then </tag> would be the closing tag
Opening and closing tags mark the beginning and the end of a tag's "territory" on the webpage
Not all tags need to have closing tag; some tags are "self-closing", e.g.:
- <img src="filename.jpg"> (a tag for an image) can stand on its own without a closing tag
- <img src="filename.jpg" />, with the trailing slash, can optionally emphasize its self-closing nature

Extending

Once we have grasped the aforementioned basics, the possibilities become endless:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Page's title</title>        
    </head>
    
    <body>
        <h1>Heading 1</h1>
        <p>This forms a pararaph of some sorts! </p>
        <h2>Heading 2</h2>
        <p>Here we have another paragraph under the second heading!</p>
        <h3>Heading with image below</h3>
        <img src="image.jpg" alt="An image of a cat!" />
    </body>
    
</html>

Looking at the new tags, we have:

<meta> (background information about the page)
- (don't worry about the charset attribute for now)
<h1> represents a top-level heading
<h2> and <h3> (as we can guess) represents lower-level headings
<img> represents an image with a
- reference to an image file (named image.jpg)
- piece of alt text that describes the image

No limits!

HTML documents (i.e. pages) have no limits as to how many tags we could have inside the <head> and the <body> tag.

However, an HTML page should have only one <h1> tag!

web development html html tags html introduction html textbook textbook pages starters