How To Code A Simple Website From Scratch Part 2: Beginning the HTML
So now that we have our web design sectioned off and the dimensions and styles written down from yesterday, we’ll now move on to HTML coding. I decided to split the HTML in 2 sections, since there’s so much to explain. I’ll explain the code line by line, including the head information, and show you how each looks with the previous lines (so you’ll get a sense of what a full document looks like). If you have any questions, don’t hesitate to ask them in the comments! To get started you need to open a new file in your code or text editor.
The Basic HTML Tags Every Site Needs
Before you can begin your actual HTML coding, you need to tell the browser how to read the code. This is done by use of a doctype, beginning HTML tags, and the head section. These items are essential to your web site, and often will not work, or will display very poorly if left out. The head section also contains necessary meta information (we’ll explain this later). If you’re using Dreamweaver (code view only please), when you open a new document, it will put most of this information in there for you, which is helpful so you don’t have to memorize or type this in every time you start a new site.
Also, every open, or beginning tag, needs to have a closing tag somewhere or you’ll have never ending problems. Tags like <div>, <body>, <html> or other tags that have content in them, will use a closing tag such as </div>, </body>, or </html>. Tags like images, meta and links, will “self close” Example:
<img src="image.jpg" />
The “/” closes the tag. Get it?
Declare Your Doctype
The first line of code we need to write is the doctype. The doctype tells the browser specifically how to read the following HTML code and in what W3C standards (the people who take care of HTML) to display this in and how it will be validated. There are several doctypes you could technically use, but I prefer the XHTML Strict 1.0. It’s one of the newest standards to use, and it’s a lot cleaner to go this route (although some claim it’s difficult to validate in, it really isn’t). Here’s what you’ll need to write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Start Your HTML
Every web page has to have <html> tags at the beginning (after the doctype) and end of the document. This tells your browser to begin reading the proceeding text as HTML and not as anything else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
So far this is all pretty simple right?
The Head Section
As I started to explain before, the head section contains basic information about your website. It holds the title tag, which is the information displayed on the top of your browser (normally the website title) and also tells search engines what to call your website. It also contains meta data that help search engines rank and categorize your site based on keywords. This is also the section that links to your CSS and Javascript files. First you’ll need to open your head tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Now you’ll need to tell your browser how to read the characters, or character encoding. Most often, you’ll never need to change this. (There’s a problem with copying/pasting from Word Documents into HTML that might cause you to need to change this)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
From here we’ll jump to the page’s title. For SEO purposes, you always wanted to include the title of the website, along with the name of the page and/or a few keywords that explain what your page is about:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amber's Really Cool HTML-Lovin' Website</title>
Meta tags come next. There are two basic meta tags: one for description and one for keywords. The description meta tag contains a small paragraph explaining the existence of your site, and is normally what search engines display underneath your title in search results. The keywords meta tag contain short phrases or single words that “categorize” your website. Without getting into too much SEO, they also help you rank on search engines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amber's Really Cool HTML-Lovin' Website</title>
<meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/>
<meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/>
Last but not least, we need to include a link to our future CSS page and then close our head tag. This would also be where you would link to javascript, but we’re not going to add any on this site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amber's Really Cool HTML-Lovin' Website</title>
<meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/>
<meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/>
<link rel="stylesheet" href="main.css"/>
The Body Section
Now it’s time to actually begin coding our site. Before you start the actual HTML, or layout of the site, you must put it under a body tag. The body tag tells the browser to display everything in between.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amber's Really Cool HTML-Lovin' Website</title>
<meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/>
<meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/>
<link rel="stylesheet" href="main.css"/>
<body>
Figure Out What Sections You Need & Divs
Now do you remember all of our “sections” from yesterday? They were:
- Header
- Navigation
- Left Column
- Right Column
- Footer
We’ll take each of these section
s and turn them into a “div”. A <div> is a “division” (sort of like the <td> tag in tables) that wraps around the information contained within each div. Each div is given an id (# in CSS) or a class (. in CSS). If you’re using the element only once, give it an ID; if you’re going to use it multiple times, give it a class. For each section we’ll be using an ID, because we only have 1 header, footer, etc.
Tomorrow we’ll jump into the layout HTML in How To Code A Simple Website From Scratch Part 3: HTML Layouts
All “How To Code A Simple Website From Scratch” steps:
How To Code A Simple Website From Scratch Part 1: Preparing the Design
How To Code A Simple Website From Scratch Part 2: Beginning the HTML
How To Code A Simple Website From Scratch Part 3: HTML Layouts
How To Code A Simple Website From Scratch Part 4: Fancy CSS
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Very well said Amber! This should help some of the newcomers.
Excellent
Another great write up Amber. I read it a couple of days ago and got interrupted before I commented so I had to reread it this morning to refresh my memory. It was just as interesting as the first reading.
I like that you decided to break the HTML into two parts so that you could explain the head section separately from the body. The line by line walk-through and explanation was a great way to present it. Very informative.
I am still using the XHTML Transitional Doctype yet on the sites I am working. I was going to switch to the Strict, but now with W3C announcing that they are going to HTML5 instead of staying with XHTML I might just stick with Transitional for now and then move to HTML5 in the near future.
Have you found that adding keywords still has an effect on SEO? I have read that most search engines pretty much ignore them now.
@Keith HTML5 isn’t going to be out for a VERY long time. Also, HTML 5 is not a replacement for HTML4 and XHTML 1, that it’s more an upgrade of the features, so you still need to be validating in XHTML 1.0 strict to keep up with the standards, otherwise it’s going to be harder for you to work with HTML5….W3C never goes backwards, so you might as well learn validation standards now
Check out this link for more info http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/
Thanks for the link, it was an informative read. In that case I will switch to using the XHTML1.0 Strict instead from now on.
I was curious how close my mark up was already so I took a a web page that I did last week with the Transitional Doctype that had validated at W3C and put in the Strict Doctype statement. I redid the validation and got one error back. I had a [target="_blank"] on a page link. I removed it and it validated as Strict with no errors. Does Strict not allow for target attributes?
@Keith Yea that’s one sucky thing about Strict…I just use a bit of jQuery to replace the target blank.