Learning Responsive Web Design

Chapter 3. HTML for Responsive Sites

To create a responsive website, you’ll be using both HTML and CSS (with an occasional smattering of JavaScript as well).

Even if your job doesn’t involve creating the code for websites, you should know a bit about what’s going on “under the hood” of responsive sites, so don’t skip the next few chapters.

This chapter assumes you have at least some basic familiarity with HTML. If you’re not a coder, you don’t have to understand exactly how everything works, just get a general idea.

Even if you have a lot of experience with HTML, there will be concepts addressed in this chapter that you may not be familiar with, like the viewport attribute and creating a web page using the structural elements that are new in HTML5.

Other concepts, like doctype and charset, might not be new to you, but they’re addressed here because they’re necessary to understanding how to properly set up an HTML page for a responsive website.

In this chapter, we’ll also look at versions of HTML, and what it means that you’ll be using HTML5 to create websites. Then we’ll set up an example web page, using HTML5 structural elements to put it together.

We’ll finish up by talking about how to write good code, using semantic HTML and separating content and presentation, along with best practices for using HTML to properly mark up your content to make it accessible to all users.

Note

If you don’t know HTML at all, a good place to start is the “Introduction to HTML” (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction ...