Join Ray Villalobos for an in-depth discussion in this video Building a basic HTML5 page structure, part of iOS 4 Web Applications with HTML5 and CSS3.
So why is it so hard to understand HTML, and why do we need something better? Programs like Illustrator or InDesign have a language that they use to describe documents. You don't normally see that language, but when files are saved they are stored in your hard drive in very different formats. Computers know exactly how to speak that language, and are very precise about how those files are written. HTML, on the other hand, is not always written by computers; it's largely written by people, and people are different. Now I am the type of person that likes to drive home using different routes. People have their own way of doing things.
Unlike computers, we often forget things, use slang to communicate, and give people nicknames. We love shortcuts whenever possible, and there is nothing wrong with that. The reason writing browsers is so difficult is that the browsers have to work around people who may forget to insert a title tag or to close a span. We like the fact that in most HTML pages, the order of things or the amount of space in between tags is irrelevant. We like HTML to be more flexible, like us. Now, there are two solutions to this problem. The first is to make people behave more like computers and write HTML in a way that it's easily understood by them.
This is what a version of HTML called XHTML tried to do, with very tough rules on what should be done when people make mistakes. Tags in XHTML, for example, had to be written in lowercase. The second solution is to understand that people aren't machines and provide more flexible rules. This is of the heart of how HTML5 works. It also provides tags that are more descriptive of the types of content people are already using. Let's take a look at a difference between a typical HTML page and a HTML5 page. Our extremely simple page has a navigation, a short article, and an area for a sidebar, plus a footer.
Take a look at the simple DOCTYPE on the HTML5 side. The DOCTYPE gives instructions to the browser on how to render the page. We don't care about what version of the language the browser needs to use and where the standard-driven document lives that describes the validation parameters of the document. That's what the HTML has to do on this side. Notice also a simpler charset description. This tells the browser the types of characters the page uses. Notice the HTML side has a bunch of elements that we don't really care to write about. New semantic tags like, header, nav, footer, article, aside, allows us to use things that we've already been doing for years, describing, in documents, areas where our header lives, or navigation lives, articles are located, and it provides search engines with more information about the semantics of the page.
Overall, HTML5 seeks to simplify things, takes a look at how and why things are done on web sites, and tries to be more people-friendly. I am really glad for that, and I'm very excited to be able to work with it in this course.
- Building a basic HTML page structure
- Making HTML5 backwards compatible
- Working with opacity
- Building transitions with CSS
- Triggering transitions with gestures
- Animating with keyframes
- Using custom fonts
- Targeting devices and orientations
- Displaying images
- Playing and controlling audio
- Playing video
- Generating dynamic content
- Using geolocation