Introduction to HTML

The Skeleton of the Web

Every website you visit, from a simple blog to a sprawling news site, is built on a foundation of HTML. Think of HTML as the skeleton of a webpage. It doesn't determine the colours, fonts, or animations – that's the job of other technologies. Instead, HTML provides the fundamental structure, telling the browser what each piece of content is: this is a heading, that's a paragraph, and here's a list of items.

HTML

noun

Stands for HyperText Markup Language. It's the standard language used to create and structure the content of web pages.

HTML uses a system of 'tags' to define different types of content. These tags are like labels you wrap around your text and images. We'll look at how these work in a moment. For now, just remember that HTML is all about structure and meaning, not appearance.

The Basic Blueprint

Every HTML document follows a standard structure. It's a bit like the blueprint for a house, with specific areas for different purposes. This boilerplate code ensures that any web browser can understand and correctly display your page.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my very first paragraph.</p>
  </body>
</html>

Let's break down what each part does:

<!DOCTYPE html>: This is a special declaration at the very top. It tells the browser that the document is a modern HTML5 page.
<html>...</html>: This is the root element. Every other element on the page goes inside it.
<head>...</head>: This section contains meta-information about the page that isn't displayed in the main browser window. Things like the page's title, which appears in the browser tab, go here.
<body>...</body>: This is where the magic happens. All the visible content – your headings, paragraphs, images, and links – lives inside the body tags.

Building with Content Blocks

The core of HTML is its elements, which you create using tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Whatever you put between them becomes that type of element.

Headings and paragraphs are the most basic building blocks for any text-based content.

To create a main heading, you use the <h1> tag. For subheadings, you use <h2>, <h3>, and so on, all the way down to <h6>. This creates a clear hierarchy for your content, which is important for both readers and search engines. For regular blocks of text, you use the paragraph tag, <p>.

<h1>This is the main heading</h1>
<p>Here is some introductory text.</p>
<h2>This is a subheading</h2>
<p>And here is some more text that falls under the subheading.</p>

For lists, you have two main options. If the order of items doesn't matter, use an unordered list (<ul>). Each item in the list is then wrapped in a list item tag (<li>).

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

If the order is important, like in a recipe, use an ordered list (<ol>). The browser will automatically number the items for you.

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Making Connections

The web wouldn't be a 'web' without links. To create a hyperlink, you use the anchor tag, <a>. This tag needs extra information to work: the web address you want to link to. This extra information is called an attribute.

The href attribute specifies the destination of the link.

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

In this example, href is the attribute name, and "https://www.wikipedia.org" is the attribute value. The text between the opening and closing <a> tags is what becomes the clickable link on the page.

Images work in a similar way. You use the <img> tag, which is self-closing – it doesn't need a closing tag. It requires a src attribute to specify the source of the image file. It's also crucial to include an alt attribute. This provides alternative text for screen readers or if the image fails to load.

<img src="images/cat.jpg" alt="A photo of a fluffy cat sleeping.">

Attributes like href, src, and alt are essential. They provide the extra details HTML elements need to function properly, adding a layer of information that brings your structured content to life.

Quiz Questions 1/5

What is the primary role of HTML in web development?

Quiz Questions 2/5

In an HTML document, which pair of tags encloses all the visible content of a webpage, such as headings, paragraphs, and images?

You now have the basic building blocks to structure any webpage. With these simple tags, you can create a clear, organised, and connected document that any browser can understand.

Foundations of Web Development