How to Create a Basic HTML Page

4 min readFeb 16, 2024

If you’re new to web design or eager to dive into coding, understanding the basics of HTML is the first step toward creating your web presence. HTML, or HyperText Markup Language, is the scaffolding for the World Wide Web. It’s the code behind every web page you visit and is a primary language that web developers and designers need to master. This guide is your passport to creating a basic, standalone HTML page from scratch — a starting point for many web projects.

Introduction: HTML at the Core of Web Development

Before tackling the step-by-step instructions, let’s grasp why understanding HTML is crucial. HTML provides the structure of web pages, defining the different parts of your content. Together with CSS and JavaScript, it forms the trio of fundamental languages for front-end web development. HTML uses a system of tags — enclosed in angle brackets — to affect how text, images, and other elements are displayed on the page.

Setting Up: Your First HTML Environment

The first thing you need to create an HTML page is a plain text editor. This could be as simple as Notepad (Windows) or TextEdit (Mac), but for better usability, consider a lightweight development editor like Visual Studio Code, Sublime Text, or Atom. These types of editors often come equipped with helpful features for coding, like syntax highlighting and autocomplete.

To begin, open your text editor and create a new file. We will save this file with the `.html` file extension, for example: `index.html`. This is the convention for naming HTML files.

Structure of an HTML Page

Every HTML page is structured with specific tags to denote elements and provide instructions to the browser on how to interpret and display the content.

Doctype Declaration

The first thing your HTML page needs is a doctype declaration. It tells the browser which version of HTML the page is written in. Nowadays, this is relatively standard:

<!DOCTYPE html>

HTML, Head, and Body Tags

The basic structure of an HTML page consists of opening and closing `<html>` tags to encapsulate all the content on the page. Inside the `<html>` tags, we define the `<head>` and `<body>` sections. The `<head>` section contains meta information about the document, such as the page title and stylesheet links. The `<body>` section is where the page's content, what you want to display to users, goes.

Here’s what it should look like so far:

<!DOCTYPE html>
  <head>
  <! - Meta information and page scripts →
  </head>
  <body>
  <! - Page content →
  </body>
</html>

Adding Content: Making Your Page Speak

With your page’s structure in place, it’s time to add various types of content. This includes text, images, and hyperlinks, allowing you to create a web page alive with interaction and information.

Adding a Title

The title tag is crucial for your page. It’s what users will see in the browser tab and what search engines display in the search results.

<head>
  <title>Your Page Title</title>
</head>

Inserting Text

You can start typing your content within the `<body>` section. Use paragraphs (`<p>`) to separate text blocks.

<body>
  <p>Hello, this is a basic HTML page!</p>
</body>

Inserting Images

Images are also inserted into the `<body>` section. You do this with the `<img>` tag, with the source (src) attribute pointing to the file’s location and the alt attribute providing a text description of the image. This is both helpful for accessibility and for search engines to understand the content of your images.

<body>
<img src="image.jpg" alt="A descriptive text for the image">
</body>

Creating Hyperlinks

Hyperlinks, or simply links, are the web currency connecting web pages. They are created using the anchor (`<a>`) tag, with the href attribute specifying the URL the link points to and the text between the opening and closing tags being the visible anchor text.

<body>
<a href="https://www.example.com">Visit Example.com</a>
</body>

Styling with CSS: Making It Look Good

We use Cascading Style Sheets (CSS) to make your HTML page visually appealing. CSS allows you to define styles for HTML elements, like fonts, colors, and layouts.

Inline Styles

Inline styles are added directly to an HTML element. These styles affect only that specific element.

<body>
  <p style="color: red;">This text will be red.</p>
...
</body>

Internal Stylesheets

Internal stylesheets are CSS rules in the HTML file, typically in the `<head>` section. They apply to the whole page.

<html>
    <head>
    <style>
    p {
    color: blue;
    }
    </style>
  </head>
 <body>
....
 </body>
</html>

External Stylesheets

External stylesheets are separate CSS files linked to your HTML document using the `<link>` tag. This allows you to utilize the same styling across multiple pages.

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  ....
  </body>
</html>

Previewing and Testing: Seeing Your Page in Action

Once your HTML page is written and saved, you’ll want to see how it looks. You’ll open your HTML page in a web browser to do this.

Saving the File

Save your HTML page with the `.html` file extension. This can sometimes be overlooked and cause problems when viewing your page in a browser.

Opening in a Web Browser

Open your web browser and use the menu to navigate to ‘File’ > ‘Open File’. Choose your HTML file from the dialog and click ‘Open’.

Checking for Errors

If your page doesn’t look right, check the syntax of your HTML and CSS. Ensure all tags are correctly closed and use the correct style syntax.

Conclusion: Mastering the Basics

Creating a simple HTML page is just the beginning. As you delve further into web development, you’ll add more interactivity to your sites with JavaScript and more complex styling with CSS. Practice the basics, experiment with different elements, and, most importantly, keep learning. The web is full of resources to help you grow as a developer.

HTML may initially seem simple, but it’s a powerful tool for sharing your ideas and creations. Embrace the process and remember that every great web developer started from these foundations. Keep coding, keep building, and enjoy creating with HTML.