Create your first HTML webpage

What you need

HTML does not need a language installer, compiler or package manager. A plain-text editor and a modern web browser are enough. A code editor such as VS Code can make writing easier, but it is optional. Use a plain-text file rather than a word processor document: formatting added by a word processor is not HTML source.

You can also try an example in Codectionary’s Playground before making a local file. For a page you can keep and edit on your computer, create a project folder first so related files have a clear home.

• Understand the complete HTML document
• Set up VS Code for HTML
• Try HTML in the Playground

Create and save index.html

Create a folder named my-first-page. In your editor, make a new plain-text file and save it in that folder as index.html. The .html extension tells your system and editor that this file contains HTML; index.html is a common name for a site’s starting page. If your editor offers a file-type selector, choose HTML or All Files so it does not silently append .txt.

Copy the complete example below. The first line requests standards mode. The html element contains the document and lang="en" declares its English language. The head contains metadata: character encoding, a mobile viewport instruction and the title shown in the browser tab. The body contains the visible heading, paragraphs and link. The main element identifies the central content.

• The head element
• The body element
• DOCTYPE and standards mode

Open it in a browser

Find index.html in the folder and open it with a browser, or drag the file into a browser window. The browser reads the file directly from your computer, so you do not need a web server for this simple page. You should see the heading, text and clickable Example Domain link; “My first webpage” appears in the tab.

Change the heading text, save the file and refresh the browser. Saving writes the edited source to disk; refreshing makes the browser read it again. If nothing changes, confirm you edited the same index.html that the browser opened and that the editor saved the file.

Build on this foundation

The example demonstrates structure rather than visual design. Continue with headings, links and images, then add CSS for appearance and JavaScript when you need behaviour. Use semantic elements because their meaning helps readers, browsers and assistive technology interpret a page.

• Headings
• Links
• Images
• Connect CSS and JavaScript

Syntax

<!doctype html>
<html lang="en">
  <head><title>My page</title></head>
  <body><h1>Hello!</h1></body>
</html>

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first webpage</title>
</head>
<body>
  <main>
    <h1>Welcome to my webpage</h1>
    <p>I'm learning how to give a page structure with HTML.</p>
    <p>Visit <a href="https://example.com/">Example Domain</a>.</p>
  </main>
</body>
</html>

Best practices

• Save as .html, not .html.txt.
• Set a useful title and document language.
• Use meaningful elements and descriptive link text.

Browser compatibility

Related HTML documentation

Specifications & further reading

• MDN: Installing basic software
• MDN: Dealing with files
• WHATWG HTML Standard: The document element