HTML Introduction

If you have always wanted to make your own Web page, but you don't know where to start. Then you are in the right place, all you need is good understanding of html. And is not all that difficult to learn

html is the brainchild of Tim BernersLee. In 1990, BernersLee needed something that would help scientists coming from different colleges and universities access documents and research from other scientists. That problem led to BernersLee inventing the World Wide Web, the hypertext transfer protocol or htp, and html.

Why learn HTML?

These days, the content management systems such as WordPress as well as HTML editors can help you create a Web page without knowing html.

But even with these tools, knowing how html works plus knowing even just the basic tags can go a long way.

For example, it would make your life easier if you knew how to work with html to correct design flaws. Like if your WordPress installation is using a CSS rule that displays images wrong, you can view the source and correct how your images are being displayed if you know html.

Also, html is very simple and easy to learn. It literally makes no sense why you should not take time to learn it!

HTML Versions

HTML was first developed by British physicist Tim Berners-Lee in 1990. Since that time, there have been many versions of HTML.

Version	Year
HTML	1992
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

How to start writing HTML Code

You can start with Notepad, a text editor that is included in your Windows installation. If you are not using Windows, or if you prefer other text editors, there is a lot of free software that you can download from the Internet.

Or you could get one of those HTML or WYSIWYG editors. WYSIWYG stands for "what you see is what you get." Think of it as a layout tool that allows you to easily create an HTML page and format it without bothering too much about tags and elements.

There are two things that you need to know to get started with HTML:

The basic tags and elements.
The structure of an HTML page

Basic tags and elements

html is a markup language. As such, you will need to know the various tags and elements that it uses.

Tags usually come in pairs. An opening tag will signify that the browser should treat the succeeding text using that tag's properties and a closing tag would end it.

The start tag is written with the tag name enclosed in angle brackets, followed by the end tag with a forward slash (/) before the tag name, also enclosed in angle brackets.

For example, the opening  tag and its corresponding closing  tag will render all the text in between in bold. i.e.,

The content of an HTML element is placed between the start and end tags.

“My name is Jonh” will be displayed as: My name is Jonh.

And then there are what we call the "empty elements" or those that work without a closing or opening tag. Empty elements are often described as self-closing tags.

<area>
<hr>
<input>
<meta>
<link>
<img>

All of these can stand alone. For example, line breaks in HTML documents are often denoted by  .

HTML Attributes

HTML Attributes are used to provide additional information about HTML elements. Attributes are placed within the start tag of an HTML element and provide extra instructions or properties for that element.

For example, the <img> tag, which is used to define an image element, can have attributes such as src, height, and width, which specify the source file, height, and width of the image, respectively.

Attributes are written within the start tag of an HTML element and are separated by spaces, and they have a name and a value, separated by an equal sign (=).

For example, <img src="image.jpg" height="200" width="300"> is an example of an image element with attributes.

HTML page structure

Let's make an example of a proper HTML page.

Things start with the Document Type Declaration (aka doctype), a way to tell the browser this is an HTML page, and which version of HTML we are using.

Modern html uses this doctype:

<!DOCTYPE HTML>

HTML is very simple and it is logical. A browser would start reading an HTML page from the top going down, from left going right.

It follows a basic structure. First, you have to declare that the document is an HTML document. You can do this by using the <!DOCTYPE html> and <html> tags.

<!DOCTYPE HTML>
<html>
  ...
</html>

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the same as the opening tag, but with a /:

<sometag>some content</sometag>

There are a few self-closing tags, which means they don't need a separate closing tag as they don't contain anything in them.

The html starting tag is used at the beginning of the document, right after the document type declaration.

The html ending tag is the last thing present in an HTML document.

Inside the html element we have 2 elements: head and body:

<!DOCTYPE HTML>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and Javascript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

This metadata is not displayed on the webpage but provides important information to browsers and search engines.

The title element is placed within the head element and displays the title of the website in the browser tab.

Inside body we will have the content of the page. The visible stuff.

The body element contains the actual content of the webpage, such as text, images, videos, and more. Heading elements, such as h1 to h6, are used to define headings of different levels, with h1 being the highest level and h6 being the lowest level.

Headings are used to structure the content of a web page and provide hierarchy and organization.

The p element is used to define paragraphs of text on the webpage, and it is used to group and format text content into paragraphs.

Example

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My First Page</title>
</head>
<body>
  <h1>The most important heading.</h1>
  <p>The first paragraph.</p>
  <h2>Subheading</h2>
</body>
</html>

Try it Yourself →

To start writing HTML code for your website you will need an HTML editor. Let’s speak about HTML editors in our next chapter.

🧪 Quick Quiz

Who created HTML?

← Learn HTML

HTML Editors & Tools →