computer-science.dev
Docs
computer-science.dev

Lesson 2: Structure

HTML documents start with a document type declaration and a root <html> tag. Inside the root tag, we find the head and the body.

The head holds metadata, browser icons, search engine settings, and stylesheets. The body contains the visible content of the page.

To build the MachineLearningWorkshop.com homepage, we start with the essential layout parts: the doctype, language declaration, character set, and document title.

Add to every HTML document

Always include the doctype, language declaration, character set, and document title on every page.

Doctype

The preamble <!DOCTYPE html> tells the browser to display the page using modern web standards. Always make it the first line in your file.

The html tag

The <html> element is the root tag. It wraps the head and body.

Content language

The lang attribute on the HTML tag defines the main language of the page, using standard language codes (like en-US for American English). You can also add lang to individual tags inside the body to flag foreign phrases for translation tools and screen readers.

<span lang="fr-fr">Ceci n'est pas une pipe.</span>

The head tag

The <head> element wraps document metadata, while the <body> element wraps the visible layout.

<!DOCTYPE html>
<html lang="en-US">
  <head> </head>
  <body></body>
</html>

Required components inside the head

Always declare the character set, title, and viewport configurations inside the head.

Character encoding

The charset declaration must be the first tag in the head. We use UTF-8 since it supports all characters and emoji.

<meta charset="utf-8" />

Document title

The title tag defines the text displayed in the browser tab and search result headings. Make sure each page has a unique title.

<title>Machine Learning Workshop</title>

Viewport metadata

The viewport meta tag ensures your site is responsive, preventing mobile devices from scaling down content to fit a desktop screen layout.

<meta name="viewport" content="width=device-width" />

If you want to be explicit, include:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=1"
/>

The page is now set up with the basic minimum structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Other head content

We also use the head to declare scripts, stylesheet links, icons, and canonical URLs.

CSS

You can load styles using external stylesheet files with the <link> tag, or write them directly inside <style> tags.

<link rel="stylesheet" href="styles.css" />

Using external files is usually better because the browser can save the file and load it faster next time.

Always load styles in the head. This ensures the browser knows how to design your elements before drawing them on screen, preventing a brief flash of unstyled content.

The <link> tag defines relationships to external resources using the rel attribute.

Favicon

Use rel="icon" to set the page favicon. You can define multiple sizes for different devices.

<link
  rel="icon"
  sizes="16x16 32x32 48x48"
  type="image/png"
  href="/images/mlwicon.png"
/>

You can also specify icons for specific mobile devices or browser tabs.

Alternate versions of the site

Use rel="alternate" along with hreflang to link to translated versions of your page.

<link
  rel="alternate"
  href="https://www.machinelearningworkshop.com/fr/"
  hreflang="fr-FR"
/>

Canonical

Use rel="canonical" to declare the main, official URL for the page. This helps search engines like Google index the right link.

<link rel="canonical" href="https://www.machinelearning.com" />

Scripts

Use the <script> tag to load JavaScript to add interactivity. Use the defer attribute to load the script in the background so it does not slow down the page.

<script src="js/switch.js" defer></script>

The defer attribute downloads the file in the background and runs it only after the document finishes rendering.

Base

The <base> tag sets a default starting link for all links on your page. We rarely use this, so feel free to skip it for now.

<base target="_top" href="https://machinelearningworkshop.com" />

HTML comments

Use comments to leave notes or temporarily disable markup. Comments start with <!-- and end with -->.

Here is how our header outline looks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" src="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link
      rel="alternate"
      href="https://www.machinelearningworkshop.com/fr/"
      hreflang="fr-FR"
    />
    <link
      rel="alternate"
      href="https://www.machinelearningworkshop.com/pt/"
      hreflang="pt-BR"
    />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>
    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

Now we have structured the header. Next we will explore meta configurations.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).

Prev
Lesson 1: Blackbird Combinator
Next
Lesson 2: Bluebird Combinator