Interactive: Introduction to HTML

Time remaining/total left out of 2h 30m Lessons completed/total / 14 4.6 / 5

Why learn HTML?

Time required: 5m
Lesson URL:
Teacher: Will Critchlow

Why are we learning HTML?

While there is no need to be a fully-fledged web developer in order to be an effective web marketer, a career built on working with websites will inevitably result in occasionally needing to know how they work. HTML (HyperText Markup Language) is the foundation of the web and is the language that describes the structure of a web page. The HyperText refers to clickable links - the foundation of web marketing. The structure of markup allows for the application of styles - typically using Cascading Style Sheets (CSS).

This module will focus on learning to read and understand HTML rather than on being able to create websites from scratch. If you are interested in learning to develop your own sites, your DistilledU membership gives you access to a free month at Treehouse.

There are a variety of situations in which a working knowledge of HTML is important for marketers:

  • Creating effective specifications for designers and developers
  • Debugging why a particular page or site isn't working as it should
  • Checking for the implementation or placement of a link
  • By far the least important: building actual prototype pages and simple landing pages

The markup in HTML relates to the fact that HTML provides additional information around the human-readable / human-viewable text and images that make up a web page. This additional information can group sections of text together, insert links to other pages, provide meta information about the page or section, add machine-readable information, or add semantic information about the meaning of particular sections of the page.

It is good practice to keep your markup focussed on semantic properties of the underlying information rather than on the way in which it should be displayed. The design and layout should be handled by the stylesheets. A good example of the difference is in denoting something a headline (which would be a H1 in HTML) versus denoting it as larger, bold, and a different color from the surrounding text (which should be handled with styles).

In this introductory lesson, you should have learnt that:

  • HTML stands for HyperText Markup Language
  • Markup should be used for adding structure and semantic meaning to text
  • Styles in general (and CSS in particular) are used to add layout and design information to markup

Introduction to HTML

Time required: 15m
Teacher: Will Critchlow

Edit the title

Time required: 10m
Teacher: Will Critchlow

Add a link

Time required: 10m
Teacher: Will Critchlow

Add nofollow to a link

Time required: 10m
Teacher: Will Critchlow

Add a header

Time required: 10m
Teacher: Will Critchlow

Adding emphasis

Time required: 5m
Teacher: Will Critchlow

Add alt text to an image

Time required: 10m
Teacher: Will Critchlow

Add an ID to a div

Time required: 10m
Teacher: Will Critchlow

Add a class to a span

Time required: 5m
Teacher: Will Critchlow

Add a canonical version

Time required: 10m
Teacher: Will Critchlow

Add a meta noindex

Time required: 10m
Teacher: Will Critchlow

Go and try it out

Time required: 20m
Teacher: Will Critchlow

HTML Q&A

Time required: 20m
Teacher: Will Critchlow