HTML Basics

In this series, we will go through the basics of HTML. This is basically what you need to know before moving to CSS or JavaScript. Although there are lots of things in HTML but you only need to learn the basics in order to get started and even when you need something that is not covered here, it will be easy to learn.

Projects

At the end of this series we will build a blog page and a contact form page all with HTML only and we are not going use any CSS styles.

Environment Setup

Text Editor

The first thing that you need is a Text Editor to write your code. A Text Editor will help you with syntax highlighting, code auto completion, code suggestion and more. We will be using Visual Studio Code but you can use Sublime Text or any other editors. To install Visual Studio Code go to code.visualstudio.com and download the latest version.

VS Code

Web Browser

In order to view our html page, we need a web browser and we are going to test our pages in Google Chrome but you can use Firefox or any other web browsers.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is not a programming language but rather it is used for structural purposes on a web page. The way HTML does that is by using HTML elements. HTML itself does not execute anything like a program and it all relies on the browser that is viewing the HTML code. Here is an example of a simple HTML page:

<!DOCTYPE HTML>
<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
  	<h1>This is a heading</h1>
  	<p>This is a paragraph</p>
  </body>
</html>

The result of the example code will give us this page:

Sample HTML Page

Elements and Tags

As you can see in the example above, we see a new type of syntax that starts with an angle bracket < follows by a word and ends with another angle bracket > like <html>, <head>, <body> , etc. These are called html tags and they tell the browser where a specific HTML element starts and ends.

Another thing we notice is that most of the html elements in our example are having a starting tag and a corresponding closing tag. For example the title element has the opening tag <title> and at the end of the element we have the closing tag </title> and the way we know that the tag is the closing tag is by the forward slash / before the name of the tag.

Most of the html elements have a closing tag but there are some that do not have a closing tag.

Let’s go through the example we covered and see what each line means:

  • <!DOCTYPE HTML> Tells the browser what is the document type and the html version (in this case html5)
  • <html> element is the root element of the page
  • <head> element is the document header that can contain the title, meta information, external resources, etc.
  • <title> element is the document title. The one you see in the browser tab
  • <body> element contains all the visible content. So if you want to display something in your page, it should be inside the body element.
  • <h1> represents the heading element
  • <p> represents the paragraph element

We can also nest the HTML element inside each other. In our example the title element is the child of the head element. The paragraph and the heading elements are the children of the body element which happens to be the child of the html element.

Creating Your First HTML File

I will create a folder called mySite in the desktop. let’s open VS Code and click File on the menu and then click Open Folder... . Browse to desktop and select the folder we have created. We can create a new file in our folder either from the File menu or by clicking the new file icon next to the folder name or we can right click in the folder area and select New File. I will click the new file icon next to the folder name and name my file index.html (.html is the extension of an html document) hit enter and our file is now created.

We will write the example that we saw earlier and save the file.

<!DOCTYPE HTML>
<html>
  <head>
  	<title>My Website Title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

We can save the file by going to the File menu and then click on Save or we can use the keyboard shortcut CTRL + S and the file will get saved.

Now in the file explorer, we can simply right click on the file and either click Open to view the file in the default web browser or under Open with menu, select the web browser that we want. And that’s it, we created our first html file! And we can view it in the browser!

Sample HTML Page

Elements vs Tags

Before we end this episode, Keep in mind that when we refer to a HTML element, we are referring to the whole element from the starting tag to the closing tag but a HTML tag is just the tag itself. So in our example, the title element is <title>My Website Title</title> but the title tag is just the tag <title>.

By knowing that in an html document, we are dealing with elements and their tags, then the way to master html is understanding different elements and how to modify them.