Introduction to HTML

Introduction

HTML stands for HyperText Markup Language, and it is the language that powers the World Wide Web. It was invented in 1990 by Tim Berners-Lee, who envisioned a system of interlinked hypertext documents that would run on the growing global network known as the Internet. This system became the World Wide Web, and to this day HTML continues to be the language used to represent documents (i.e. web pages) on the Web.

HTML documents are simply text documents that have been marked up with HTML code, giving structure and meaning to a document. HTML code can be used to define and create HTML elements such as headings, paragraphs, hyperlinks, and images.

You can do many things with HTML:

Provide the main text content of a document.
Give structure to the content within a document.
Imply extra meaning within a document.
Define and create HTML elements like headings, paragraphs, links, and images.
Provide information to search engines that help them list and categorise your web pages.

All you need to create a HTML document is a computer with a text editor, and a little knowledge of HTML.

Starting with HTML

The code for a basic HTML page that is technically correct and reasonably interesting might look as follows:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

This will display the text "My First Web Page" in the title bar and a "Hello, world!" heading in the browser window.

Note the HTML tags used in the code. These are the sets of pointy brackets with the text inside. HTML tags define the structure of the web page, including HTML elements like headings, text, images, links, and buttons.

The first tag is the <!DOCTYPE html> declaration, which declares to browsers and search engines that the page is to be interpreted as a HTML 5 page.

Most of the tags come in opening and closing pairs. For example, the tag on the second line is <html>, an opening tag that tells browsers and search engines that the HTML document has begun. The last tag is </html>, a closing tag that tells that the HTML document has ended. Within these two tags is the rest of the HTML document. When one tag is enclosed within another tag we say it is nested within the tag.

The title of the web page is enclosed in opening and closing tags: <title> and </title>. The page heading is declared between the <h1> and </h1> opening and closing tags. Each of these sets of tags defines a HTML element. HTML elements can have context, like text or even other nested HTML elements. The entire structure of a web page can be defined using only a few lines of HTML. Let's do that now.

Write Your Own HTML

In order to write your own HTML file, all you need is a basic text editor, like Notepad, Nano, Notepad++, or even something fancier like VS Code. You also need the ability to give .html extensions to files.

If you are using Windows 10 then file extensions are hidden by default. To view them, go into Explorer, select View from the menu, and ensure that File Name Extensions is ticked. If you are using Linux then file name extensions should be visible by default.

Now that you can see the file name extension, you can change it. A web page ends in the .html extension, so if you create a new text document you can simply rename it to something.html, where something is the name of your web page. The standard name for a website homepage is index.html, but you can name your file whatever you like so long as it ends in .html.

Open your file in a text editor (like Windows' Notepad) and type out a basic HTML skeleton document to write your first web page.


<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Save the HTML document, and then view it in a web browser (such as Microsoft Edge, Google Chrome, or Mozilla Firefox). You can do this in Windows by dragging your HTML file from Explorer into a web browser window. If everything has worked according to plan, you should be viewing your first HTML web page! If you wish, you can change the text contents of the <title> element or the <h1> element to change the text displayed in the browser tab and the browser page respectively.

Understanding the Document

Before we continue, it would be nice to know what is going on in the HTML document we just wrote. As already explained, the <!DOCTYPE html> tag tells browsers to expect a modern HTML 5 page. It is not technically part of the HTML document itself. The HTML page is defined as everything between the opening and closing <html> tags.

Within the <html> tags are the <head> and <body> tags. These elements are children of the <html> element, because they are nested within it. The HTML <head> should contain all of the information about the web page necessary for web browsers and search engines to display and categorise a web page. In our case the only content of the <head> element is the <title> element, used by the web browser to display a title in the browser tab or the title bar, and used by search engines to categorise your content.

The <body> element is also a child of the <html> element. The <body> element contains all of the elements that create visible content on a web page, e.g. headings, text, and images. In our case, the only child of the <body> element is our <h1> element, printing a heading on the web page, but we can add more elements to <body> if we want to add more information to our web page.

Headings

Headings come in six sizes, from <h1> to <h6>. These signify the importance of the content beneath them. There should only be one <h1> heading, and lower numbered headings go directly under higher numbered headings, so subheadings of <h1> should be <h2> and subheadings of <h2> should be <h3>. When a lower ranked heading element is added to a section, a new subsection in the content is created.

It is considered poor HTML to use the differently numbered headings just to make text larger or bolder. There are other ways to do these things. HTML heading elements should be used as category headings, to title and classify the hierarchy of content within a webpage. Later, we can use CSS to change the style of headings and text, but you will want to learn a bit more HTML before you learn CSS.

Paragraphs

<p> tags are used to enclose paragraphs of text within a web page. For example:

<p>Here is a sentence of text</p>

A default browser with default styling will usually put some space between paragraphs of text, giving them visual definition on a webpage.

Hyperlinks

Combined with out basic HTML template, headings, and paragraphs, we already have the ability to write basic web pages with categorised information in them. But the "HT" in HTML stands for hypertext. Hypertext is text that links to other texts. This is one of the essential concepts that drives and makes the World Wide Web possible, and is one of the things that makes it so powerful. The ability for text to link to other text transforms web pages from linear documents into interactive information linked in a World Wide Web that spans the entire Internet.

To put a hyperlink on the page we use the anchor tag <a> enclosing the text that will become our link. For example, here is a link to Google:

<p>Here is a link to <a href="https://www.google.com">Google</a>.</p>

The text enclosed by the anchor tag is now a link. Here, The href attribute of the anchor tag is set to the web address (or URL) of the page which we will be the destination of our link. This may be an absolute address or a relative address, which we will discuss soon. For now, know that if you want to link to another page in the same directory as your original HTML file, you can link it simply by including the destination page's file name as the href attribute. e.g.

<p>This link goes to a <a href="secondpage.html">second page</a>.</p>

We can also link to areas on the current web page, as long as they have unique id attributes. This is done by using a hash symbol followed by the id of the target element to which we wish to link.


<p>This link takes you further <a href="#link">down the page</a>.</p>
<h2 id="link">This heading is the destination of the above link.</h2>

Note that you can set a link to open in a new tab by giving it the target attribute with a value of _blank. e.g.

Here is a link to <a href="https://www.youtube.com">YouTube</a>.</p>

Links can be used to enclose things other than text content, such as headings or images, thereby turning those elements into clickable links.

Images

As exciting as text and headings and hyperlinks are, we may wish to add images and other multimedia to brighten up our web pages.

Images may be added to web pages using the <img> element. Unlike most of the tags we has seen so far, image elements do not have closing tags. There is only one tag in an <img> element, which closes itself. This is called a self-closing tag. It is good practice to end a closing tag with a space and a forward slash to close the tag, although this is not necessary.

<img src="doge.jpg" alt="A smiling dog" />

Image elements also have attributes, which we have seen but not really discussed. Attributes are key and value pairs added to an opening tag to represent additional information or modify the behaviour of a corresponding element. The href and src attributes are examples of this. If more than one attribute is specified in an element, the order in which they are specified does not matter. HTML attribute values are always enclosed in double quotes.

There are two important attributes for the <img> tag: src and alt. Source, or src, is the URL of the image to be displayed. This can be a location on the Internet, or, if you are the only person you care about viewing your webpage, it can also be a location on your hard drive like a folder or your desktop. If the location of your HTML file and your image file are the same (e.g. they are in the same folder) then you do not need to provide a path to your file and can give only the filename as the src attribute. Otherwise you can provide a relative or absolute path (discussed later).

The alt tag is equally important, as it used for accessibility and devices like screen readers, which will read the alt text as an image description to visually impaired users. Alt text will also display if the image fails to load. Alt text should be descriptive and provide an alternative to the actual viewing of the image as far as making sense of your web page content is concerned.

Your First Project

Now is the time to make your first project! "What am I going to make?" you might ask. You can make anything, from an informational page, to a book or movie review, to a short story, or you could even make a joke page. You just need to decide on a subject, type out the HTML template, give it a <title>, and fill in the <body> element with hierarchical headings and paragraphs. Include links and images where you see fit, but try to include at least one of each so you can practice your skills.

Remember for the sake of simplicity, if you keep all of your HTML files and images in the same directory, then you can reference them in <a> or <img> tags simply by using the filenames as attribute values (without having to include the full path to the files). If you need a reminder on how a HTML document or any of the elements work, remember to refer back to this guide.

Happy coding!