About the Author

Chris Shiflett

Hi, I’m Chris: web craftsman, community leader, husband, father, and partner at Fictive Kin.

Learning HTML and CSS

I've been a web developer for a decade and a half. I've learned a lot along the way, and I'm comfortable with a lot of web-related technologies. But, I'm not very good at HTML and CSS, and I've decided it's time to do something about that.

I'm learning HTML and CSS.

When I ran my first marathon, I read a book called the Non-Runner's Marathon Trainer. One of the first few chapters explains that you should choose a marathon and tell everyone you know you're running it. This helps motivate you, because you feel as if you've made a promise. You're on the hook.

I'm putting myself on the hook.

Now that I'm on the hook, it's time to get started. I'm reading a book Jon Tan reviewed a few months ago called HTML and CSS Web Standards Solutions. I think it's going to be a perfect fit.

I know HTTP pretty well. Perhaps because HTTP is so familiar, I took a few notes while reading the first two chapters that I'd like to share with you in the hopes it will help you understand the Web a bit better.

From Chapter 2:

The .html part is important: it is a suffix, referred to as an extension, that tells the browser the document is a web page.

This isn't strictly true. URLs don't have file extensions, although it can appear so because of how easily you can map a URL to the filesystem, and how common it is to do so. The Content-Type header indicates the content type. This is why a URL like http://shiflett.org/about doesn't appear to have a file extension, yet browsers still know to treat it as HTML.

As a matter of design, I think URLs should always be carefully considered. As I've written before in URL Vanity and URLs Can Be Beautiful, they play an important role in how your site is perceived. Unless a file extension is meaningful, such as when the resource is an image, get rid of it.

A file extension can seem important if the resource is something users might download. Luckily, it's not even necessary in this scenario; you can indicate your preferred filename with the Content-Disposition header. For example, regardless of URL, you can suggest the filename foo.bar as follows:

Content-Disposition: inline; filename=foo.bar

Also from Chapter 2:

The last thing we need to ensure our pages validate is a character encoding.

The suggested way to do this is with a meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

A meta tag of the http-equiv variety is a substitute for an HTTP header. Adding this tag is useful, and the W3C Validator even suggests it. Pages still validate without it, but you'll receive the following warning if you leave it out:

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

In order to prevent problems, including some security vulnerabilities, be sure to always indicate the character encoding, and make sure you're consistent.

Now it's time to read Chapter 3. I hope you enjoyed this quick HTTP lesson.

About this post

Learning HTML and CSS was posted on Mon, 26 Oct 2009. If you liked it, follow me on Twitter or share:


1.Paul Reinheimer said:

I'm always glad to see experianced people go back and re-examine the basics like this. Kudos.

I'd honestly never considered the situations where the html document would be saved to disk/cd/etc. but that's a valid and compelling reasons to stick the meta tag in. Until now, I'd really only been concentrating on setting the correct HTTP headers so browsers would understand what they were recieving without a start -> restart.

Mon, 26 Oct 2009 at 21:27:08 GMT Link

2.Lars Gunther said:

Good catches. As an educator I understand that sometimes you must take the easy route, though, and a few of the misconceptions may be just that: simplifications.

While you are at it, you might consider the HTML5 version of the charset declaration, short and sweet, just like the doctype:

<!DOCTYPE html>
<meta charset="utf-8">

I see a lot of looking over the nose at HTML and CSS from back end developers - and consequently a lot of crappy HTML and CSS on the web. Having someone like you perhaps with one foot in both camps can really serve a purpose!

(Yes, I see a lot of crappy PHP code from Front End developers as well.)

Mon, 26 Oct 2009 at 22:01:15 GMT Link

3.Kae Verens said:

I remember printing out the HTML 4.01 specs back in about '99 or so, and spending weeks reading them.

I had nothing much else to do.

I find it interesting that, even though I'm not a designer, whenever there's a questions about HTML or CSS in the office, I'm the one that's asked.

It's never been my business to know HTML. I've always been a programmer.

But, I do find it is incredibly useful in my day/day job, even though I don't write it directly.

I work with PHP and JavaScript.

On the PHP side, the HTML is usually just a little bit - just enough to get the job done.

On the JavaScript side, even though I still don't write a lot of HTML, it's very good to understand how it all hangs together, as the DOM is mostly about how to manipulate it.

Mostly, though, I think that knowing HTML is not actually all that important. Understanding how it works with the DOM, and which elements are block/inline, etc, is what's important.

What you're doing is also very important. I think that as an experienced person looking back at HTML from the ground up, it's cool to see you picking apart the basicas and pointing out how they're not /quite/ right.

Obviously the author of the book you're reading chose to make some assumptions (that the reader wouldn't know how to send Content-type headers, for example), but the "picking-apart" you're doing is probably even more educational than just reading the book.

Keep it up.

Mon, 26 Oct 2009 at 22:58:40 GMT Link

4.Jake Smith said:

Congrats Chris. I started in HTML/CSS before I touched PHP, so I guess I took a different approach. Do you plan on learning all the fun IE/Browser quirks? Those are real fun ;)

- @jakefolio

Tue, 27 Oct 2009 at 01:06:30 GMT Link

5.Chris Shiflett said:

Thanks for the encouragement, Paul. It feels a little awkward to admit to not knowing HTML and CSS very well, but I don't think I'm alone.

Lars, you wrote:

I see a lot of looking over the nose at HTML and CSS from back end developers - and consequently a lot of crappy HTML and CSS on the web.

This is something I've noticed as well, and I'd like to help change this perception. We'll all be better off.

Thanks for the HTML5 example as well. That's next on my list of things to learn.

Kae, thanks for the thoughtful comment, and especially for the encouragement.

Jake, I intend to learn everything I can. Whether I'm capable is another question. :-)

Tue, 27 Oct 2009 at 01:32:17 GMT Link

6.sapphirecat said:

Also note that if anything includes a character set in the Content-Type header, this overrules the meta tag. So if you're experiencing problems with that, make sure there's no AddDefaultCharset in apache, nor default_charset in php.ini.

(IMHO, AddDefaultCharset is always wrong and should not exist. I've never seen it produce anything but problems.)

Tue, 27 Oct 2009 at 18:37:46 GMT Link

7.Himlal Pun said:

Hello. I do read your blog regularly. Now this is something very interesting and encouraging for PHP programmers...learning HTML and CSS.

BTW!! I can see you are learning HTML and CSS for more to relate web security.

Looking forward for your next post.

- Himlal Pun

Wed, 28 Oct 2009 at 05:29:23 GMT Link

8.Nicklas Persson said:


As one of the authors of the aforementioned book, let me first of all say thank you for reading our book, and for your kind words about it. I too hope it will prove A Perfect Fit.

As far as your comments regarding .html and <meta> encoding are concerned, they are both of course valid. We had a long and rather involved debate about whether introducing HTTP headers into mix would would be too advanced – or maybe too specialised is a better word – for the majority of our readers. We came to the conclusion that it was.

When you know a subject really well, reading anything that touches on it will always lead to the feeling that the author isn't telling the whole story. In order to keep the narrative going you have to make simplifications in certain areas.

As you mentioned, not including the <meta> tag will lead to your HTML document being labelled with a warning when put through the W3 Validator - this is in fact one of the main reasons we included those particular paragraphs.

(Similar reasoning went into the discussions that preceded writing the  "The .html part is important..." section.)

It's delightful to see that one of our esteemed readers (That's you Chris) is taking the time to expand on these sections and explaining the intricacies of HTTP, and content headers - so we don't have to :)

Thank you kindly!



Thu, 29 Oct 2009 at 12:57:43 GMT Link

9.bucabay said:

I have to warn you. Once you dive into HTML and CSS you lose a few years of your life debugging IE quirks. If it wasn't for the PHP - that just ran - I would have gone insane years ago.

Thu, 12 Nov 2009 at 08:12:12 GMT Link

10.Des said:

I came across this post while searching for an "Elements of Style" for web design. Good stuff - thanks.

I did find this: http://www.amazon.com/dp/B0030BFX12

I thought it was cool - more 'philosophy of design', though.

I have run into a lot of 'designers' who don't know how to code, and a few (very few, thankfully) programmers who don't think it's worth their time to delve into HTML. It's good to see someone who sees value in understanding the whole picture.

Sun, 13 Dec 2009 at 06:50:01 GMT Link

Hello! What’s your name?

Want to comment? Please connect with Twitter to join the discussion.