How to Structure an HTML Document to Make a Web Page on Your Raspberry Pi - dummies

How to Structure an HTML Document to Make a Web Page on Your Raspberry Pi

By Sean McManus, Mike Cook

In order to make a web page on the Raspberry Pi, you will need to structure the HTML document correctly. A code snippet is a good way to see how HTML tags work and how your browser interprets them, but you need to include a lot more information and markup before you can create a truly valid web page.

An HTML document has two main parts: the header (between the <head> and </head> tags), and the body (between the <body> and </body> tags). The header is mainly used for information about the web page, whereas the body contains the actual content of the page.

Tags all work in the same way, with one tag opening and another closing. As you can see, it’s okay to have some tags inside some other tags. In this document, all the other tags except the first one are inside the <html> opening and closing tags.

You don’t need to memorize all these new tags, lucky for you, because here is a framework you can reuse and lightly modify for each new web page you create. You need to change just two bits for each web page you create:

  • <title> and </title>: Between these tags is the page title, which appears in bookmarks, search engine results, and in the title bar at the top of the browser (or the page’s tab, if you’re using tabs) when you’re visiting the page.

  • <body> and </body>: Between these tags is where you put all your web page content, so this section tends to be quite long when you’re working with a real web page. In this example, you can see that the HTML snippet is between the body tags.

For those who want to understand it all, here’s a breakdown of the rest of the document:

  • <!DOCTYPE html>: This tells the browser which version of HTML you’re using. You can see the DOCTYPE for HTML5, which is simply the word html. Older versions of HTML had long and complicated document types, and you’ll still come across these from time to time.

  • <html lang=”en”> and </html>: These tags are used to mark the start and end of the HTML document. The opening tag also specifies the language of the document, in this case, English.

  • <head> and </head>: These tags mark the start and end of the header. The only thing inside our header is the page title, but as you learn more about HTML, you’ll come across more tags that belong here.

  • <meta charset=”utf-8″ />: This tag defines the character set that is being used in the document, so that people using languages with different alphabets can say which one should be used. For this project, there is a character set called utf-8. You might notice there’s a slash inside the closing bracket on this tag. That’s because the tag doesn’t surround anything, so it doesn’t have a separate closing tag.

    In a previous version of HTML called XHTML, every tag had to be closed, so when there was no separate closing tag, a slash was put inside the closing bracket of the tag instead. Many people still consider this best practice, but it’s optional.

    [Credit: Leafpad written by Tarot Osuji with artwork by Lapo Calamandrei]
    Credit: Leafpad written by Tarot Osuji with artwork by Lapo Calamandrei

You can use spaces to indent the lines inside the header and the body and blank lines around both those sections, so you can more easily see where the header and the body start and end. People often do this: It makes the HTML easier to read and edit. HTML ignores blank space, so it doesn’t matter how much you use, or where you put it.

It doesn’t matter technically whether your tags are in uppercase or lowercase, but it looks tidier when it’s consistent and convention dictates lowercase for all the tags except for the DOCTYPE.

When you open that page in your browser, it looks the same as our previous code snippet did in the browser, except that you’ll see a title in the bar at the top of the browser, and it’s a valid web page now. You could publish this on the Internet if you wanted to, and it would work perfectly.

Because it looks just the same, you might wonder why you need to bother with all those other tags, then. The answer is that most browsers are quite forgiving and will try to work around your mistakes and omissions, but you can’t rely on that.

You don’t know which browser a visitor might use to view your website, so you need to provide all the correct markup, even if a page works well on your Raspberry Pi. Other browsers or devices might not be able to cope with an invalid HTML document as well as Midori can.