Hack University - Your first HTML page

Elements, tags, and attributes

HTML exists because a browser receiving plain text could not tell a heading from a paragraph from a button. Markup makes the structure explicit so the browser, screen readers, and search engines can all act on it.

Everything you will ever ship on the web, from a dashboard to a checkout page, is delivered as this markup, so the syntax below is worth over-learning.

HTML is written as elements, and an element usually has three parts:

<p>Hello, web!</p>

Part	Example	Meaning
opening tag	`<p>`	the element name in angle brackets
content	`Hello, web!`	what the element holds
closing tag	`</p>`	the same name with a forward slash

Tags can carry attributes, extra settings written as name="value" inside the opening tag:

<a href="https://example.com">Visit example</a>

Here href is an attribute of the a element, short for anchor, which is a link.

A few elements have no content and no closing tag, such as img and br. These are called void elements, and forgetting that they need no closing tag is one of the first mistakes everyone makes.

One HTML element: an opening tag carrying an attribute, the content, and a closing tag that repeats the name after a slash.

The page skeleton

Every HTML file follows the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>My first paragraph.</p>
  </body>
</html>

<!DOCTYPE html> tells the browser this is modern HTML.
<head> holds information about the page: the tab title, the character set, and later your CSS. Nothing inside it is drawn on the page.
<body> holds everything the user actually sees.

Elements nest: the p sits inside body, which sits inside html. Indenting nested elements two spaces is a convention, not a requirement, but do it anyway. Your future self will thank you.

The source of the browser tab label

The tab text comes from the title element inside the head.

The head describes the page rather than drawing it, and title is the one head element with a visible effect, labelling the browser tab and the entry in search results.

Head element	Visible effect
`title`	the tab label and search result heading
`meta charset`	none directly, it decodes the text correctly
`link` to a stylesheet	none directly, it pulls in CSS

Because it doubles as the search result heading, the title is the most read line of markup on any public page, and a vague one such as "Home" costs real traffic.

A complete document, top to bottom

A full HTML document, from the doctype down to the closing tag. Every page in this course uses this same skeleton.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>My first paragraph.</p>
    <h2>About me</h2>
    <p>I am learning HTML from scratch, and this page proves it.</p>
  </body>
</html>

Line	Purpose
`<!DOCTYPE html>`	declares modern HTML
`<html lang="en">`	the root element, with the page language
`<head>`	the character set and the title
`<body>`	everything the reader actually sees

The body here carries a top-level heading, a paragraph, a second-level h2 heading, and one more paragraph. Content added to a page goes just before the closing </body> tag, which keeps the head untouched.

Closing a paragraph

A paragraph opened with <p> is closed with </p>.

Every closing tag is the element name in angle brackets with a forward slash before the name, so the only difference from the opening tag is that one extra character.

Opening tag	Closing tag
`<p>`	`</p>`
`<h1>`	`</h1>`
`<img>`	none, it is a void element

The rule has exactly one class of exception, the void elements, which have no content to enclose. Everything else follows the pattern without variation, which is why HTML is quick to read once the shape is familiar.