Getting started with HTML5

This is an edited excerpt from Chapter 1 of HTML5 Foundations published by Treehouse

So you're eager to start building a website? By the end of this chapter, you will have done just that!

Hyper Text Markup Language, or HTML, is the basic code that makes up the foundation of every website on the World Wide Web. HTML is used for marking up text and other page content, and for defining how a web page is structured.

A web page is made up of lots of content—text, images, even videos. Each of these pieces of content is marked up using HTML syntax (a collection of words and symbols that can be understood by computer programs). HTML is also used to describe the structure of the page, defining each of the different sections it may have (such as a header, content area, and footer).

HTML is used to define the page content and how it is structured, but it is not responsible for how the page actually looks—the color, borders, and positioning of elements. That is a job for Cascading Style Sheets, or CSS, which you will look at briefly later in this book. There is also one other language that is commonly used when building websites. JavaScript is a programming language that is used in conjunction with HTML and CSS to build interactive features for web pages. Later in this book you will be using JavaScript to build custom play- back controls for a video.

HTML is always evolving. The latest revision of HTML is HTML5, the subject of this book. The official specification for HTML5 outlines a large number of new features that enable web developers to create websites that are faster and smarter than those they could build using older versions of HTML. These new features include LocalStorage (which enables developers to store data on the user’s computer) and HTML5 Video (that enables video playback in your web browser without needing a plug-in like Flash) as well as new interactive elements, such as date pickers and sliders.

The term HTML5 has become somewhat of a buzzword in recent years, used by clients, bosses, and developers alike to describe what is coming next in the journey of web technologies. Although this usage is common, it is not strictly accurate. HTML5 is just one part of a large number of standards that are collectively referred to as New Exciting Web Technologies (NEWT). Alongside HTML5, NEWT also encompasses things like WebGL (3D graphics in the browser) and GeoLocation (finding a user’s location). Although GeoLocation is not strictly part of HTML5, you will learn about it later in this book because it is so cool that I just couldn’t leave it out.

Google’s web browser, Chrome, is known for being both fast and secure. It also boasts great sup- port for the latest HTML5 and CSS3 technologies. Chrome has some great developer tools that you will be using later in this book to interact with the web pages that you create. Google Chrome also updates itself automatically whenever a newer version is available. You can download the latest version of Chrome here.

Internet Explorer (IE) is still one of the most popular browsers used today. Microsoft has released many versions of IE over the years, and it is worth noting that not all Windows operating systems will support the latest versions of IE. Windows XP, for example, does not support any versions of Internet Explorer past IE8. This means that Windows XP users will never get the latest HTML5 features without installing extra plug-ins or a different browser. Some older versions of the browser were plagued with bugs that meant that developers had to spend hours of extra time getting their web pages to display correctly. Fortunately, Microsoft has done a great job with the latest versions of IE (9 and 10) and has also managed to incorporate some of the latest HTML5 technologies. The latest version of IE will usually be downloaded when you perform Windows Updates; otherwise you can get it here.

Sublime Text 2 is rapidly gaining popularity among developers because of its flexibility and its great set of features. It is used in the latest Treehouse videos and offers loads of features, including themes, code completion, and snippets. Sublime Text 2 is not free, but many developers find that purchasing it is a good investment because it can help to increase your productivity. Currently, versions are available for Mac, Linux, and Windows. You can download Sublime Text 2 at http://www.sublimetext.com/2. Figure 1-1 shows Sublime Text 2 in action.

Sometimes, when you are building a website you want to quickly manipulate the page styles or test some JavaScript without having to go back to your text editor to make the changes. This is where developer tools come in. All of the most popular web browsers either have developer tools built in or have extensions available that will give you similar functionality. You will find that you become most accustomed to the tools available in your browser of choice; however, it is useful to know how to access and use the developer tools in other browsers in case you have to look into a compatibility issue when testing your websites.

Chrome Developer Tools—Access the Chrome developer tools from the Chrome browser by clicking on the little wrench to the right of the address bar and selecting the Developer Tools option from the Tools menu. Alternatively, you can right-click on an element on the screen and select Inspect Element from the context menu. Figure 1-2 shows the Google UK home page being inspected using the Chrome developer tools.

Before you can access the developer tools in Safari, you need to enable them. To do this, open the Preferences pane by pressing Ctrl plus the comma key in Windows or Command plus the comma key on a Mac. In the Preferences pane, click on the Advanced tab and select the checkbox labeled Show Develop Menu in Menu Bar. You should now see the Develop menu appear in the menu bar at the top of the screen. If you use Safari on Windows, you may need to display the menu bar by clicking the cog in the top-right corner and selecting Show menu bar. You can access all of Safari’s developer tools, including Web Inspector, from the Developer drop-down menu.

The IE developer tools contain all the features that you would expect, including element, CSS, and JavaScript inspectors as well as a console. There are also a number of tools to help you test your website on older versions of IE. These tools are useful because some of the older versions of Internet Explorer had bugs that can affect how your web pages will be displayed to users. There is also a Validate menu that includes links to easily validate the page you are viewing using the W3C validator. You learn about web page validation later in this chapter.

1. Start by creating a new file called index.html with your chosen text editor and save it on your desktop. Web page files are saved with an .html file extension.This extension tells the web browser that it should read the contents as HTML, construct the relevant page elements, and apply the styling you provide. If you were to save a file as a .txt file, for example, the browser would not recognize that it was an HTML file and would simply display the contents of the file in plain text (that is, the user would see the code).

The home page of your website should always be named index.html because this is the file that the web server will look to return when somebody visits the root of your website. For example, if a visitor goes to http://example.org, the web server will look for an index file in the root directory of the website—that is, http://example.org/index.html. The root directory is the top-level folder in your web space.

2. Type the following code in your index.html file. (This code can also be downloaded from the book’s companion website.)

<!DOCTYPE html> <html> <head><title>My First Web Page</title> </head><body> <p>Hello World</p></body> </html>

HTML web pages are made up of a number of elements; think of these as the components of a web page. Each element has a particular purpose; it might contain some text content, a heading, an image, or some information to be used by the browser. The code in your example includes three main elements: an <html> element, a <head> element, and a<body> element.

Those elements in turn contain some other elements, such as a <title> and a <p> (for paragraph) element. You learn more about each of those shortly.

In most cases, an element is made up of two tags, a start tag and an end tag. You may place some content between these tags that will be displayed on the web page—such as text, or even more elements. Each tag starts with a less-than sign (<) and ends with a greater-than sign (>). End tags also have a forward slash (/) immediately after the less-than sign so the browser can differentiate them from start tags and recognize the end of an element. Here is the <title> element from the page you just created:

<title>My First Web Page</title>

<html>...</html>

<!DOCTYPE html>

<img src="image.jpg" width="300" height="100" alt="A description of the image.">

This image element has four different attributes: src, width, height, and alt. Each of these attributes is assigned a value that passes some information to the browser. The value is placed within quotation marks. This example uses the src (source) attribute to tell the browser that the image that you want to display is the image.jpg file. You use the width attribute, with a value of 300, to tell the browser that your image should be displayed 300 pixels wide, and the height attribute with a value of 100 to make it 100 pixels tall. The value of the alt attribute here provides some text that the browser might display if the image cannot be loaded. You learn more about the <img> element, as well as lots of other content elements, in Chapter 4.

The <html> element is often used to define the language of the content within the docu- ment. This is done by adding a lang attribute to the start tag that has a two-character lan- guage code as its value. (This applies only to the actual page content and not to the tag names; they should always be written in English.) The following example defines the content language as English by adding the lang attribute with the value ”en”. (I highlight the new por- tion of the code with each new example so you can identify it easily.)

<html lang="en">

<html lang="en">

<head><title>My First Web Page</title></head

<body><p>Hello World</p></body>

<p>HTML5 Rocks!</p>

The position of each of the elements within your code is important. Make sure that both the start and end tags of your element are nested within the same element. For example, you should never have a start tag within the <body> element and the end tag outside of it. This code would be invalid, but more importantly, it will sometimes cause your web page to be displayed incorrectly in a web browser.

Debugging your code—Validation can be a useful way to find errors in your code that may be causing problems with how a page is being displayed in web browsers. For example, it is easy to miss an end tag in your code, resulting in problems with how browsers show the layout of the page. Using a validator can help you to find where end tags are missing or incorrectly placed, saving you a lot of time going painstakingly through each line of your code to check that you have used tags correctly.
Future-proofing your code—Just because your code works in browsers today does not mean that it will work in the future. Browser makers generally implement tech- nologies as they are defined in the relevant specifications, and these specifications are designed to ensure that technologies will be backwards compatible with older versions. This means that if you follow the web standards today, your code is more likely to work in the future because browser makers have a better idea of how your code is structured and what it is trying to do.

Best practices—Valid code follows a set of best practices that have been designed by working groups, and so by learning to write valid code you are also learning the best practices for building web pages. This is especially important for people who are new to web development because often browsers will automatically correct mistakes that you have made in your code without telling you about them. This can lead you to believe that you are writing nice valid code when, in fact, you are making a lot of mistakes.
More maintainable web pages—Writing code that conforms to a widely accepted set of standards makes it easier for multiple people to work on one project. Inevitably, everybody has his or her own, slightly different, programming style; by following web standards when writing code, you can ensure that your markup is consistent and easy for other people to understand.
It’s just more professional—If you are serious about creating quality sites, writing good valid code will show people that you know what you are doing. If you work in cli- ent services, it is also a great way of showing your clients that you are committed to building websites that are future-proof, maintainable, and standards-compliant. (Pro Tip: Clients like those words; put them in your project proposals.)

The validator will attempt to identify what version of HTML the page is written in by looking at the DOCTYPE declaration at the top of the page. (See the sidebar on DOCTYPEs, earlier in this chapter.) This enables the validator to run your code against the relevant set of web stan- dards. You can also explicitly tell the validator which standard you would like to test against by selecting one from the Document Type drop-down menu in the More Options section on the validator home page.

Validation is a great tool for web developers, but it is just that, a tool. There will be times when it is not realistic to produce pages that pass validation. Sometimes there are small little hacks that you will have to write in order to get some browsers (read: IE) to play ball, and these will show up as errors when you come to validate your pages. Ideally you want your pages to have as few errors as possible, but even some of the most well-known websites don’t pass validation. (Try running http://google.com or http://yahoo.com through the W3C validator.)

It is important to remember that HTML5 is still very new, and therefore, not all browsers will support the technologies that you will learn to use in this book. Furthermore, your users will not always be running the latest versions of their web browsers. You would be surprised how many people are still using IE6 (which was released in 2001!). Business users are especially renowned for using outdated browsers, often because of the restrictions put in place by IT departments. I believe that over the next few years the problem of users running outdated browsers will largely be solved by the introduction of the automatic-update features present in many modern web browsers.

Even though some of your users may not be able to use the latest features of HTML5, you should not be scared of using those features in your websites. As long as the core functionality of your website will work in older browsers, you will be fine.

A huge number of browsers and development tools are available to modern-day web devel- opers, and you learned about some of the most popular. I encourage you to play around with each of these tools to find the set that you are most comfortable working with. The same goes for browsers. Mozilla Firefox and Google Chrome are often among the first to implement new web technologies, but find the one that you like most. You will probably discover it is the one with the best developer tools. Make sure that you have all the popular browsers installed because you will need to use them all in order to test that your web pages are cross- browser compatible and available to as many users as possible.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.

Getting started with HTML5

What is HTML?

Setting Up Your Tools

Browsers

Google Chrome

Mozilla Firefox

Apple Safari

Microsoft Internet Explorer

Opera

Text Editors

Developer Tools

Building your first HTML5 web page

Constructing Elements

The <html> Element

The DOCTYPE Declaration

Attributes

The <head> Element

The <body> Element

Nesting Elements

Validating your web page

Why should you validate?

What are web standards?

Using validator.w3.org

Does your code always have to validate?

All browsers are not created equal

Summary

Related articles