Build Your Page

Now it's your turn. The editor is empty, and you'll write the whole page yourself, including the parts that the editor has been adding for you in the background.

The instructions are a checklist of everything your page must contain, and they are checked from top to bottom: each time you click Run, the checks stop at the first item that isn't done yet. So you can run your code at any time to see which item comes next. The checks look only at the structure of the page, never at the text.

The skeleton. Start with the parts you know from the first lessons:

• the document type declaration <!DOCTYPE html> at the very beginning,
• the html element with the lang attribute, which tells browsers, screen readers and search engines what language the page is written in,
• the head element with the character encoding <meta charset="utf-8">, thanks to which letters like é or ñ display correctly, and with the page title (title), which you won't see in the preview, but the browser shows it on the tab,
• the body element with the visible content of the page.

The layout. Divide the body into three parts: a header with the main heading, main for the main content and a footer at the bottom, for example with the name of the author. Don't forget to indent: press Tab to indent each nested element one level more than its parent, so that you can see at a glance what is inside what.

The content. In main, write what your topic is about, why you like it or what's interesting about it. Add a list and highlight the important words. To make the page easy to read, you can divide the content with level-two headings (h2) or into section elements.

The image. You can use our picture of cats, /learn/html/cats.webp, or any image from the internet: right-click it, copy the image address and paste it into the src attribute. If the image doesn't appear, try a different one. And don't forget the alt attribute, which describes the image to people who can't see it.

The link. Point it to a website where visitors can find out more about your topic, such as Wikipedia. Visitors will probably want to come back to your page, so let the link open in a new tab.

The table. Think of something that fits into rows and columns, such as a schedule, a comparison or your best scores. The first row holds the column headings (th), the other rows hold the data (td). Don't worry if the table has no borders: how the page looks is the job of CSS.

The form. For example, a question for visitors or a poll. Each input needs a description in a label whose for attribute has the same value as the id of the input:

<label for="nickname">Your nickname</label>
<input type="text" name="nickname" id="nickname">

To do something with the data from a form, you would need a program on a server, and our page doesn't have one. So nothing will happen with the data yet, and this time you can leave out the action and method attributes.

Tip: Your code isn't saved when you leave this exercise. When everything is checked, copy it (Ctrl+A and Ctrl+C, on a Mac Cmd+A and Cmd+C): in the next exercise, we'll show you how to save the page on your computer.