START A COURSE

The HTML and CSS Blog:

What You’ll Learn in This HTML5 Lesson

To begin our HTML5 Tutorial, I’ll explain what makes HTML5 different, why these changes were made, and give examples of new HTML5 syntax.

HTML5 Syntax Gives Tired Students Some Slack

html5 syntax has looser standards, says a dinosaurThe syntax rules have changed in HTML5, allowing many variations in how we write code. The goal is to insure web pages display, no matter how sloppy and human the coders are. This change surprised many of us in web development because we had become accustomed to writing our HTML to strict XHTML standards.  The philosophy behind XHTML is that it would be easier for the web browsers to interpret and display web pages if coders all wrote our code to the same consistent strict standards.

Following strict XHTML standards was preparing coders for a switch to XML, which requires strict standards. But, we aren’t switching to XML, we are sticking with HTML, so strict standards don’t matter anymore. After following this idea of consistency it seems weird to go back to sloppy HTML in the new HTML5…but the most important thing is just that the web has to work. If web browsers required strict standards, then all the trillions of old web pages wouldn’t display properly. So, that’s not going to happen. The whole world is moving forward with HTML5, a new standard that allows us to move forward without breaking the old web pages.

The new syntax standards of HTML5 are much less strict. By accepting a variety of ways of writing HTML (variations on the syntax), it ensures old pages will still display properly.

HTML5: Examples of Syntax

HTML5 Syntax: Some of the specific HTML5 syntax changes are shown below.

Uppercase, lowercase, mixed case, it's all A-OK!

Uppercase, lowercase, mixed case, it’s all A-OK! Or don’t, whatever. See if HTML5 cares.

Case No Longer Matters

Upper or lowercase is fine for your html tags and attributes.

  • XHTML: all tags are lowercase.
  • HTML5: uppercase or lowercase or mixed case is OK.
Everything is OK in HTML5

Everything is OK in HTML5

Examples of Case Change in HTML5:

These are all valid HTML5 examples:

Here’s a common sense suggestion: Even though the web browser will accept HTML tags written in any case, humans prefer order and consistency. Most web designers are still using all lowercase tags. Whatever you decide is best for yourself, just pick something and stick with it. It’s much easier to spot errors in your code if you are consistent.

Attributes Don’t Have to Have Their “Values” in Quotes, Unless There Are Spaces in the Value

You can save What happens when evil toddler stops using quotes in his codekeystrokes by skipping the quotes around your values. That’s a lot of typing. The only exception is when you’re using multiple values you still need quotes.

  • XHTML: All values in quotes.
  • HTML5: Attributes don’t have to have quotes.

It’s easier to explain this with an example.

XHTML Example

HTML5 Valid Examples

Notice that it is valid with or without the quotes. So you can write code a bit shorter by skipping the quotes; but you don’t need to worry about you’re older pages—they are still valid, too, with the quotes.

When Do I Need “Quotes” Around Values in HTML5?

The quotes are still required when there are multiple values with spaces. For example, you might have multiple classes applied to one element. The most common example of using multiple values would be using CSS styles to format an object. (It’s the only example I can think of, actually. It’s pretty rare for a single attribute to need more than one value).

  • HTML5: You must use quotes when there are multiple values for a single attribute.

Example of HTML5 Syntax Which Requires Quoted Values

This is an example of a paragraph (<p> tag) with two different classes (the product class and the special class) applied to it:

Adding a class name to an HTML element allows you to style the tag with visual properties, using CSS Markup Language. It’s possible to add more than one class name to a tag in order to format it with more than one CSS rule. Maybe one style is applying text formatting properties (font, color, text size) and another style is controlling the layout position. Here’s another example of adding two classes to a paragraph:

If you want to learn more about styling with CSS, take a look at my quick overview of the CSS language.

In HTML5 you still need to add quotes when using two values (such as two class names)—otherwise the browser might think the second class name is an attribute. So add the quotes to help clarify they both belong to one attribute and your browser will be happy.

The good news is that you can skip those quotes and save a lot of typing most of the time, since you won’t have very many cases where you need multiple values. (Just those pesky classes.)

In HTML5 It’s Optional to Self-Close Non-Container Tags

  • XHTML: All tags are closed; self-close non-container tags, like the break tag: <br />
  • HTML5: It’s optional whether or not you choose to add a closing slash to non-container tags. It doesn’t matter if non-container tags are self-closed or not:  <br>  and  <br /> are both correct.

HTML5 Example: Self-Closing Tags

So  <br> <hr> <img> <input>  and  <br /> <hr /> <img /> <input />  are both correct and valid.

This bunny closes her break tags. She probably learned on XHTML standards

I bet this bunny learned XHTML standards first

It’s up to you to decide whether you want to include the closing slash or not. Try to keep it consistent, whatever you decide.

Attributes Don’t Have to Have Values

Some attributes only have 2 possible values—on or off, true or false. These binary attributes are called a “boolean” attribute. A boolean attribute can be used when the value is needed (true or on), and omitted when it’s not needed. This cleans up redundant xhtml code that repeated the attribute in order to fulfill the old xhtml rule that “all attributes must have values.”

HTML5 Boolean Attributes Example

For the sake of consistency, XHTML standards required a value, causing redundant code for forms such as:

which can now be written in HTML5 as:

Notice how much leaner HTML5 can be.

HTML5 looser syntax rules

HTML5 looser syntax rules

This is just the beginning of our HTML5 Tutorial. Check back for more on learning this exciting new dialect of our favorite language.

HTML5 Syntax Summary:

HTML5: Upper or lowercase is fine for your html tags and attributes.

HTML5: It’s optional whether or not you choose to add a closing slash to non-container tags.

HTML5: Attributes don’t have to have “quotes”.

HTML5: You must use “quotes” when there are multiple values for a single attribute.

HTML5: Adding a closing slash to non-container tags is optional.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • http://bayviewboom.org/ Johny Radio

    Hi

    Thx for the tutes!

    You say “The quotes are still required when there are multiple values with spaces.” But for ‘valid html5 examples’, you have:

    why doesn’t “image description” need quotes?

    and why does your comment system put quotes around the word “image”, and an equal sign and a pair of empty quotes after the word “description”, in the above code sample, when i didn’t type any? That makes it difficult to post code samples!

    i surrounded it with

     tags, but that didn't help. 
    
    thx
    • http://futureisfiction.com/blog Daretoeatapeach

      Hi Johny,

      Sorry we didn’t see your reply when you first wrote it!

      The image description you would add would likely be quite longer than a single word, and would therefore need quotes around it. I’m having trouble finding the sample you cited above in the post for some reason, so not sure if I fully answered your question. As you say, due to comment auto-formatting it is hard to understand your comment!

      Thanks for the feedback on our comment system. It’s called Disqus. We are currently re-designing the site, and haven’t taken into consideration if we will stick with Disqus or not…this will certainly weigh in our decision! I do know they allow some HTML, such as blockquote.

HTML Lessons

©2013 Diane Presler. All rights reserved.