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