Skip main navigation

HTML in a nutshell

Article briefly discussing the basics of HTML.

HTML – or HyperText Markup Language – is a standardised way to create documents to be displayed and used in a web browser. It is not a programming language; it is a web-based markup ‘language that identifies the meaning, purpose, and structure of text within a document’. [1]

A first look at HTML

HTML documents are text files that are usually distributed to a web browser through a web server or local storage and then rendered to a multimedia web page. Web pages are built using HTML elements, which come in a variety of forms and enable the creation of all sorts of content – everything from basic paragraphs to forms, buttons, and images.

Consider the following ‘document’ and the difference between how the text is structured:

Image shows basic text hierarchy: H1 heading size reads "About Dogs". H2 hierarchy reads "Why do dogs make such great pets". Body hierarchy reads "Humans and dogs go back tens of thousands of years, but most breeds only emerged during the 1800s. Dogs and grey wolves diverged from an older extinct wolf and share a large percentage of their DNA."

Your word processor will be able to understand the structure and layout of this text, but it still needs to be ‘translated’ for the web so that the meaning is conserved. For this example to appear and function correctly on the web, developers add tags, or ‘elements’, to the text.

In this basic example, the main element we’re concerned about translating is the hierarchy of the headings. Headings can be ‘tagged’ as <h1>, <h2>, <h3>, and so on. The different tags act as instructions for how the browser should render the content. In this case, <h1> indicates a higher level of heading than <h2>.

Headings are just one type of element developers need to tag to make content for the web; things can get quite complicated fairly quickly when other elements are required (e.g. video, audio, lists, links).

How does HTML work?

HTML structures content on a page and instructs browsers how to display that content. While HTML can be used alone, it is usually paired with cascading style sheets (CSS) to systematically control the web page’s appearance and behaviour and programming languages such as JavaScript to extend its functionality and interactivity. This is partly why HTML, CSS, and JavaScript share a high popularity ranking, as you learned in the poll.

A basic familiarity with HTML and CSS is now a requirement of anybody joining a web design team. You may not be responsible for creating the final production code for the site, but as HTML and CSS are the native languages of your medium, you need to know your way around them. – Jennifer N. Robbins, Learning Web Design (2018) [2 p. xiii]

You will learn about CSS in Week 2 and Week 3. For now, let’s explore HTML.

HTML tags

Tags are like keywords that define how a browser will format and display that content. They tell the browser what to expect and how to interpret the content between the tags.

HTML tags include three main parts:

  1. Opening tag <tag>
  2. Content
  3. Closing tag </tag>

For example:

<h2>This is a heading 2 tag.</h2>
<p>This is a paragraph.</p>

There are many different tags you can use in HTML, and they each perform specific tasks. If you have used an open tag <tag>, you must also close the tag </tag> (except for some tags known as ‘empty elements’ or ‘self-closing elements’ – more on that later!)

HTML elements

As you can see in this image, an element is a collection of a start tag, its attributes and values, an end tag, and any content captured between the tags:

<img src="https://ugc.futurelearn.com/uploads/assets/03/a8/03a8763e-8da4-47c6-a5ec-3f334aa80861.png" alt="The graphics shows an element enclosed with tags. The code is labelled in order as follows: “Starting tag” points to “

” followed by “Content” pointing to “This is a red paragraph.” The last label is “End tag” pointing to “

”.”>

HTML tags are used to mark the start or end of an element, and attributes are used to provide supplementary information.

We’ll explore the structure of HTML in more detail and practice using essential elements in the next activity. For now, let’s pull back and note some of HTML’s primary design objectives. These include: [1]

  • encouraging semantic (meaningful) markup (rendering instructions)
  • separating design from content
  • promoting accessibility and design responsiveness
  • supporting rich media experiences while eliminating the need for plugins such as Flash or Java.

Over to you

To recap, HTML is a standardised and structured way to create and translate documents for the web.

Take a few moments to think about examples from your own life and experience of structured documents and the value in how they are structured. For example, this could be the headings in a word processor you use, the instructions to build a piece of furniture or toy, or maybe the way your learning or bullet journal is put together.

In the comments, share an example or two of ‘documents’ (including websites!) that you identified and what you find valuable about the way they’re structured.

References

  1. Wood A. HTML5 Basics For Everyone Tired Of Reading About Deprecated Code [Internet]. HTML.com; 2020 Jan 15. Available from: https://html.com/html5/#What_is_HTML
  2. Robbins JN. Learning Web Design: A beginner’s guide to HTML, CSS, Javascript, and web graphics. 5th ed. Canada: O’Reilly Media Inc. 2018. p. xiii.
This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education