Home  |   Community Forum  |   MagicEdit.com  |   Demo  |   Sign Up

Instant Website Editing. MagicEdit lets web designers quickly add browser-based editing to just about any website.

  • Published on | Jan 05, 2012 | by Rob Watts

HTML Clinic 1 - The Zen of Web

Clinic 1 | Clinic 2 | Clinic 3 | Clinic 4

So you always wanted to learn HTML and didn't know where to start? Welcome to our web clinic, where we expose HTML for what it is: really quite fun and simple!

But before we begin you need to forget everything you know or think you know about HTML.

What is HTML?

HTML stands for HyperText Markup Language, which is just a fancy way of saying it's a way to make text link to other text, and also add a bit of formatting. At its core, the Web is just a bunch of content (usually text) linking to other content.

HTML is not a programming language like C or Java or BASIC. You don't need to know programming principles to learn it, since it's just text with some markup to tell the web browser how and what to display.

The Fundamentals

Like any discipline, learning the fundamentals is critical. Too many novice web designers want to go for the slam dunk and start implementing jQuery image galleries without even knowing the difference between an inline element and a block element. C'mon, man! It's not hard stuff, so take a few minutes to learn, and everything else will be easier.

Here are some tips for mastering the fundamentals.

  1. Keep it simple. Simple is more robust and easy to fix.

  2. Understand what you are doing. Even if you cut and paste someone else's code, make sure you understand it.

  3. Don't flail at problems. Stressed? Under the gun? Take a break, then come back and approach the problem systematically. By the way, this is kinda hard to do if you skipped step #2.

  4. Determine best practices and stick to them. Yours might be different than mine, but find what works for you. Don't keep reinventing the wheel.

Definitions

Some people like bandying big words around to prove how smart they are. Either that, or acronyms that only they understand but don't really mean anything. Here are some simple definitions that may help clarify some things for you.

HTML: Determines what is on the page

I already defined what the HTML acronym stands for, but good luck learning anything from that. All HTML does is present content on a page. Mostly text and images. It's the "What" of the web.

CSS: Determines how it looks

The first "S" in CSS stands for Style. That's all you really need to know. Styles make HTML look like something. Could be pretty, could be hideous. Colors, fonts, sizes, backgrounds, borders, margins, that sort of stuff.

JavaScript: Changes things on the page

JavaScript is actually a programming language similar to C. Once stuff is on the page, JavaScript can change it. It's not the same as Java, so it could just as easily have been called "WebScript" or "DocuScript" or something equally lame, but "JavaScript" just sounds cooler.

jQuery: Makes JavaScript easier

Remember how I mentioned that HTML isn't programming? Well, most web designers aren't comfortable with writing native JavaScript, so along comes jQuery to make things easier. jQuery lets you change things on the page using some of the techniques you learn from CSS and HTML, hence making JavaScript more palatable to web designers.

Anatomy of a Page

So, what are the basic elements of a web page? Turns out it's pretty simple, so check this out.

First, you need to tell the web browser that it is looking at an HTML page. Seems obvious, but there you go. Everything is inside the HTML.

Then, you can divide the page up into two sections: the body of the page that contains your content, and the stuff that describes and modifies that content. We just call the body, well, the body. And everything that describes and modifies the content is in what we call the "head" of the page.

In the Head

On a ship, the head is pretty critical (you know, the john, the loo, the WC). Hard to live without it, and the head of a web page is just as critical. Use it.

Ever heard of meta data? Sounds pretty hip, doesn't it? "Meta" is a word from the Greek that just means "about," but it doesn't sound as cool to call it "about data." So the meta elements in the head of the page just describe things about the page that are not actually part of the content. Common meta elements include the title and description. This is similar to the way modern digital cameras store meta data about each photo, including shutter speed, aperture, date, time, mother's maiden name, social security number, etc. (just seeing if you're paying attention). Meta data is used by both the browser and search engines.

The next common elements in the head are links to external style pages. These are common pages used throughout your website that describe your styles (borders, margins, backgrounds, etc.).

Finally, we have links to scripts, which should normally be stored in separate files just like your styles are. If you want to use jQuery, a fancy image gallery, or do some other fun stuff, you usually link to those script files in the head.

[update] Putting scripts in the head still works fine, but best practices have evolved to putting them at the end of the page just before the closing body tag. The reason for this is that scripts can be slow to load and execute, and they are executed when they are encountered on the page. Putting them after all of your HTML makes sure that the page is displayed as quickly as possible.

In the Body

Sometimes you describe something in the negative. What does not go in the body? The answer is the stuff that I already mentioned that lives in the head.

That may seem obvious, but it wasn't always that way. Back in the day, all your styles and scripts were mixed up in your content. One morning a web designer woke up and realized that mixing style and content was like eating your ice cream with your pizza. Yuck. The rest of the design community soon came to the same realization, so here we are.

What does go in the body is content, as well as containers for that content. And by content I mean text, images, navigation, links to other pages, and so on.

Tags

An HTML tag describes a particular HTML element. Usually that means having a starting and ending tag, with the content of the element in between. For instance, a paragraph looks like this:

<p>You miss 100 percent of the shots you never take. — Wayne Gretzky</p>

Some tags don't have a closing tag, but these tend to be the exception rather than the rule:

<img src="logo.jpg" alt="Logo" />

Nesting Tags

Each summer, the tag pairs return to their nesting grounds to hatch and raise a new generation of hypertext. Their journey: perilous; their chances: slim.

Actually, nesting just means putting one tag inside another. The most important thing to notice is that tags must be balanced. So do this:

<div>
  <p>
    Some stuff.
  </p>
</div>

NOT this:

<div>
  <p>
    Some stuff.
  </div>
</p>

Closing a parent tag before closing a child tag is invalid, so watch out for that.

Note content inside each tag is indented. This is common practice for visually representing the fact that the content is nested. A good HTML editor will indent for you as you type, and indenting is one of those aforementioned best practices. Rely on it.

Block vs. Inline

Most HTML elements are what we call "block" elements, meaning by default they are a box that takes up the full available width and grows to the height of its content.

Some elements are "inline" by default, meaning they flow inline with the text. Inline elements include things like images and text modifiers that format the text in some special way (think bold, italics, superscript, subscript, etc.). Another commonly used, general purpose inline element is the "span," which is always handy in a pinch.

You can always change a block element to an inline one, and vice versa. For example, you could turn images into block elements by making the following declaration in your external style sheet:

img {
  display: block;
}

The Box Model

The box model describes how HTML elements are formatted, including the widths of the element itself along with padding, border, and margin.

If you set a size on an element (using width and height), it defines the size of the content area. If you add padding, border, or margin to the element the content area size doesn't change, but those attributes are added to the outside. For example, if you set a width of 100px (100 pixels) to your element and a border of 2px all the way around, the total width of your element on the page will be 104 pixels, accounting for the border on both sides.

I've just described the "standard" box model. Pretty simple, eh? Well, the box model used to make novice web designers weep because Internet Explorer used a different box model than other browsers. It's like Microsoft decided to define a meter as being 90 centimeters instead of 100. It wreaked havoc with layouts. Web designers had to come up with all sorts of tricks to keep their designs consistent across browsers. If you HAVE to support IE 6 (thankfully it is finally near death), here's a quick rule:

If you set a width or height on an element, do not set padding or border.

Usually you would set a width on a parent container (like a DIV element), and nest another element inside it with no width but with your desired padding and border.

Wrapping Up

So, we covered some best practices, definitions, page architecture, and the box model. Continue on to Part 2 where we discuss writing HTML and CSS once and reusing it, along with some more best practices for keeping things simple and organized.

Note: Feel free to download the presentation files below and use them however you like.

Cheers!

Rob Watts is a co-founder of MagicEdit. He grew up in a publishing family but pursued a career in applied physics before being pulled into web application development. He first learned HTML in about 1995 and has occasionally regretted it ever since (mostly when dealing with IE).

Join The Discussion