Introduction to HTML

HTMLCSSCode EditorHTML TagsHTML ElementsVS CodeStructural ElementsSemanticsMain ElementHead ElementHeader ElementArticle ElementFooter ElementAside ElementMeta DataInline ElementsNav ElementMarkupMeta ViewportMeta DescriptionList Elements

Introduction

Throughout this course, we will look at HTML in more detail and learn how to use it when creating a website.

A few notes about HTML:

  • HTML stands for HyperText Markup Language.
  • Any website you visit has been created with the use of HTML.
  • Every web page is an HTML file.
  • HTML is made up of short codes typed into a text file by the creator of a site. These codes are known as tags.
  • When the text is saved as an HTML file and opened by a browser, such as Google Chrome, the browser translates the text into the webpage that was intended to be created.

Code Editors

Because HTML is written as text, a program as simple as Notepad (PC) or TextEdit (Mac) can be used for this purpose. Yet, these have minimal functionality. They don’t offer functionality such as syntax highlighting and error spotting in your code.

We recommend using VS Code as your code editor. It is a popular choice for front-end developers. We also suggest plugins such as Prettier, which automatically formats your code for you and Live Server, which allows you to code on one screen and have the browser update on another screen as you work.

Other code editors include Atom, Brackets and Sublime.

If you already have a code editor you prefer, you’re welcome to use that.

ℹ️ INFO

Try using a dark theme with less contrast, as this can be less tiring on your eyes than a white theme. Using a dark or white theme is about personal preference, so try different options to see what works best for you.

A Basic HTML page

Below you can see the markup of a basic HTML page. We will be going through the page looking at each element separately.

What is important to know is that an HTML page is made up of HTML elements. These elements are written using HTML tags. An HTML tag has a simple syntax which is a letter or word enclosed by the < symbol at the beginning and the > symbol at the end. For example, you have the paragraph tag like this: <p>. You have opening and closing tags, which look the same, but the closing tag includes a “/” symbol, so </p>. You have your content between the opening and closing tags, for example, <p>This is the paragraph text content</p>. When the browser reads this, it creates a paragraph element with the content between the tags. Note that some tags, like the <img> image tag, are self-closing, meaning that it doesn’t require a closing tag. The content between the tags can be textual, or you can have other tags inside of the parent tag, creating, you guessed it: children elements.

The same principle goes for all the other tags in the example code below; the <body> tag creates a body element, and the <nav> tag makes a navigation element, etc. The terms “tag” and “element” are often used interchangeably, but it is nice to know the distinction between them to understand how HTML pages work in the browser in conjunction with JavaScript, which you will learn later in this programme.

HTML markup example:

html 
	<!DOCTYPE html>
	<html>
	  <head>
	    <title>My first website | Home</title>
	    <meta name="description" content="The home page to my first ever website." />
	    <meta name="viewport" content="width=device-width, initial-scale=1" />
	  </head>
	  <body>
	    <header>
	      <img src="logo.jpg" alt="Logo for My First Website" />
	      <nav>
	        <ul>
	          <li>Home</li>
	          <li>About</li>
	          <li>Contact</li>
	        </ul>
	      </nav>
	    </header>
	    <main>
	      <section>
	        <h1>Hello world</h1>
	        <p>Welcome to my website. Here I'll be putting into practice all the things I've learned.</p>
	      </section>
	    </main>
	    <footer>
	      <p>
	        If you need more info, you can
	        <a href="https://twitter.com">find me on Twitter</a>
	      </p>
	    </footer>
	  </body>
	</html>

The HTML element is also an object you will learn more about later. You can manipulate these objects using JavaScript. So to re-iterate, the browser creates a bunch of HTML elements when it reads the HTML document containing your HTML tags.

Doctype Declaration

<!doctype html> is a so-called doctype declaration and is necessary at the top of each HTML page. The declaration lets the browser know to interpret the page as HTML.

Head

The <head> element of the document contains non-visual metadata about the page, yet it is not displayed on the page. The metadata defined in the head might include the page title, descriptions of the page, styles, scripts, viewports, links, and more.

html 
	<head>
	  <title>My first website | Home</title>
	  <meta name="description" content="The home page to my first ever website." />
	  <meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
📄 DOCUMENTATION

For further information, please check out the MDN docs: What’s in the head? Metadata in HTML.

Title

The <title> element sets the title of the document. You can see the title displayed on the browser tab. It is also the title that is displayed on search engines, so it is important to pick clear, unique titles for each page. On most websites, the title will contain the site name and the page name. For example, "Business Name | Contact Us".

⚠️ WARNING

The <title> element should not be confused with the <h1> element. For more information, check the MDN docs.

Meta elements

<meta> elements are used to add extra information about the page. Two attributes that are a good idea to note: the description and viewport attributes.

Meta Description

The page’s meta description is vital for search engines as this text is displayed on a results page under the page’s title. It should be enticing and unique for each page on the website.

Meta Viewport

The visible area of a page (or viewport) varies a lot across devices, and so the meta viewport element <meta name="viewport" content="width=device-width, initial-scale=1"> provides a way to tell the browser how to control the page’s dimensions. Adding the meta viewport tag to your HTML document is crucial for creating websites that look good across devices.

Favicons

A favicon is a tiny icon representing a website in a web browser’s address bar, page toolbar, or bookmark menu. A favicon should be a square image with a recommended size of 16 x 16 pixels or 32 x 32 pixels. It can be in ICO, PNG, GIF, or JPEG format, but ICO format is the most widely supported for favicons. It is aimed at improving user experience and enforcing brand recognition. A good example is everyone recognises Google or Facebook from their icon on the web address bar.

See image below

Showing favicon in a browser

The image above shows the favicon of Google in the browser’s address bar.

How to make a favicon

There are several tools one can use to make favicons on the web. Here are a few examples of them:

Adding a favicon to a Webpage

To add a favicon to your website, you need to have the icon in a folder within your website. The naming of the folder does not matter, but the reference to the icon in your HTML page. However, there are familiar names such as assets, images, resources, etc.

The favicon should be referenced in the head tag of an HTML page with a link tag. See an example below

html 
	<head>
	  <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png" />
	  <link rel="icon" type="image/png" sizes="96x96" href="../assets/favicon-96x96.png" />
	  <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png" />
	</head>

In the above example, there are a few things to pay attention to:

link: This is a tag used to link an external resource to a web page. In our case, we are linking to a favicon. rel: This is an attribute of the link tag whose value denotes how the item being linked to is related to the web page. In our case, it is an icon. And apart from “icon” as a value, there are other values such as “apple-touch-icon”, “manifest,” etc. sizes: This attribute indicates the icon size. href: This indicates the MIME type of the resource being linked.

📄 DOCUMENTATION

For further learning, please check out the MDN docs: : The External Resource Link element.

Open Graph Tags

Open Graph is an internet protocol that was originally created by Facebook to standardise the use of metadata within a page to represent it’s contents. OG Meta Tags are snippets of code that control how URLs are displayed on social media.

You can find these tags within a <head> section of a webpage. OG tags are distinguished by having an og: before the property name.

Why do we need them?

Content shared on social media needs to be as clear as possible to ensure that the message they are meant to convey is shared effectively. People are more likely to see and click shared content with optimised OG tags which results in more traffic to a website.

Reasons for this:

  • They make content more eye-catching on social media feeds.
  • They tell people what the content is about at a glance.
How to use Open Graph tags

There are four basic OG tags that are required for each page:

  • og:title: The title of the page. This is typically identical to the <title> of a webpage.
  • og:url: The URL of the page.
  • og:image: This should be the link to the image that will represent the page. It should be a high resolution image that the social networks will use.
  • og:type: The type of object that is being shared. E.g, article, website, etc.

The above tags are not the only OG tags that are available. There are other OG tags such as og:description, og:locale,etc that can be specified but are not required.

An example of a webpage that uses OG tags:

html 
	<meta property=“og:title” content=“Introduction to Open Graph" />
	<meta property="og:url" content="https://www.example.com" />
	<meta property="og:type" content="article" />
	<meta property="og:image" content="https://res.cloudinary.com/image.jpg" />

Body

Everything visible on the page should go inside the <body> element. The <head> element is for all the extra information and styling for the page. HTML content that you intend to be displayed must be inside the <body>. We briefly mentioned the concept of nesting elements into a parent-children structure, which is a fundamental concept of HTML. To re-iterate, for example, a <div> tag is nested inside the <body> tag, which is nested inside an <html> tag.

ℹ️ INFO

Note below how nested elements are indented. Proper formatting makes the code easier to read.

HTML code example:

html 
	<body>
	  <header>
	    <img src="images/logo.jpg" alt="Logo for My First Website" />
	    <nav>
	      <ul>
	        <li>Home</li>
	        <li>About</li>
	        <li>Contact</li>
	      </ul>
	    </nav>
	    <h1>Hello world</h1>
	  </header>
	  <main>
	    <section>
	      <h2>My work</h2>
	      <p>Welcome to my website. Here I'll be putting into practice all the things I've learned.</p>
	    </section>
	  </main>
	  <footer>
	    <p>
	      If you need more info, you can
	      <a href="https://twitter.com">find me on Twitter</a>
	    </p>
	  </footer>
	</body>

Header

The header of a page contains an introduction to the page. It might include the logo, a heading and/or introduction to the page, the site’s main navigation, and a header image. It’s important to highlight the difference between <head> and <header>.

⚠️ WARNING
  • The <head> is used for extra information about the document.
  • The <header> is the introduction to the page.

Nav element

The <nav> element should contain your main navigation for the website. On most websites, you’ll likely have one <nav> element, while links in the footer do not need to be in a <nav> element. Suppose you have navigation to allow moving between pages, as well as moving around on that page. In that case, you might want to use the aria-labelledby attribute, which is your primary navigation, as you can see in this example on MDN.

UL and LI elements

In the HTML code example above, there is a <ul> element inside the <nav> element – an abbreviation of “unordered list”. We use it in this context because there is a list of links inside the navigation element. Each item inside the <ul> is a list item, denoted as <li>. By default, a <ul> displays as a bullet point list, but CSS can adjust this.

Another type of list you might see is an ordered list, denoted using the <ol> tag. An ordered list is where the order matters and, by default, is numbered.

Main element

You use the <main> element to group the page’s primary content. While the header introduces what the page is about, the main element is used for the actual content. This content should be unique to that page particular page.

ℹ️ INFO

Note that the navigation and primary heading should not be inside the <main> element but rather inside the <header> element.

html 
	<body>
	  <header>
	    <nav></nav>
	    <h1></h1>
	  </header>
	  <main>
	    <!-- page content goes here -->
	  </main>
	  <footer></footer>
	</body>

Inline comments

In the code example above, you can see an unusual-looking tag with this syntax <!-- text -->. This tag is a comment tag, which is used to communicate information about the code. This text will not be visible on the rendered page.

Section and Div

The <section> element is used to identify specific content sections. A separate sub-heading is often associated with each <section> element.

If you need a generic container and there is no meaningful reason for adding the element other than it gives you something to style, then the best element for that is the <div>. In general, try to find a semantic element. You can use a <div> if there isn’t one. Before HTML5, developers used <div> a lot, but now we have more meaningful tags that you should use where appropriate.

Headings

Headings are essentially titles for pages or sections on the page. Headings run from <h1> to <h6> and should be used in order of importance. Thus, <h1> is the most important heading on the page, then <h2> the second most important heading or headings, then <h3> the third most important and so on.

There should be one <h1> per page, which should be unique. You should also not skip headings (i.e. jump from h1 to h3 with no h2 on the page).

Paragraphs

Paragraphs, indicated with <p> tags, are blocks of text, usually a group of sentences with no line break. Do not use <br> tags if you want to break up a paragraph. Instead, close the paragraph and open another paragraph.

Footer

You can use the <footer> element to include additional information about the page. Typically, it will include the copyright information and additional links which users might find useful. It’s generally not very important information and is normally displayed right at the bottom of the page.

Semantics

In HTML, semantics refers to the meaning of a piece of code. Does the HTML code have meaning? We’d like our HTML to be meaningful because it makes the code easier to read, which is important for you and other developers.

Meaningful code also makes it more accessible. With good semantics, assistive technology can more easily make sense of the different elements on the page and their usage. The same logic applies to search engines. If every element on the page is a <div>, then all elements are seen as equal. It’s much better to use meaningful tags to identify what each section is about.

Good Formatting

Correctly formatting your code makes it much easier to read, and it thus becomes quicker to identify which elements are nested inside of other elements.

To practice good formatting of your HTML, here are key points:

  • Elements placed inside other elements should be indented to the right of the parent. For example, the body element is inside the HTML element and should be indented to the right of its parent.
  • The opening tag and closing tag should be indented the same amount.
  • Elements such as headings, paragraphs and images can be placed on one line.
html 
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<div>
	    <p>Curabitur tempus, mauris ac condimentum consequat, quam eros faucibus ex, at rhoncus elit lacus nec diam.</p>
	    <div>
	<p>
	Morbi in nisi non ex sodales suscipit eu id sapien. Etiam neque justo, tempus id laoreet id,egestas at odio.
	</p>
	    </div>
	</div>
	</div>

The example above is much more difficult to read than the example below, where indenting is used, making it quicker to scan through the code. You can use the TAB key to indent; most text editors will help you indent correctly. To format your code, you can use plugins such as Prettier.

html 
	<div>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	  <div>
	    <p>Curabitur tempus, mauris ac condimentum consequat, quam eros faucibus ex, at rhoncus elit lacus nec diam.</p>
	    <div>
	      <p>
	        Morbi in nisi non ex sodales suscipit eu id sapien. Etiam neque justo, tempus id laoreet id, egestas at odio.
	      </p>
	    </div>
	  </div>
	</div>
📄 DOCUMENTATION

For further information, please check out the MDN docs: HTML elements reference.

Activities

💻 WATCH

This tutorial video on laying out a basic HTML page. (15m 39s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.