HTMLlayout.md

HTML Layout

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

● The new HTML5 layout elements and their uses
● How they offer helpful alternatives to the <div> element
● How to ensure older browsers recognize these elements

As with all HTML5 and CSS3 content, its usage is still subject to change but it is already widely being used by web developers and it is likely that you will want to use them

This example is about one of layout

so the important thing is

layout that is quite common
(particularly on blog sites).
At the top of the page is the
header, containing a logo and the
primary navigation.
Under this are one or more
articles or posts. Sometimes
these are summaries that link to
individual posts.
There is a side bar on the righthand side (perhaps featuring
a search option, links to other
recent articles, other sections of
the site, or even ads).
When coding a site like this,
developers would usually put
these main sections of the page
inside <div> elements and use
the class or id attributes to
indicate the purpose of that part
of the page.

The point of creating these
new elements is so that web
page authors can use them to
help describe the structure of
the page. For example, screen
reader software might allow
users to ignore headers and
footers and get straight to
the content. Similarly, search
engines might place more
weight on the content in an
<article> element than that
in the <header> or <footer>
elements. I think you will agree
that it also makes the code
easier to follow.

At this point, we have covered the main

tags that fit nicely into groups and sections.

In this chapter, we will focus on some helpful topics that are not easily grouped together. You will learn about;

🔽 ⏬ 🔽 ⏬

No	The main objrctes
1	The different versions of HTML and how to indicate
2	vHow to add comments to your code
3	Global attributes, which are attributes that can be used.
4	Elements that are used to group together parts of the page.
5	How to embed a page within a page using iframes
6	How to add information about the web page using.
7	Adding characters such as angled brackets and copyright.

In order to help web page authors move to this new syntax, two main flavors of XHTML 1.0 were created

• Strict XHTML 1.0, where authors had to follow the rules to the letter
• Transitional XHTML 1.0, where authors could still use presentational elements (such as and ).