Doing HTML Right – diyhosting.bhh.sh

We've noted that HTML is very forgiving

A look at a decent template

I have a template file that I use for this website that includes all the basics. When I make a new page, I just copy the template and add the content. Here is what the template looks like:

<!DOCTYPE html>
<html lang=en>
    <head>
        <title>Your page title</title>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel='stylesheet' type='text/css' href='style.css'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='alternate' type='application/rss+xml' title='Site Title RSS' href='/rss.xml'>
    </head>
<body>
    <header><h1>Your page title</h1></header>

    <nav></nav>

    <main>

    Put all your page content here in the <main> tag.

    </main>

    <footer></footer>
</body>
</html>

Explanation of All These Important Things

<head> contains page metadata, including:
- <title>, the page title that appears in a browser tab.
- The charset, which tells the browser what encoding to use (this ensures unicode characters will display)
- The favicon is the little site icon that open appears in the browser tab. Just create an .ico file and put it in favicon.ico and each page will read it.
- The stylesheet is the CSS stylesheet, which is extremely important for making your site look good and we will get to in the CSS lessons.
- The RSS feed which is a file you can create to give users updates about your site. We'll talk about making an RSS later too.
<body>, which usually designates what content will visibly display.
<header>, which is a semantic tag that where we use to put the main page title in.
<nav>, a place to store a navigation bar later. I use a script to automatically update the bar on all pages and it looks for this tag.
<main>, designates where the main text of the document is.
<footer>, the content appearing at the bottom of the document, I also manage this like nav, with a script.
<<++>>, <++>
<<++>>, <++>

The Importance

If you're new to this world, you might be wondering why you should use body and main and nav and header and all this seemingly confusing stuff! (Especially when even bad HTML displays!)

Not only do many devices, especially mobile ones, specifically use these tags for their features, but when using CSS, we can also style each of these elements the way you want them to appear without changing the HTML on all your pages.

With CSS, we can say that we might want the whole body to have a image background, but main should be floating over it semi-transparent. We can tell nav to float off on the left or right and we can change footer and nav settings just by tweaking the CSS.

Speaking of which, we've been talking up CSS for a while, so now it's time to learn it!

Next: Styling with CSS