HTML Documents

Learn the basics of the HTML syntax and some HTML elements.

We’re going to build web applications. What makes them different from typical applications is the use of HTTP as the main interface. HTTP is, by definition, a protocol for transferring hypertext. So, what does hypertext look like?

This document is hypertext. But also, there’s a whole language which tells the browser how to render the document. It’s called HyperText Markup Language (HTML).

This lesson is an overview of HTML. It aims to familiarize us with the language so that we can later use the HTML specification or references to solve specific problems. We’ll also mention CSS and JavaScript. We won’t cover HTML, CSS, and JavaScript in detail because they belong to front-end development. But still, we need to be familiar with these topics because the PHP application’s job is often to produce HTML documents.

HTML syntax

A simple HTML document looks like this:

Press + to interact
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roboworld</title>
</head>
<body>
<h1>Welcome to Roboworld</h1>
<p>Click <a href="/robots/">here</a> for some robot photos!</p>
<!-- This is a comment -->
</body>
</html>

This document has the title “Roboworld.” The browser will show it in the window title. Also, it has a header and a paragraph of text with a link to the /robots/ page.

Let’s look closer at what we see here.

Tags

The HTML document consists of elements defined by tags. We separate tags from the text content with angle brackets (<>). Usually, there are opening and closing tags. Everything between them is the element content. Both tags contain the element name. The closing tag also starts with a slash character.

For example, this is the heading element definition. The element name is h1.

Press + to interact
HTML tag pair for h1 element
HTML tag pair for h1 element

Attributes

The name and content aren’t always enough to define an HTML element. Each element can also have any number of attributes defined as key-value pairs in ...