Giving your site a title

Take a moment to update index.html by giving it a title that fits this project. You can call your portfolio whatever you'd like to. I'll call mine as Bootstrappin' Portfolio. For the sake of precision, I'll use the HTML entity ' for the apostrophe, as shown in the following line of code:

<title>Bootstrappin' Portfolio</title>

Adjusting the outdated browser message

The file carries a message for users of ancient browsers. You'll find this right around line 20. It reads as follows:

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

Note that it includes links to http://browsehappy.com, which features recommended browser upgrades, and to the Google Chrome Frame, a free plugin to retrofit Internet Explorer with modern browser capabilities. (Note that the Google Chrome Frame reference may go away after Google stops supporting it in January 2014.)

At the time of writing this book, this message came wrapped in a conditional comment that targets only Internet Explorer browsers older than IE7 (thus, IE6, IE5, and so on). No one else will see this message unless, of course, they view the source code.

Meanwhile, the world is pressing on. Many organizations are upgrading browsers, and many designers are dropping or reducing support for IE7. Typically, the goal is to ensure that IE7 users can navigate through the site and gain access to its information, though they will not have the full experience.

The reason for this is pretty pragmatic. Fully supporting IE7 requires writing a number of workarounds, both in CSS and in JavaScript, at the cost of more code, more bandwidth, more time, and more money.

Thus, Bootstrap 3 has dropped support for IE7. When we're done developing, we should test to ensure nothing restricts IE7 users from reading and navigating through our site. However, they won't see its full beauty.

So, let's update the message to include IE7 users. We need to change the opening tag of the conditional comment by adding an e for = , so that it reads the following:

<!--[if lte IE 7]>

Note that it now says lte where originally it was only lt.

A few notes seem in order.

Note

For IE7 and older browsers, you might consider providing basic styles in a legacy stylesheet to ensure these users can utilize your site.

If you have a large base of users who rely on IE7 and who are unlikely to be able to upgrade, you probably need to consider reverting back to Bootstrap 2.2.3, which supports IE7.

Note that if you would like to see what this message looks like, and perhaps customize its style, you can view it in any browser by temporarily deleting or commenting out the IE comment at the beginning (<!--[if lte IE 7]>) and at the end (<![endif]-->).

Setting up major structural elements

We're almost ready for page content. Right now, there's only a paragraph. Let's go ahead and get a bit more content rolling. Specifically, we'll create the following:

• A banner space with our logo and navigation

• A main content space for page content

• A footer area for copyright information and social links

We'll set this up using current HTML5 best practices with the support of major Accessible Rich Internet Applications (ARIA) role attributes (with roles such as banner, navigation, main, and contentinfo). If you've been following HTML5 but not closely in the past few months, note the recently added element, <main role="main"></main>, whose purpose is to provide a sectioning element dedicated to the main content of a page or section. For more information, see this sitepoint article at http://www.sitepoint.com/html5-main-element/.

So, consider the following comment and paragraph:

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

And replace the preceding code with the following:

<header role="banner">
  <nav role="navigation">
  </nav>
</header>

<main role="main">
  <h1>Main Heading</h1>
  <p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
  <p><small>Copyright &copy; Company Name</small></p>
</footer>

This gives us some basic page structure and content. Let's keep rolling.