Web Page Layout
Layouts that work on many devices
<div> layouts and CSS can create flexible layouts that work on various screen sizes. Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.
<header> <footer> <nav> are new in html5
A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website. In HTML5 there is a <header> element, as well as a <nav>, <footer> that can replace these div tags.
Why use Fixed Layout
A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.
Devices vary in resolution and pixel density
As hardware changes, resolution and pixel density change Web layout needs to be flexible and adjust to various mobile devices and new devices A pixel is an abstract unit of measurement and it does not have a single specific size.
Why consider Fluid Layout
In a fluid website layout, also referred to as a liquid layout, the majority of the components have percentage widths, and thus adjust to the user's screen resolution.
Semantic elements
Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer. HTML5 offers new semantic elements to clearly define different parts of a web page; such as <header>
Website Layouts
Most websites have organized their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. Cascading Style Sheets are used to position elements, or to create backgrounds or a colorful look for the pages. Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
<div> defined
The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. The <div> element is very often used together with CSS, to layout a web page
<div> tag and attributes
The <div> tag supports the global attributes in HTML HTML 5 has introduced some new global attributes Global attributes can be used on any HTML element
Container elements
The <header> tag specifies a header for a document or section. The <header> element should be used as a container for introductory content or set of navigational links. The <footer> tag defines a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. The <nav> tag defines a set of navigation links. It is only intended for a major block of navigation links.
The Power of <div>
Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.
Some examples of global attributes
id - Specifies a unique id for an element class - Specifies one or more classnames for an element (refers to a class in a style sheet) style - Specifies an inline CSS style for an element lang - Specifies the language of the element's content
