Building your first web page with HTML

5 min readMay 8, 2019

Hi there, in this article I’ll be teaching you on how to build your first web page using HTML. Here are some of the few things I’m going to be discussing on HTML:

What is HTML?
Brief history of HTML
HTML tags and attributes
Creating your first web page
A basic construction of an HTML page
Other tags
HTML headings
The Anchor tags
Types of HTML lists
Improve your HTML skills

This tutorial will focus on giving you practical skills on how to build your own web page using HTML and the aim is to show you how to create your web page.

I hope that at the end of this tutorial, you would have known the basics in creating your own web page and that this will inspire you to delve into HTML and also becoming a Frontend Developer.

What is HTML?

Okay, in order to begin writing HTML, you have to know what you are writing.

HTML: HyperText Markup Language. It is simply a markup language used in creating web pages.

While CSS is used in making the web page look appealing. But for now, I will be focusing on teaching you how to build a web page rather than design.

Brief History of HTML

Tim Berners-Lee, Robert Cailliau and others created HTML in 1989. Which stands for Hyper Text Markup Language.

Hypertext is a text which means that documents contains links that allows the reader to jump to other places to another documents altogether.

Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

HTML Tags and Attributes

There are differences between Tags and Attributes. So I will tell you the difference.

What are HTML Tags?

Tags are used to start an HTML elements and they start with an opening and closing angle brackets. Example of a tag: <h1>.

HTML Tags usually have an open and closing angle brackets, example: <h1>, </h1>.

What are HTML Attributes?

Attributes contain additional information. They usually have an opening tag, then with a piece of information inside of it then a closing tag. Example:

<img src="mycat.png" alt="A photo of my cat">

In this instance, the image source (src) and the alt (alt) text are attributes of <img> tag.

NOTE

Always ensure to close all your tags appropriately in order to avoid confusion in your code
Not all HTML tags has closing tags, example: <img> <br/> etc. These are all called “Self closing tags”

Creating your first web page

First off, you need to have a code editor on your laptop and if you do not have, then I advise you download. These are some of the code editors you might want to download: Sublime Text code editor, VS code editor, CodeSandbox, CodePen editor.

After downloading and installing a code editor on your laptop, then you find a clean white page on which you write your code. From there you will need to layout your page with the following tags.

A basic construction of an HTML page

<DOCTYPE html>— This tag specifies the document type you will write on the page. Which is HTML 5.

<html> — This tag signals that from here on we are going to write in HTML code.

<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

<body> — This is the content of the page.

Other Tags

Inside the <head> tag, we have the <title> tag where you write the title of your web page.

Also we have the <meta> tag where the information about the document is stored.

Let’s try a basic <head> section:

<head>
  <title>My First Webpage</title>
  <meta charset="Utf-8">
  <meta name="description" content="this page contains information about your page.">.
</head>

HTML Headings

In HTML, there are six (6) types of headings.

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

As you might have guessed, <h1>and <h2>tags should be used for most important headings or texts, while <h3> to <h6>are used for less important texts. <h1> is the biggest heading while <h6> is the smallest.

Now let’s try it out on a code editor, on a new line, type:

<h1>Welcome to My Page</h1>

I will advise you save this file as index.html in a new folder called my webpage.

The Anchor Tag

The <a>(or anchor) tag is written in this format:

<a href="https://mywebpage.com/mypage/">Your Link Text Here</a>

The attribute href points to the page that will open once the link is clicked.

Types of HTML Lists

In web design, there are three (3) types of HTML lists which are;

Ordered HTML List
Unordered HTML List
Description HTML List

Ordered HTML list

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default. Example:

<ol>
  <li>cats</li>
  <li>dogs</li>
  <li>cows</li>
</ol>

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default. Example:

<ul>
  <li>milk</li>
  <li>tea</li>
  <li>sugar</li>
</ul>

Description HTML List

HTML now supports the description list.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term. Example:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

NOTE

Use the HTML <ul> element to define an unordered list
Use the HTML <ol> element to define an ordered list
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements

You should use the appropriate HTML lists on your web page.

In addition, there are still whole lots of HTML tags which wasn’t mentioned here and I’d just list few here for your own benefit and you can always learn more as you code. Never try to cram any of these HTML tags — they will come naturally to you the more you practice writing HTML.

So here are some of the few HMTL tags that aren’t mentioned above:

<p>— This is a paragraph tag, example: <p>This is a paragraph</p>
<b> — This is a bold tag that emphasizes a text or makes it appear bigger. It has a closing tag, </b>
<button></button>
<section></section>
<sub></sub> — Subscript text
<ins></ins> — Inserted text
<sup></sup> — Superscript text
<footer></footer>
<strong></strong>
<blockquote></blockquote>

Improve your HTML Skills

Now that you’ve gotten started with HTML, you can always improve your skills. Like I’d say: Practice makes perfect.

So now is the time to start learning to write HTML in creating your own webpage and who knows you will be an expert in creating and designing a webpage.

My next article will talk on “How to Style a Web Page using CSS”. Till then, I hope you enjoyed reading this.

Do you enjoy reading this article? Clap, and follow me on Twitter

Building your first web page with HTML

What is HTML?

Brief History of HTML

HTML Tags and Attributes

What are HTML Tags?

What are HTML Attributes?

NOTE

Creating your first web page

A basic construction of an HTML page

Other Tags

HTML Headings

The Anchor Tag

Types of HTML Lists

Ordered HTML list

Unordered HTML List

Description HTML List

NOTE

Improve your HTML Skills

Written by Omowunmi Adesuyi