The HTML5 Quick Learning Guide

The HTML5 Quick Learning Guide
by Janeth Kent Date: 06-11-2015 html5

HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close empty elements with a slash? Go for it. Rather not? Then don't. Want to use lower case? Upper case? Take your pick. In other words, you really don't have to change the way you handle these things, so don't worry, ok?

HTML5 doctype is much simpler:

New way:

<!doctype html>

Old ways:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Meta charset tag is much simpler:

New way:

<meta charset="UTF-8">

Old way:

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

Divs are now used for styling rather than structure; HTML5 includes several new structural elements that help define parts of the document. Let's take a look at the main new structural elements that you'll probably use right away.

(Note that included in the head is an HTML5 shiv that allows us to style elements in IE, and a basic CSS style is also included so we can help browsers that aren't caught up yet to render the new block-level elements as block-level elements. For now, it's easiest just to automatically include them. Understanding why can come later.)

Main Structural Elements You'll Use Most Often in HTML5

<header>

<nav>

<section>

<article>

<aside>

<footer>

Although these sound like “positions” in a document, and very often will be used in that way, they really are about grouping and not positioning. You might have 3 <sections> in a page, with each <section> having its own <header> and <footer> for instance. (Note that these elements – like classes – can be used more than once on a page).

But to keep things simple, for this document's purpose, let's just think of a very basic document that contains a top header, a menu for navigation, a content section that contains a couple of articles, a sidebar, and a footer.

In HTML4 or XHTML, you probably would have used divs, classes and ids to group each of those areas. You can and should still use divs, classes and ids for styling reasons, but they may no longer be as necessary as before for structural purposes. Some documents may be able to get by without them completely, while most will probably still need them for styling. But again, for the purposes of learning the quick facts to create a simple HTML5 document, let's keep this really basic.

Here's a simple way to code a very basic document that contains a top header, a menu for navigation, a content section that contains a couple of articles, a sidebar, and a footer in HTML5.

Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License

<!doctype html> <html>

<head>

<meta charset="utf-8">

<title>Very Basic Document</title>

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>header, footer, section, aside, nav, article {display: block;}</style>

</head>

<body>

<nav>

<ul>

<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li>

</ul>

</nav>

<header>

<h1><a href="#">Very Basic Document</a></h1> <h2>A tag line might go here</h2>

</header>

<section>

<article>

<h3><a href="#">First Article Title</a></h3> <img src="images/flower.jpg" alt="flower">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p> </article>

<article>

<h3><a href="#">Second Article Title</a></h3> <img src="images/tree.jpg" alt="tree">

<p>Praesent libero. Sed cursus ante dapibus diam.</p> </article>

</section>

<aside>

<h4>Connect With Us</h4> <ul>

<li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li>

</ul>

</aside>

<footer>

<p>All rights reserved.</p> </footer>

</body>

</html>

As you can see, the structure is fairly simple, and you can style these new structural elements in the CSS. However, because you may have some of these structural elements within different groupings on a page (such as several sections having different headers and footers), you may want to style each differently. In that case, you can still assign ids and classes just as you would in HTML4 or XHTML.

The point of the structural elements is to designate structure after all; presentation is dealt with in the CSS in whatever manner works best for you, using ids and classes.

So what are the actual definitions of these new structural elements?

<header> represents a group of introductory or navigational aids. (Things you'd usually wrap in a H1, H2, Hx, etc)

<nav> represents a section of the document intended for navigation. (Like a menu)

<section> represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. (Just a logical grouping such as a content section)

<article> represents an independent piece of content of a document, such as a blog entry or newspaper article. (Independent is the key word here. If the piece of content could make sense plucked out of this document and placed somewhere else, it's probably an article)

<aside> represents a piece of content that is only slightly related to the rest of the page. (Usually a sidebar, but could be another type of content that isn't directly related to the main content)

<footer> represents a footer for a section and can contain information about the author, copyright information, et cetera. (You know, like... a footer)

Of course, HTML5 comes with other interesting elements such as the video and audio elements, plus new and changed elements and attributes, but all of those belong in a separate cheat sheet. This one is to get you up and running fast, so there you have it. Just the basics that will let you quickly move from HTML4 or XHTML to HTML5 right now!

Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License

If you want to delve into the finer points, I recommend starting with the W3C draft, entitled HTML5 differences from HTML4 located at http://dev.w3.org/html5/html4-differences/

 
by Janeth Kent Date: 06-11-2015 html5 hits : 5350  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

A List of Awesome games made with HTML5 and JavaScript

Browsers and JavaScript are becoming more powerful and more comprehensive. There was a time when any type of game needed Flash. But the stage now is set for powerful HTML5…

How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

Fullscreen Background Video HTML5 And CSS cross-browser

Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

How to Become a Full Stack Developer in 2018

A full stack developer is someone who can work on the development of all layers of an app or program. That means that they are familiar with both the front…

10 addictive retro video games recreated with HTML5, JS & CSS

Are you a video game player? Are you a child of the "80s"(or even 70s...;-) )? If yes, this post is for you. There was a time when building any type of…

HTML5 CheatSheet

HTML5 Cheat Sheet   Cheat Sheet via Make a Website Hub DOWNLOAD A4 PDF OF THIS HTML 5 MEGA CHEAT SHEET HERE!  

Google Chrome will block Flash content starting next month, make HTML 5 default by December

There really is no stopping Flash's demise. In a blog post Chrome team has announced that the browser will start blocking the Flash starting this September with Chrome 53. As more…

CSS Flexbox : some tools

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes…

CSS-Only Olympic Rings

Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, we decided to try our hand at creating the Olympic Rings with just CSS and HTML. We realize its simple,…

Clicky