Whether you want to be a programmer, a web designer, mobile app developer or get some other tech related job, having a strong knowledge of HTML is extremely helpful. Nearly all tech touches the Internet in some way, and HTML is the backbone of the entire web. Learning how to read and write HTML, even if you ultimately won’t work with it by hand , will provide a strong foundation.
At its most basic, HTML is just a specially formatted text file that describes how to display a web page. You can use simple text editors like Notepad or more sophisticated development tools like Visual Studio, Adobe Dreamweaver, Brackets, etc… to easily create and edit HTML files. I’ve included some links to some common editors at the end of the post. I’ve also included a link to an HTML playground page that allows you to edit HTML and preview the results in real time right in your browser.
It’s all about tags
Everything in HTML is made up of a tag. These are small pieces of text surrounded by brackets that describe to the web browser something about the document or what to display on the page.
Every HTML document (page) starts with the HTML tag, which looks like this:
<HTML> or <html> (tag case doesn’t matter).
Most (but not all) HTML tags have a closing tag that signifies when the tag ends. A closing tag is the same as the opening tag, but has a forward slash (/) after the first bracket, before the tag name. Just as the <html> tag starts a document, the </html> tag closes it. Not every tag has a closing tag, but most do. I’ll explain the tags that don’t have a closing tag in the future – but most that you will use do.
Some additional examples of tags (which I will define later): <strong>, <p>, <a>, <div>, <script>, <img>
I’ve included a link below in the resources to a full list of HTML tags for reference. I won’t be covering every one but they all work in a similar way.
HTML Is Hierarchical
An HTML document is processed from top to bottom. Tags are put between other opening and closing tags to create the structure of the page. Tags act as containers for other tags.
Every HTML page has two sections inside of the html tag. The first is the <head> section, and the second is the <body>. Note that blank spacing and line feeds are for readability – they are not necessary and are ignored by the browser.
Example:
[html light=”true”][raw]
<html>
<head>
</head>
<body>
</body>
</html>
[/raw][/html]
Notice that <head> and <body> are both inside of the <html></html> tags. Additional tags go inside of the <head> and <body> tags to create the page.
The HEAD Tag
The <head> tag represents the header of the document. Don’t confuse it with the header at the top of a page that contains menus and navigation. This section is not displayed on the page itself – it contains information about the document, such as the title, search engine keywords, character set, linked external files, etc..
The most common tag inside of <head> is the <title> tag. Whatever you put between <title></title> is what is shown in the title bar or tab in a web browser, and is also used by search engines. Example:
[html light=”true”]
[raw]
<head>
<title>Learning HTML From Scratch</title>
</head>
[/raw]
[/html]
That will set the page title to Learning HTML From Scratch. Notice that <title></title> surrounds the title, and that the title tag is inside of the <head> tag.
The BODY Tag
Unlike the <head> section, <body> is what is actually displayed in the browser. Whatever is inside of the <body> section is what is shown as the page itself in the browser. It is where the bulk of your tags will go. The contents of body are processed from top to bottom. Here is a sample:
[html light=”true”]
[raw]
<html>
<head>
<title>Sample html page</title>
</head>
<body>
<strong>Hello World!</strong>
</body>
</html>[/raw]
[/html]
This will show Hello World! in bold in the browser. The example contains one other tag – strong, which will be explained in more detail later. The strong tag makes text bold (you will also encounter pages that use the b tag, which does the same thing but has been deprecated in favor of the strong tag and using css styling for bold).
This is a web page at its most basic, but this is the basis for every web page. You can view the sample above as a web page here.
Summary of Part 1
An HTML page is just specially formatted text that a browser reads to display a web page. It uses tags to define the structure and details of the web page. A tag often has a corresponding closing tag which indicates where that tag ends. Every HTML page starts and ends with the <html> tag. Inside of the <html> tag, there are two sections – <head> and <body>. The head section contains information about the page, and the body section is the actual content of the page that gets displayed.
To experiment on your own, use a text editor and create a new file. Put in the html, head and body tags. In the head section, put a title between two title tags. In the body, put in some text and make some of it (or all of it) bold by surrounding it with the strong tag. Save the file with an .html or .htm extension, and then open the file in a web browser to see the results. Just go to the folder where you saved the html file and right click on it and select Open – it should open in your default web browser. You can right click on the page in your browser and select View Source to view the HTML.
In the next part, I’ll explain html tag attributes to create links, display images, and more.
Resources:
Notepad++ (Free text editor with HTML highlighting)
Brackets (Free code editor)
Visual Studio Code (Free code editor)
A list of all HTML tags (for reference)
Lightweave HTML Playground (for experimenting with HTML in your browser in real time)