Positioning

Default Positioning

By default every element is set to position: static;. In CSS-land this stupidly means your element hasn't been positioned. Maybe it's better to think of it as meaning that you just haven't applied a non-default position yet. Why is that important? - because your element needs to be positioned to do almost anything important with it (e.g., adding width, height, or moving left, right, up, or down).

Note: The only position values we'll deal with are relative & absolute. This should make it easy to remember. You can check out the other possible values here.

Relative vs. Absolute Positioning

Here are three rules to remember with positioning:

1. "relative" means "relative to where the element lies naturally in the document flow"
2. "absolute" means any CSS values given to top, right, bottom, & left will be made "from the bounds of the closest positioned parent
3. setting position: absolute removes the element from the document flow causing subsequent content to take its place.

Once you've applied a relative or absolute position value, you can begin moving it around using the CSS top, left, right, & bottom.

In the left example applying a relative position, with top & left offset values causes it to move 20px from the top and from the right of its natural position (without breaking the layout of surrounding elements).

In the right example applying an absolute position causes img #3 to move in to the left taking the place of img #2 which is now positioned 20px from the top and left of the closest positioned parent (which we're assuming is either a relatively positioned div or the body).

If you're still having trouble with this concept, I found a pretty good tutorial here: Learn CSS Positioning in Ten Steps.

Floating

The idea of floating is directly related to an element's display value (i.e., inline or block). Block level elements (e.g., div, p, ul, li) naturally occupy 100% of the width in the document flow.

CSS:

div.block_example ul { list-style: none; }
div.block_example li { border: 1px solid red; }

HTML:

<div class="block_example">
  <ul>
    <li>item 1 isn't floated</li>
    <li>item 2 isn't floated</li>
    <li>item 3 isn't floated</li>
  </ul>
</div>

Example:

Conversely, inline elements only take up the width of the element (e.g., img, span).

CSS:

div.span_example { background: #ccc; }
div.span_example span { background: #aaa; }

HTML:

<div class="span_example">
  <span>this is a span</span>
  <span>this is a span</span>
  <span>this is a span</span>
</div>

Example:

Floating a block element basically forces it to shrink back to only the width it needs. The "width it needs" depends on either an explicit width set or the width of its contents. Floating also causes the following elements to wrap around the floated element, causing them to appear as if they were inline. Here is the list item example above with each item floated left.

CSS:

.float_left { float: left; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_left">item 1 is floated left</li>
    <li class="float_left">item 2 is floated left</li>
    <li class="float_left">item 3 is floated left</li>
  </ul>
</div>

Example:

The options for the float property are left, right, none (default), & inherit. Floating an item to the right simply aligns the floated element to the right-most boundary of its containing element.

CSS:

.float_right { float: right; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_right">item 1 is floated right</li>
    <li class="float_right">item 2 is floated right</li>
    <li class="float_right">item 3 is floated right</li>
  </ul>
</div>

Example:

Clearing

"Elements after the floating element will flow around it. To avoid this, use the clear property." - http://www.w3schools.com/css/css_float.asp

Think of clearing as a way to "break out of the float". Clearing allows an element to avoid the wrap-around caused by a floated element before it.

Here is the floated list-item example with one cleared element.

CSS:

.float_left { float: left; }
.clear_left { clear: left; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_left">item 1 is floated left</li>
    <li class="float_left">item 2 is floated left</li>
    <li class="float_left clear_left">item 3 is floated left</li>
  </ul>
</div>

Example:

The options for the clear property are left, right, both, none (default), & inherit.

The concept of clearing either left or right means specifically that an element set to clear left will get rendered on a new line after any items before it that are set to float left. Conversely, an element set to clear right will get rendered on a new line after any items before it that are set to float right. You may have guessed that an element set to clear both will get rendered on a new line after elements that are floated either left or right. See the illustration below for an example.

CSS Clear Both

In Closing

Understanding these three concepts of positioning, floating, and clearing is essential for applying structure to your website. You can find additional resources on a presentation I made for my Web Design 1 class at Parsons - Adding Structure with CSS.

If you have any more questions or need clarification on any of these concepts please let me know and I'll be happy to help.

Thanks for reading!

Related Books

Before getting too excited about hand-coding up a storm, I want to point out a few best practices for lessening your workload. There are two things I would recommend doing. These are to 1) use a CSS reset, and 2) use a CSS framework. As I will soon elaborate on, a reset file removes default browser CSS styles, readying your canvas for pixel-perfect design. Additionally, a CSS framework will have already addressed a number of common needs in many websites. I will contrast and compare several of the available frameworks.

Resets

If you are not already aware, each browser actually applies a whole bunch of default CSS to your HTML, even if you didn't write any CSS. This is why elements like h1, h2, h3, h4, etc. have different sizes. These are the default browser styles, and they are troublesome because they are different across browsers.

Imagine trying to create a pixel perfect design, but you can't rely on having consistent margins, padding, etc. This is the problem a CSS reset solves. A CSS reset is simply a CSS file which includes a collection of rules designed to remove all the default browser styles. Many reset files also provide additional helpful features like a .clearfix rule (which I will explain later).

I recommend using the Normalize.css file. It is the reset file included in the HTML5 Boilerplate which has become somewhat of a standard starting point for many developers.

Normalize.css
HTML5 Boilerplate

All you need to do is click the 'Download' button on the home page, and copy/paste the text into a new file on your server. Make sure you include the file before any other styles to prevent specificity conflicts.

Grid Frameworks

Frameworks are much more advanced than a simple reset file. Due to the overwhelming number of CSS frameworks available, it is likely you can find one that suits you. A couple of years ago, I drafted an article comparing the top 3 CSS frameworks since there were only a few notable ones at the time. Since then, the number of frameworks has exploded and especially so since the advent of the tablet era. Many frameworks now include support for responsive design and mobile friendly layouts (which I think is necessary). Also, note that when I say "framework" I mean "grid framework" meaning, one which assists with implementing grid-based designs.

I recently went through a round of reviewing available CSS frameworks to use on a new project and landed on one I hadn't used before: The Semantic Grid System. This framework supported nearly all of our needs: fixed layouts, fluid layouts, max-width, nested columns, responsive design (there are examples for each of those on the site's home page). Also, it runs with SCSS (see below), which we had also chosen to use.

Other available grid frameworks:

The Semantic Grid System
960.gs
adapt.960.gs
Blueprint
Golden Grid System

LESS CSS

LESS CSS is JavaScript utility that allows you to write more concise CSS. A simple example will suffice as a convincing reason to use it.

#container {
  color: red;
}

#container.left .content {
  text-align: left;
}

#container.right .content {
  text-align: right;
}

#container .content span {
  padding: 10px;
}

#container .content span a {
  text-decoration: none
}

Original CSS

#container {
  color: red;
  &.left {
    text-align: left;
  }
  &.right {
    text-align: right;
  }
  .content span {
    padding: 10px;
    a {
      text-decoration: none;
    }
  }
}

LESS CSS

In my opinion, the biggest benefit from a CSS extension script like LESS is the ability to nest rules. As stated on the website, there are also a few other super powerful features such as variables, mixins, operations, and functions. All of which ultimately allow you to actually write less code.

I almost never start a project without choosing either SASS or LESS. There's a good article comparing the two here: An Introduction To LESS, And Comparison To Sass.

Now on to Part 2...

I originally intended to cover positioning, floating, and clearing in this post but it turned out to be a bit too long for my taste.

So, I've simply moved the next section into a post of its own:
Learning Web Design: Adding Structure with CSS using Positioning, Floating, & Clearing.

Related Books

Getting started with Git

These are the absolute most common commands you'll use with Git. I've listed them in the order that you'd usually use them.

Step 1 - Clone a Git repository

What this means is that you are copying someone else's repository down to your computer. This is fundamental to the way Git works. Each time a Git repository is cloned, literally the entire repository including all change history is copied to your computer. This is why it's referred to as "distributed source control".

git clone username@yourhost.com:path/to/repo/repo-name.git

After you have cloned the repo, you need to cd into the repo folder

cd repo-name

Step 2 - Save your changes

Making and saving changes to your repo is a three step process. then.

First you need to edit the file(s) and save them. Next, to see which edited files are ready for add/commit/pushing, you check your repository status.

git status

Next, you need to add it (a.k.a. "stage" it)

git add .

You can also add individual files by using the filename instead of the "."

git add filename.ext

Next, commit the staged changes to your local repository copy

git commit -m "Made XYZ changes"

The -m flag indicates that you want to add a commit message, which goes inside quotes

Lastly, since you have so far only been committing changes to the repository on your local computer, you'll need to push all those commits back up to the master repository.

git push

It's important to understand these fundamental concepts of Git before getting started. However, don't be afraid/shy/embarrassed to ask coworkers, or even the community (i.e., this blog) for help. Things can certainly get more complex than these few commands. Fortunately, there is a user-friendly-ish Git manual to help if you can't find a live person.

Merging conflicts

If get the message after trying to pull "Automatic merge failed; fix conflicts and then commit the result.", use this to launch your mergetool

git mergetool

Add color to UI

git config color.ui true

Diff files against head/remote/origin/branch/etc.

For comparing a local file against the latest in the repository (source)

git difftool HEAD~50 path/to/file

Get info about your repository

This is where you can find out information about your repository including branch and origin settings.

vim .git/config

At the end of this article you should have at least an elementary understanding of:

• What is JavaScript
• How to use JavaScript on your website
• Why you should just use jQuery

What is JavaScript?

JavaScript is an object-oriented, interpreted programming language that runs in the browser^[1]. It contains all the standard features of a programming language such as variables, functions, if/then conditionals, loops, etc.

There are many unique parts of JavaScript (good parts and bad parts). The bad parts mostly are at fault for its old reputation of being an amateur, and annoying toy language. To be sure, JavaScript can be very elegant and quite capable.

One interesting component of the language that you'll need to know is that it relies heavily on the environment in which it runs. I mentioned it "runs in the browser" which means, the browser parses it by opening your JavaScript like a text file, and translating it line by line into instructions that do things on the page like animations and rollovers. This is interesting because JavaScript itself can't do much without the presence of the Document Object Model (DOM). The DOM is the object representation of the HTML file the browser had to parse before executing your JavaScript.

JavaScript's interactions with the DOM are event-based, which means that your script can listen to what the browser is doing (and also what the user is doing on the browser, like clicking links, etc.)

An example of the event-based nature of JavaScript is how most well-constructed scripts will wait until the HTML has been fully parsed and the DOM has been fully built before running. This prevents errors like if your script depends on a certain part of the DOM being available (like a footer) and it has not been built at the time the script runs because you put your script in the <head> section of your site (before that footer loaded).

The code might look something like this:

<script>
window.onload = function () {
  alert('page is loaded!');
};
</script>

Waiting until the page loads to execute JavaScript.

What's happening is that window is referring to the page's root object. The root object is always the "window" object, and everything is a child of it. When the browser finishes loading the window object, it calls the onload method which we have assigned our function to.

In plan English our script reads like this:

"When the window finishes loading, run this function."

How to use JavaScript on your website?

JavaScript can be included on your website in several ways.

It can be included via an external file,

<script type='text/javascript' src='scriptName.js'></script>

or by an embedded script block,

<script type='text/javascript'>
//...script body here...
</script>

or attached to HTML elements via inline event handlers,

<a href='link.html' onclick='alert("hello!");return false;'></a>

or injected into the href attribute of an anchor tag,

<a href='javascript:alert("oh yeah");return false;'></a>

It is important to understand how the browser parses JavaScript in order to know how to include it correctly. As soon as the browser parser encounters any JavaScript, everything else stops until it is finished executing. This means if you include an external file at the top of the HTML document (e.g., in the head), none of the rest of the page will finish loading and you will see a blank white page until it is finished. This could potentially end up being quite a long time depending on how many scripts you've included, and how large the files are.

The best practice is based both on form and function. By 'form', I mean that the user is primarily concerned with the time it takes from pressing 'enter' and being able to interact with the page. This is referred to as 'time to interaction.' If we don't block the page from rendering by putting script includes at the top of the page, the page will both appear to load more quickly and be partially interactive quicker. By 'function', I mean that if a script relies on certain parts of the HTML to be available, and at the time the script executes they have not loaded and thus are not available, the script will fail.

Because of those two reasons, the best practice for including JavaScript on your site is to simply include it at the bottom of the page immediately before the </body> tag.

Why you should just use jQuery

JavaScript is itself an insanely confusing and technically daunting language. There are many ways to perform the same task, and there are components of the language that are just plain dangerous (e.g., eval). Because of these things, it turns most traditional developers away. Not to mention the myriad variations of browser implementations of the specification.

Fortunately, jQuery alleviates most if not all of these problems and more. jQuery is a library written in JavaScript that makes JavaScript infinitely easier and more enjoyable to write. Let's look at an example.

Core JavaScript:

var header = document.getElementById('header');

...vs. jQuery:

var header = $('#header');

Not impressed? How about another example.

Core JavaScript:

var header = document.getElementById('header');

for (var x = 100; x--;) {
  header.setAttribute('opacity', x/100);
}

...vs. jQuery:

$('#header').fadeOut();

Yea, I thought that last one would catch your eye - and that's a super simple example. Don't even get me started about doing event delegation or cross browser Ajax calls in core JavaScript. jQuery reduces the amount of code you have to write to almost nothing. The caveat here is that you don't have to understand what's happening behind the scenes in order to use jQuery.

So why would I recommend learning JavaScript by using a library that you can use without having to actually understand core JavaScript? Because it lowers the barrier to entry for inexperienced developers and makes using JavaScript approachable and fun. From there on in hopefully you get hooked and then don't realize what a slippery slope you've landed on before it's too late.

Seriously though, I don't like unapproachable languages and I found myself more interested in learning about core JavaScript once I felt comfortable with jQuery. If that method doesn't work for you, then by all means dive head first into the 624,000,000 Google search results for "javascript."

In closing

To be sure, there is a lot to learn about the language including syntax, data types, scoping, events, the DOM API and many more. I will be writing more articles about JavaScript and jQuery but for the time being, I would recommend getting acquainted with the three links listed below.

Thanks for reading!

Helpful Articles

Douglas Crockford's Javascript
Quirksmode - General [JavaScript] Introduction
w3schools.com - JavaScript Introduction

Related Books

[1] JavaScript can also be run on the server.

1. How to connect CSS to HTML elements
2. Specificity (order of importance)
3. The box model

How to connect CSS to HTML elements

There are three ways to match a CSS rule to an HTML element. They are by tag, class, or id. Here is an example of each.

<div>this text will be blue</div>
<div class="mySpecialClass">this text will be green</div>
<div id="myUniqueId">this class will be red</div>


<style>
/* tag selector */
div {
  color: blue;
}

/* class selector */
div.mySpecialClass {
  color: green;
}

/* id selector */
div\#myUniqueId {
  color: red;
}
</style>

Using a tag, class, and id selector

The major point here is how you identify elements in CSS. A rule defined for "div" will apply that style to all divs. A rule defined with "." (period) will apply that rule to all HTML elements that include that value in their class attribute. The same is for "#" (pound) which applys to HTML elements with the corresponding id attribute.

One important thing to remember is id's are unique identifiers and so there can only be one per page. You may however, use the same class multiple times per page. Elements can also have multiple classes per element (e.g., <div class="first orange grid">>).

Chaining

A powerful feature of CSS is the ability to chain multiple selectors together. By doing this you can match different elements based on their hierarchical order in the HTML. For example, check out the following rules and how they are applied.

div div { color: red; }
div .someClass { color: red; }
div\#someID {color: red; }

Showing simple parent / child relationships

NOTICE the space between the selectors. This indicates that the latter selector is a child of the former. NOT including a space indicates that the selectors apply to the same element. For example, the following example shows a CSS rule that matches the given HTML snippet using a tag, class, AND id selector.

<div id="myOneAndOnly" class="headline">Hold me</div>



div\#myOneAndOnly.headline {
  color: red;
}

Chaining a tag, id, and class selector

Specificity

Now that you know how ids and classes work, you'll need to understand how the browser determines which rules are more important than others. This level of importance given to each selector is called "specificity". By "specificity" we mean literally "how specifically a CSS rule can target HTML elements." The easiest way to think about this is to consider how many elements a single selector will effect.

• a tag selector will target every single tag (a LOT of elements)
• a class selector will target only a subset of tags (quite a few less)
• an id selector will only target one element per page (exactly one)

Let's start with the basic premise that that the lowest level of specificity is order of appearance. This means if we have multiple rules for the same element, only the last one will be applied.

<body>
<div class="things_I_love" id="NewYork" >This text will be red</div>
</body>


div { color: green; }
div { color: black; }
div { color: red; } /* <-- this rule wins because it's last */

Lowest specificity: order of appearance

Next up the specificity ladder are tags, then classes, then ids in order of increasing specificity. This means, if we take the previous example, and we want to make the text green, we just need to increase the specificity of that rule. We can do this by adding more selectors or by using a different selector with higher specificity.

<body>
<div class="things_I_love" id="NewYork">This text will be green</div>
</body>


body div { color: green; } /* <-- this rule wins */
div { color: black; }
div { color: red; }

Level 1 specificity = tag selectors

Calculating specificity

Another way to quickly figure out how your CSS is going to get parsed is to calculate a specificity score. Following the math in this graphic should cover you for about 99% of the time. Basically what we're doing is applying an order of magnitude multiplier to each of the three selectors. This is because for each of the three tiers: tag, class, & id, even using one selector from a higher tier will trump any number of lower tier selectors. For example, you could have 50 class selectors trying to set your text color to red, but if another rule uses even one id selector to set the color to blue, blue will win.

CSS Specificity Calculation Diagram

More resources explaining specificity

If you're still stumped, here are some other resources to try and explain this concept differently (one example uses Star Wars characters to explain the ranking!). Also, you'll find that I drew a lot of inspiration from these posts, especially the one from css-tricks. My diagram is essentially a simplified version of theirs.

• Specifics on CSS Specificity
• CSS Specificity: Things You Should Know
• Quick Tip: Understanding CSS Specificity
• Calculating a selector's specificity (W3C)

The Box Model

This diagram illustrates the relationship between the primary CSS properties of all HTML elements. It is important to understand this model since you will regularly need to calculate how much total space your elements can take up on the page. For instance, in the element illustrated below if the width was set to 300px, and padding, border, and width were all each 10px, the total width taken up by the element would be 360px (300 + (10 * 2) + (10 * 2) + (10 * 2)).

CSS Box Model Diagram

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. - W3C

Before beginning to code a website, we need visually break apart the design into rectangular sections. This process used to be done in the context of an HTML table since CSS support wasn't widespread among browsers at the time. Nowadays, we can think in the context of pure CSS based layouts. Ultimately this gives us more freedom over the layout while retaining the semantic value of the HTML document.

If we take this website, we can clearly see how the sections break down into rectangles. Each of the rectangles will follow the rules of the box model.

CSS Layout illustrating use of the box model

In the next post, I will explain how we use positioning and floats to bring structure to our markup.

In Conclusion

If you have managed to follow along until this point, congratulations! You have a good enough understanding of CSS to move on to bigger and better things. Yes I admit it hasn't been too sexy so far but trust me once we get to positioning, floats, and cross-browser quirks, things are really going to start heating up

Helpful Articles

20 Websites To Help You Learn and Master CSS
meyerweb.com

Related Books

You may follow along via the course website:
http://dennisplucinik.github.com/Parsons

You can access the syllabus, all the slides and additional resources as well.

Topics I Will Cover

Here is a short synopsis of the topics I'll be covering in the class in order of occurrence.

• History of the web and HTML
• Website fundamentals
• HTML basics
• CSS basics
• JavaScript (i.e., jQuery) basics
• HTML5
• CSS3
• Intermediate JavaScript
• PHP & MySQL

Each week I assign a few articles to read and an activity (usually a tutorial or simple task related to the week's content). I also briefly recap the previous week's reading assignment at the beginning of each class. In addition to the in-class discussion I plan to write a more well thought out response of my own to each reading here on this blog. So to my friends who want to participate in this discussion outside of class, this is the appropriate venue. The class discussion will remain private although any of my students are welcome to engage with me here as well.

Hopefully my conversations here will help spark new ideas in class and vice versa. If you have any thoughts please let me know in the comments below.

Also, if you want real time updates when I post new articles, follow me on Twitter at @dennisplucinik.

Thanks for reading!

What I want to do is start with the basics. I think the key to understanding HTML5 is to learn the new features and figure out which are relevant to you and your project. For the first part of this series I will be focusing on aspects of HTML5 relevant to developers and so, we will be looking at a lot of code. My goal is for you to deeply understand the significance of these new technologies and use your knowledge to help push the web forward.

This series will help you understand those two things - the components of HTML5 and which are relevant to you. I've broken down the sections for coders, designers, and managers as there are different implications for each group.

Content Strategy

The content for this series will be made available through several channels. The goal is to enable access to this content through as many channels as possible.

Each article will represent one chapter. Chapters will be consolidated into one of three different books based on group (i.e., coders, designers, and managers). Each month I will be presenting a meetup in New York City covering the latest article. Prior to each month's meetup, a full article will be available for download via Amazon, and iBookStore self-publishing. Each book will be available for download once I have presented all the topics. Members of the meetup will have access to the full SlideShare presentation as well as a free download of the final book for each group once we have completed all the presentations.

Here is the proposed content broken down by group:

Learn HTML5: For Coders

• What is it?
• Web Application Architecture
• Building an Offline Capable Book Reading App
• Creating QR Codes with Canvas
• Creating a Location Based Mobile Web App
• Embedding Video and Audio Using the VideoJS Library

Learn HTML5: For Designers

• Designing Responsive Interfaces
• Enhancing a WordPress Theme with HTML5
• Replacing Sprites with CSS3

Learn HTML5: For Managers

• Why it is Important for Businesses
• Opportunities for Mobile Platforms
• How to Interview an HTML5 Candidate
• Implications on Content Strategy
• SEO Implications and Text-Level Semantics
• What the Future Holds

In Closing

That's about all I have to say for now. I know completing everything I've planned so far is a tremendous undertaking but I like a good challenge The response I've gotten so far on the Meetup group has been very encouraging. If you haven't joined yet, you may do so here: http://www.meetup.com/Learn-HTML5/ and leave me some suggestions or feedback!

Also, If you'd like me to cover anything specific that's not listed, let me know, I'd like to build the content around what people want. You can even take a quick poll here: Which HTML5 Topics Would You Like to Know About?.

Until next time.

It's Not Just Version Five

Saying HTML5 is "the fifth revision of HTML" is misleading. Whereas previous versions of HTML primarily consisted of markup upgrades such as new semantic tags, or stricter syntax, this version encompasses much more.

Paving the Cow-Paths

The general theme behind HTML5's development effort has been to pay close attention to what developers are already doing when adding new features. This is why we have things like rounded corners built into the CSS3 spec, as well as the new <video> tag.

HTML5 is meant to take existing conventions, make them easier to implement, more performant, and native.

Combining Existing Technologies

With the publication of HTML 4 in 1997, the primary focus was on deprecating presentational tags (e.g., <font>) in favor of using CSS. At that point, HTML, CSS, and JavaScript played distinctly different roles and were referred to individually.

With HTML5, we have a perceived marriage of those three primary front-end technologies. In truth, they are still distinctly different but you can think of them as playing on the same team in the web-browser game.

Role Switching

Where one technology was previously used to do certain things, we now have native support built in. For example, CSS3 takes over some of the tasks previously managed by JavaScript like mouseover transitions, simple animations, rounded corners, drop shadows, & text-shadows. New semantic markup replaces the need to use CSS for marking up content by adding worthless class names. Role switching can be illustrated clearly in text-level semantics. For example, instead of writing:

<div class="header">

we now write:

<header>

There are a host of other new semantic tags including footer, section, article, aside, and more. The new <audio> and <video> tags have given us an option other than relying on 3rd party plugins for managing rich media. We can now augment our Flash video player implementations with the capability of operating on non-Flash supported devices such as iPhone and iPad.

HTML5 and Mobile Devices

Mobile devices have been the central topic of many HTML5 conversations and with good reason. One component of the HTML5 spec is device access. Which means some of the hardware on your mobile device can be accessed with JavaScript. This includes your device’s GPS, address book, calendar, and more.

HTML5 is heralding in an era of thin clients and mobile applications with APIs for building more native-like functionality such as local storage, application cache, and file APIs. This allows developers to design applications that remain functional even when there is no internet connection - much like a native app. Apple has even added helpers to WebKit (e.g., viewport size management) making the transition more seamless.

A Little More History

Before we get in over our head with all of the cool new features of HTML5, it’s worth it to have some understanding of how we got here.

HTML Version Timeline

Let’s go back to 1991. The first musings of HTML were published in a document titled “HTML Tags” by Tim Berners-Lee. Though he is considered by many to be the father of the internet (if not for the sake of that document alone), he indeed was standing on the shoulders of those who came before him.

Before HTML in 1991, there was SGML in 1974, and before that - GML in 1969. HTML was built on the concept of refining an existing technology that could almost do the job, but not quite. HTML5 is a continuation of this tradition.

Microformats

Remember I talked about “paving the cowpaths”? The way an HTML spec gets published involves a bit of “running before you can walk”. Since the process involves such a long period of revisions, browsers vendors incorporate proposed specs before they are actually accepted by the standards committees (i.e., the W3C). The spec authors (i.e., WHATWG) know this and so in order to usher these new features as smoothly as possible, they strongly consider what users are already doing when developing a new feature.

Microformats are an example of where existing behavior formed the foundation of new HTML5 specs. Microformats are an agreed upon convention for identifying common data types such as blog post elements including publish date, title, author name, etc. The goal is to create a more semantically rich document and microformats accomplish this (albeit in a round-about way) by adding class names to corresponding elements (e.g., <div class="hnews hentry item">). Microformats in HTML5 are called "text level semantics" which we discussed earlier with the header, footer, section, article, and aside tags.

What's Next?

As a general summary we could say HTML5 provides a new set of elements meant to give native support for existing technologies via more semantically rich documents.

It is comforting to know that there are more features coming with every new browser version. The biggest hurdle any new language faces is adoption. With HTML5 that means adoption by browser vendors of proposed new features. Each browser adopts a different number of new features with each new version getting us slowly closer to full adoption. It sounds slow and painful but it is nowhere near as bad as it was in the last decade for two reasons. First, all new browser versions that support HTML5 are using the same parsing engine. This eliminates cross-browser rendering variances. Second, mobile devices running a modern OS (e.g., Android and iOS) have modern browsers installed which support many new HTML5 features. Although this means that yes there is yet another device to support, those devices are all reasonably advanced (as opposed to say, developing for desktop browsers where some users still use IE6.)

What I have briefly tried to describe is where we are, how we got here, and where we are headed. I will continue to go into more detail with this series and hopefully cover at least all of the basic topics soon. If there is anything specific you would like to hear about please let me know.

Thanks for reading!

Helpful Articles

HTML5 Spec on W3C.org.

Related Books

Here are the first to things that tripped me up. Everything beyond this I'll probably resort to tutorials or just find on my own. Enjoy!

1.) How to change the canvas size

1. From the menu bar click File > Document Setup
2. In the Document Setup dialog menu, click the Edit Artboards button (Figure 1-1)
   
   
   

   Document Setup > Edit Artboards - Figure 1-1

3. In the toolbar you can change your height and width settings (Figure 1-2)
   
   
   

   height and width settings - Figure 1-2

2.) How to draw a rounded corner button

1. Draw a box with the rounded rectangle tool (Figure 2-1)
   
   
   

   Draw a box with the rounded rectangle tool - Figure 2-1

2. To change the corner radius, repeat step 1 but before releasing the mouse button press the up or down key to marginally increase and decrease the radius respectively, or press the left or right key to fully decrease or increase the roundness respectively.¹

Helpful Articles

¹http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS714a382cdf7d304e7e07d0100196cbc5f-6261.html

Related Books

Here's the quiz:

var moo = 2;
moo = moo | 1;
alert(moo);

The question is: what is the value of moo in the alert?

If you answered 2, Congratulations! You are part of the majority of JavaScript developers who got this wrong (including myself, and yes I'm being presumptious). The tricky part is the single-pipe on line 2. Naively, I misunderstood it to mean "OR" which in my opinion is understandable since it actually does mean "OR". The problem is that there are two types of OR - Logical and Bitwise. The one presented in the test is the latter.

The official definition for a Bitwise OR is "Returns a one in each bit position for which the corresponding bits of either or both operands are ones." (Mozilla).

Maybe I'm alone here but that sounds like Greek to me.

Helpful Articles

Mozilla: https://developer.mozilla.org/en/javascript/reference/operators/bitwise_operators
http://www.eecs.umich.edu/~bartlett/jsops.html

Related Books