Writing your first HTML page

Your workspace is ready and you know what a browser does. Time to write real code. In this lesson you will create the skeleton of your portfolio’s home page, understand every line of it, and learn the vocabulary (tags, elements, attributes) you will use for the rest of the course.

The skeleton of an HTML5 page

Every HTML page follows the same frame. Open index.html in your portfolio folder and type this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya Carter – Photographer and illustrator</title>
  </head>
  <body>
    <h1>Hello, I’m Maya</h1>
    <p>Welcome to my portfolio. It is under construction.</p>
  </body>
</html>

Save it, then open the file in your browser. Congratulations, you have made a web page. Replace “Maya Carter” with your own name and subject.

Breaking down the code line by line

• <!DOCTYPE html> tells the browser this is a modern HTML document. It always goes on the very first line. Without it, browsers fall back to an old compatibility mode that can make your page behave oddly.
• <html lang="en"> is the root element that contains everything else. The lang attribute declares the language of the content, which helps screen readers pronounce the text correctly and helps search engines and translation tools.
• <head> holds information about the page. None of it appears in the window itself.
• <meta charset="UTF-8"> declares the character encoding, so accents, symbols and non-Latin alphabets display properly. Keep it near the top of the head.
• <meta name="viewport" ...> tells mobile browsers to use the real device width. You will see its full importance in the responsive chapter. Adding it now is a good habit.
• <title> sets the title shown in the browser tab, in bookmarks and in search results.
• <body> contains everything visible: text, images, links, forms.

Tags, elements and attributes

HTML is written with tags: names between angle brackets. Most come in pairs, an opening tag <p> and a closing tag </p> (with a slash). The complete assembly of “opening tag, content, closing tag” is an element.

<p class="intro">A paragraph with an attribute.</p>

Here class="intro" is an attribute. It adds information to the element. Attributes always sit in the opening tag, and are written as name="value", with straight double quotes around the value. Some attributes act as on/off switches and have no value, such as required in forms.

A few elements, called void elements, have no content and therefore no closing tag. The most common are <br> (line break), <img> (image), <meta> and <input>.

Nesting: elements inside elements

Elements sit inside one another, like Russian dolls. The rule is simple: close what you opened last, first.

<p>I take <strong>portraits</strong> and draw <em>landscapes</em>.</p>

Here strong and em are inside p. A construction like <p><strong>text</p></strong> overlaps the elements and is an error. Browsers try to guess what you meant, which can lead to surprising results.

Indentation reveals nesting. Each time you open an element inside another, move the line two spaces to the right. If a closing tag does not line up with its opening tag, you probably have a mistake.

Block and inline elements

By default, elements behave in one of two ways:

• Block-level elements, like p, h1 or div, start on a new line and take the full available width.
• Inline elements, like strong, em or a, flow inside a line of text and only take the space they need.

This distinction will matter a lot when we style pages with CSS.

How the browser treats whitespace

To the browser, any run of spaces, tabs and line breaks in your source code collapses into a single space. That is why you can indent freely without changing how the page looks. It also means that pressing Enter twice in your HTML does not create a gap on screen. To separate texts, use separate paragraphs. Use <br> only when a line break is part of the content, as in an address or a poem.

Comments

A comment is a note for humans. The browser ignores it completely.

<!-- TODO: add the list of projects here -->

Comments are useful to remind yourself of what remains to do, or to mark the start of a big section. Do not put secrets in them: anyone can read your page source.

Common beginner mistakes

• Forgetting a closing tag, which makes the rest of the page behave strangely.
• Using curly “smart” quotes in attributes, often pasted from a word processor. Attributes need straight quotes: ".
• Editing the file but viewing an old version: save, then refresh.
• Saving the file with the wrong extension, for example .txt.
• Writing tags in the wrong place, such as visible content inside the head.

Your turn

Turn the placeholder page into the start of your portfolio home page.

1. Change the title to your own name followed by a short description.
2. Replace the h1 with a greeting that includes your name.
3. Add two paragraphs: one about what you do, one about what visitors will find here. Put one word in <strong> and one in <em>.
4. Add a comment marking where the list of projects will go.
5. Save, refresh, and then open the Elements panel to check that the tree matches what you wrote.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya Carter – Photographer and illustrator</title>
  </head>
  <body>
    <h1>Hello, I’m Maya Carter</h1>
    <p>I am a <strong>photographer</strong> and illustrator based in Lyon.</p>
    <p>Here you will find my <em>latest</em> projects and a way to get in touch.</p>
    <!-- TODO: list of projects -->
  </body>
</html>