For my third blog post, I chose to pick a site that goes into perfecting a lot of the HTML coding that we've learned in class, as well as goes into more specifics about some of the elements that didn't receive a lot of attention, like the DOCTYPE.
The site is called Bulletproof HTML ( http://articles.sitepoint.com/article/html-37-steps-perfect-markup ), and it covers the basic codes and the proper ways to use certain codes with the goal of helping people create more concrete websites, which is always a concern when writing code. I won't outline all of the 37 steps the site covers, I'll just point out some of the more interesting things to keep in mind when coding a website.
The following are direct quotes taken from the site:
5. What does the
DOCTYPE declaration do? The DOCTYPE declaration, which must precede any other markup in a document, usually looks something like this:
It specifies the element type of the document's root element (HTML), a public identifier and a system identifier.
The public identifier (-//W3C//DTD HTML 4.01//EN) shows who has issued the document type definition, or DTD, (W3C); the name of the DTD (DTD HTML 4.01); and the language in which the DTD is written (EN, for English). Note that it doesn't say anything about the language of the web page itself; it is the language of the DTD that is specified here.
The system identifier (http://www.w3.org/TR/html4/strict.dtd) is the URI (uniform resource identifier, or "web address") for the actual DTD.
The DOCTYPE declaration tells a validator (a program that checks the syntactic validity of a web page) against which DTD it should test the page for compliance. Browsers didn't used to care about the DOCTYPE declaration, but modern browsers use it to decide whether the page is "modern" (and presumably expect the behaviour detailed in the W3C HTML documentation) or old-school (and expect the browser to render the page with all the bugs and quirks exhibited by older browsers). A document's DOCTYPE affects the rendering mode used by Internet Explorer, Opera, Firefox (and other Mozilla-based browsers), Safari, and most other modern web browsers. A complete DOCTYPE declaration -- including the system identifier -- tells the browser that this is a modern document. If the system identifier is missing, or if there is no DOCTYPE declaration at all, browsers assume that this is an old document and render it in "quirks mode".
6. What is a DTD?
A DTD, or document type definition, specifies the element types and attributes that we can use in our web page. It also defines the rules of how we can use these elements together -- it's the specification for our markup language. The DTD can also declare the character entities we can use; more about those later.
A validator will test a web page for compliance with the DTD specified in the DOCTYPE declaration either explicitly, via the system identifier, or implicitly, using the public identifier. Browsers use non-validating parsers and do not actually read the DTD. They have built-in knowledge about the various element types, and usually a hard-coded list of character entities as well.
For HTML 4.01, which is the latest and greatest version, there are three different DTDs: Strict, Transitional and Frameset.
17. How should heading elements be used?
HTML heading element types are h1, h2, h3, h4, h5 and h6. The number denotes the structural level of the heading, which means we should treat headings as we did in those outlines we had to learn in school (and promptly forgot about right after graduation).
The top-level heading on a page must be an h1. It should describe what the page is about. Most pages will have one h1 heading, but very complex documents that deal with several disparate topics may need more than one.
h2 headings will mark up the next structural level. Any sub-levels under that will be h3, and so on. We can never skip a heading level as we move downward through the hierarchy. An h4 should not follow an h2; there should be an h3 in between. (The validator will not complain about this, but it is good practice.)
It's important to mark up headings with the Hn element types. Assistive technologies such as screen readers can make use of a proper heading hierarchy to present an outline of the document. If we use ..., they cannot.
22. What does "semantic" mean?
se-man-tic [si-'man-tik]
adj. Of, pertaining to, or arising from the different meanings of words or other symbols.
(definition from dictionary.com)
When we talk about "semantic markup", we mean the proper use of element types -- based on their meaning -- to mark up content. The opposite is "presentational markup" or "tag soup", where authors choose element types because of their default rendering, rather than their semantic meanings.
-------------------------------
As you can tell from the selected steps, these are little points of interest that we should always have in the back of our minds when coding, and is a good resource when ironing out the details that we can easily overlook. I would encourage everyone to at least read over it once.
