Jon Rohan » HTML

Jon Rohan — Mon, 14 Sep 2009 17:00:58 +0000

I like to mix it up on my blog, sometimes posting experiments, and sometimes posting fundamental front end posts. This is a fundamental, but a crucial step in creating a website. Choosing the correct DOCTYPE for your site.

What is the Document Type Declaration?

A proper DOCTYPE is essential for the correct rendering and functioning of a website in compliant browsers. If you forget to declare a DOCTYPE, on use an incomplete one, then the browser will render in quirks mode, in which the browser will try and be backward compliant leaving you with a website that might as well have the hard hat under construction animated gif on it.

There are typically 3 types associated with each lang version. Strict, transitional, and frameset. Use Strict when you want a pure website that only uses the lang version’s current tags. Use transitional, when you have a site that you will be using some depreciated tags. Use frameset, when you include frames.

Pure Clean HTML

The HTML DTD are the most typical you’d find on websites. Use the HTML definition when writing plain old standard HTML. Great thing about this is by using standards there’s no surprises for any browsers when parsing your page.

HTML 4.01 Frameset

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 5

I love the new HTML 5 DOCTYPE. Why? Because this is all it is.

X is for Extreme

The X in XHTML actually is referring to the fact that XHTML documents are XML conforming. This means that XML tools can more easily validate and parse the HTML. Another advantage of XHTML is that it is as extensable as XML. Meaning you can create your own html tags and use them, here’s an example of what I mean.


  
    A Math Example
  
  
    The following is MathML markup:
     $3 x$

This can be extremely useful when you are using an unofficial webstandard like microformats, foaf, etc…

Here are the declarations for XHTML.

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

So which do I choose?

Let me answer this question with a question. What will be the focus of your site? When you are building a site that will be viewed on non-standard browsers (eg. some mobile browsers, the kindle, the wii) then XHTML is your best choice. When you are building a site that’s gonna be viewed in standard browsers, (eg. firefox, safari, ie, opera) then HTML is what you should be using.

To decide how to pick between Strict, transitional, and frameset, this really depends on your coding style. I think you should use Strict and in special circumstances use transitional and frameset. My favorite at the moment is the HTML 5 DTD, it’s extremely simple to remember.

Getting Started with HTML 5

Jon Rohan — Tue, 01 Sep 2009 16:18:32 +0000

HTML 5 is the next major iteration of HTML, and I know I’m excited about it. I recently added some new HTML 5 markup into dinnermint. It was a very quick and simple change, which I believe will help clear up some of the

soup.

The New Tags

There are some new tags in the HTML 5 specification, that I believe will lead to more semantic code. And what I mean by that is the code says what it does. You’re no longer left wondering what those

tags are for, when you see a tag like

you know what it is for.

The Layout

There are lost of tags I could have used, like aside, audio, video. I plan on playing around with those later, but for now I set up a basic layout consisting of a header, nav, article, footer like so.

These elements behave like typical block level elements. But are more semantic, if you aren’t sure of the benefits of this check out this post I wrote on CSS class names. If you are thinking about setting up your site, you can at least use header, footer, nav. If you do setup your site, there are a few things you should know.

DOCTYPE One of my favorite new features of HTML 5. Now you don’t have to remember a long DOCTYPE when starting a page, just use and that’s it!
HTML 4 Browsers Sigh, unfortunately not all browsers are on the same page, what you’ll need to do so these elements will be rendered like plain old block elements is below.

Add this to your stylesheet, this just reminds the browsers how to display these tags.

header, section, footer,
aside, nav, article, figure {
  display: block;
}

Add this to the Beginning of the tag. This is important for IE browsers, all it is doing is creating an element in the dom for each of the html 5 tags so it doesn’t ignore them. It’s important you place this script before any html 5 tags are used, at the top of the page.

Targeting IE6 for style

Targeting IE6 for style

Jon Rohan — Sun, 31 May 2009 16:35:18 +0000

I wanted to share with you my preferred method of targeting CSS to IE6.

Conditional Comments

I prefer this method because it keeps the CSS cleaner, and when the apocalypse hits and IE6 is no longer relevant it’s easy to remove code specific to IE6.

The idea behind this method is, you would write your code how you normally would for any standards compliant browser. Then you would go back and in the ie6.css sheet you would add “overrides”. Because CSS (Cascading Style Sheets) is by design built so that style classes lower on the page take higher priority, this should fix your issue.

So you would put something like this in your global.css

.textarea {
   border: 1px solid #000;
   padding: 3px 5px;
   margin: 5px;
}

and you would put this in your ie6.css

.textarea {
   border: 1px solid #FF0000;
}

The margin and padding properties are inherited so all you are changing is the border color. And it only occurs in IE6 because of the Conditional Comments.

What is your preferred IE targeting method? Leave a comment below.