Skip to content

Read03.md

Latest commit

 

History

History
75 lines (71 loc) · 2.96 KB

Read03.md

File metadata and controls

75 lines (71 loc) · 2.96 KB

Chapter 17

HTML5 Layout

  • HTML5 layout elements
  • How old browsers understand new elements
  • Styling HTML5 layout elements with CSS

HTML5 is introducing a new set of elements that help define the structure of a page.

  • They are covered here (rather than with the other HTML elements you met earlier in the book) because you'll find it easier to understand how they can be used now that you have seen how CSS can control the layout a page. These new elements are going to play an important part in creating layouts going forward. In this chapter you will see:
  1. The new HTML5 layout elements and their uses
  2. How they offer helpful alternatives to the
    element
  3. How to ensure older browsers recognize these elements

Traditional HTML Layouts

  • For a long time, web page authors used
    elements to group together related elements on the page (such as the elements that form a header, an article, footer or sidebar). Authors used class or id attributes to indicate the role of the
    element in the structure of the page. image

New Html5 Layout Elements

  • HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them. They are still subject to change, but that has not stopped many web page authors using them already.

Headers & Footers

The and elements can be used for:

  • The main header or footer that appears at the top or bottom of every page on the site.
  • A header or footer for an individual or
    within the page

Articles'

Sorce

Chapter 8

Extra Markup

  • X Specifying different versions of HTML
  • Identifying and grouping elements
  • Comments, meta information and iframes

The Evolution of HTML

  • Each new version was designed to be an improvement on the last (with new elements and attributes added and older code removed).
  • There have also been several versions of each browser used to view web pages, each of which implements new code. Not all web users, however, have the latest browsers installed on their computers, which means that not everyone will be able to view all of the latest features and markup.
  • Where you should be particularly aware of browsers not supporting certain features, I have made a note of this (as you have seen with some of the HTML5 elements introduced in the Forms chapter — and as you will see in the CSS chapters).

Comments in html

Grouping Text & Elements In a Block

  • The
    element allows you to group a set of elements together in one block-level box.
  • For example, you might create a
    element to contain all of the elements for the header of your site (the logo and the navigation), or you might create a
    element to contain comments from visitors.
  • In a browser, the contents of the
    element will start on a new line, but other than this it will make no difference to the presentation of the page.