HTML beginner’s tutorial: Build a web page from scratch with HTML

HTML is the backbone of web development, forming the structure of every web page. Whether you’re an aspiring web developer or just curious about coding, learning HTML is your first step into the world of web development.

This blog will guide you through HTML basics and help you build a simple web page from scratch, even if you’ve never written a line of code before.

What is HTML?#

HyperText Markup Language (HTML) is used to create and structure the content of a web page. It uses a system of tags to define elements like headings, paragraphs, images, and links. Think of it as the bricks you need to build anything for the web. Once we write our HTML code, we can add other languages to the page, such as CSS and JavaScript, to add interactivity, style, and more.

Imagine a document that you would create in a word processor. That document usually uses different font sizes to indicate text sections, such as headers, main content, footers, table of contents, etc. HTML is building that document and setting our text sizes for a web page.

HTML structure and syntax#

An HTML document has a simple structure, as shown below. The key components of this document are:

HTML elements and tags#

An element is an individual component of an HTML document that represents the semantics of that page. For example, the title element translates to the title of a page.

Note: Semantics refers to the meaning of a particular element. Syntax refers to the structure of a programming language.

To create an element, we use tags. These tags form the building blocks of a web page. Each tag represents a specific type of content or layout component. Some of the most commonly used tags are as follows:

• <p>: To create text blocks

• <h1> to <h6>: T structure content hierarchically

• <a>: An anchor to create a hyperlink for other pages

• <img>: To add an image on a web page

• <ul> and <ol>: To create an unordered list (bulleted) or an ordered list (numbered), respectively

  • <li>: To list items, either as bulleted or numbered

• Semantic tags: To provide meaningful context to the content to enhance the readability and SEO of a web page—including <header>, <footer>, <nav>, and <article>, etc.

Let’s look at a basic example below of how to use HTML tags.

Using HTML tags#

We wrap the content between an opening and closing tag to use tags. The closing tag uses the forward slash /, while the opening tag does not. HTML tags are not case-sensitive in modern browsers, so <P> is treated the same as <p>. However, using lowercase tags is recommended as per modern HTML5 standards. For example, the following are the correct ways to use the relevant tag.

HTML also provides some text styling tags that can be used in addition to other tags to make an appealing web page. Some of these are:

• <strong>: To bold the relevant content

• <em>: To add the italic style to the relevant content

• <u>: To underline the relevant content

• <sup> and <sub>: To add superscript/subscript styles to the relevant content

You can nest HTML elements when you want to apply multiple tags. Say you wanted to make a paragraph that is also bold. You could write the following HTML code:

HTML attributes#

HTML attributes provide additional information about the tags. Think of these as properties of an element. Attributes are added to the opening tag of an HTML element in the form of name-value pairs, separated by an equals sign (e.g., attribute_name="value").

The common syntax for writing attributes is:

Common attributes#

Let’s look at some of the commonly used attributes:

• id: To specify a unique identifier for an element

• class: To specify one or more class names for an element

• style: To add inline styles to an element

Consider the following example where we use the attributes with some tags.

Specific attributes#

Some attributes are unique to certain elements/tags. Let’s look at these below:

• For <a> (anchor tag), we have the following commonly used attributes:

  • href: To specify the URL of the link

  • target: To define where to open the linked document

• For <img> (image tag), we have the following commonly used attributes:

  • src: To specify the path to the image

  • alt: To provide alternative text for the image (used for accessibility)

  • width and height: To define the size of the image

Note: The image tag does not use a closing tag.

HTML tables#

We can add tables to a web page by translating their data into rows and columns. Each row/column pair will have a piece of data called a table cell.

To declare an HTML table, we use the <table> tag. We then add rows to our table with the <tr> tag. From there, we specify the cells with the <td> tag.

Let’s look at a simple table in HTML:

Build a web page from scratch#

Now, we know the basic terms of HTML and how to format an HTML file properly. But how do you make a web page? Let’s go through a step-by-step guide to learn how it’s done. We will be making a simple “About Me” web page that includes the following:

• Title with your name

• Description of yourself in a paragraph

• Hyperlink to a website (e.g., a personal website)

• List of your skills

• Table to list your work experience

Step 1: Create the HTML file#

We will start with a new file and write the basic structure of an HTML page. A simple starting HTML file structure will be as follows:

Explanation:#

• Line 1: We declare the document type. This tells the browser that we’re using HTML5, the latest version of HTML.

• Lines 2–13: We wrap all our content within the <html> tag.

• Lines 4–6: We start with the <head> section that includes the <title> tag that sets the title of your web page.

• Lines 8–11: We define the <body> section. Everything inside the <body> tag will be displayed on your web page.

  • Line 9: We use the <h1> tag to define the heading of our page.

  • Line 10: We use the <p> tag to write a sentence about ourselves.

Step 2: Add a link to a website#

Now, let’s add a link to an external website.

We used the <a> tag with the href attribute to add a link to https://educative.io.

Step 3: Add a list of skills#

Now, let’s add an unordered list of the skills to the web page. We will use <ul> for this example.

Explanation:#

• Line 13: We use the <h3> tag to define the subheading for the skills section.

• Lines 14–19: We use the <ul> and <li> tags to create an unordered list.

Step 4: Add a table for work experience#

Now, let’s add a table for adding work experience. We will add multiple rows where each row will specify a separate job experience entry. The column headers will be Employer, Job Title, and Years.

Conclusion#

Congratulations! You’ve just built a simple web page using HTML. In this blog, you learned the basics of HTML, including its structure, essential tags, and how to use them to create and style content. By completing this step-by-step process, you’ve gained foundational knowledge to help you progress in web development.

Keep experimenting by adding more sections, styles, or even JavaScript for interactivity. Remember, practice is the key to mastering HTML and becoming confident in your coding skills.