Doing HTML Right – LandChad.net

- -

- 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 - -