The forgiving nature of HTML5 markup
If you're conscientious about how you write HTML markup, you'll typically use lowercase for the most part, wrap attribute values in straight quotation marks (not curly ones!), and declare a type for the scripts and style sheets you link to. For example, perhaps you link to a style sheet like this:
<link href="CSS/main.css" rel="stylesheet" type="text/css" />
The fact is that HTML5 doesn't require such precision. It's just as happy to see this:
<link href=CSS/main.css rel=stylesheet >
Did you notice that? There's no end forward slash at the end of the tag, there are no quotation marks around the attribute values, and there is no type declaration. However, easy-going HTML5 doesn't care. The second example is just as valid as the first.
This more lax syntax applies across the whole document, not just linked assets. For example, specify a div like this if you like:
<div id=wrapper>
That's perfectly valid HTML5. The same goes for inserting an image:
<img SRC=frontCarousel.png aLt=frontCarousel>
That's also valid HTML5. No end tag/slash, no quotes (although you would still need quotes if the value had white space in), and a mix of capitalization and lowercase characters. You can even omit things such as the opening <head> tag and the page still validates!
Want a shortcut to great HTML5 code? Consider the HTML5 Boilerplate (http://html5boilerplate.com/). It's a premade best practice HTML5 file. You can also custom build the template to match your specific needs.
A sensible approach to HTML markup
Personally, I like writing my markup quite strictly. That means closing tags, quoting attribute values, and adhering to a consistent letter case. One could argue that ditching some of these practices would save a few bytes of data but that's what tools are for (any needless characters/data could be stripped if needed). I want my markup to be as legible as possible and I would encourage others to do the same. I'm of the opinion that clarity in authoring code should trump brevity.
When writing HTML documents, therefore, I think you can write clean and legible code while still embracing the economies afforded by HTML5. To exemplify, for a CSS link, I'd go with the following:
<link href="CSS/main.css" rel="stylesheet" />
I've kept the closing forward slash at the end of the element and the quotation marks but omitted the type attribute. The point to make here is that you can find a level you're happy with yourself. HTML5 won't be shouting at you, flagging up your markup in front of the class, and standing you in a corner for not validating. However you want to write your markup is just fine. No, who am I kidding, I can't let it go—I want you to know that if you're writing your code without quoting attribute values and closing your tags, I am silently judging you!
Despite HTML5's looser syntax, it's always worth checking whether your markup is valid. Checking that markup validates catches basic human errors like missing or mismatched tags, missing alt attributes on images, incorrectly nested elements, and so on. The W3C validator was created for just this reason: http://validator.w3.org/.
Enough of me berating writers of slacker markup. Let's look at some more benefits of HTML5.
All hail the mighty <a> tag
The <a> tag is arguably the most important and defining tag of HTML. The anchor tag is the tag used to link from the document a user is on to another document elsewhere on the internet, or another point in the same document.
You can read the specification for the <a> element here: https://www.w3.org/TR/html52/textlevel-semantics.html#the-a-element.
A welcome benefit of HTML5 is that we can wrap multiple elements in an <a> tag. Previously, if you wanted your markup to validate, it was necessary to wrap each element in its own <a> tag. For example, look at the following code:
<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the home page</a></p>
<a href="index.html"><img src="home-image.png" alt="A rendering of the home page" /></a>
Nowadays, we can ditch all the individual <a> tags and instead wrap the group, as demonstrated in the following code:
<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="A rendering of the home page" />
</a>
The only limitations to keep in mind with <a> tags are that, understandably, you can't wrap one <a> tag within another <a> tag or other interactive element (such as a button) and you can't wrap a form in an <a> tag either.
That's not to say you can't physically do it. I doubt your text editor is going to start a fight with you about it, but don't be surprised if things don't work as expected in the browser if you do!
