Science Library - free educational site

Pages and Elements

“Today we think nothing of watching video and audio natively in the browser, and nothing of running a browser on a phone,” said Tim Berners-Lee, W3C Director. “We expect to be able to share photos, shop, read the news, and look up information anywhere, on any device. Though they remain invisible to most users, HTML5 and the Open Web Platform are driving these growing user expectations.” (Source: http://www.w3.org/, 28 October 2014)

This section deals with the syntax of HTML between the body tags. For information about declarations and head section metatags and other elements, see: HTML Documents.

the <div> element

HTML elements
HTML elements: each unique element is given an 'id', while repeated elements are given a 'class'

One of the elements you will use very frequently is the <div>, which declares a new inline or block element. Everything between the opening (<div>) and closing (</div>) tag is considered a child of this element, and whatever styling is assigned to the div will apply to the children as well, unless overridden by more specific styling rules.

HTML5 elements

HTML5 introduces new element tags which better describe their role in a page than the nondescript <div> tag. Although the HTML4 system of div and id/class identifiers will work fine, the specialised tags introduced with HTML5 guide search engines better with regards understanding the layout of the page.

<article>

Displays the content between the opening and closing <article> tags as a block element, specifying independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

<footer>

Clearly identifies the element which is used to identify the author, copyright information, and contact email and address. Footers are often used for a page, but they may also be used within an element, such as to identify the author of a specific article.

<nav>

<aside>

<button>

To make a clickable button, the

<button type="button" onclick="alert('Hello Earthling!')">This is a button</button>

can be used.

Alternative 'types' are 'submit', to send the data input to a form, and 'reset', to return the form to the state it had when the page was first loaded.

Tables

Tables are a very effective way to present data, and may be styled just as any other text or element via the table, row and cell elements.

Spanning two or more columns: colspan="2" inside the td or th tag.

Multi-Column Content

This title spans all columns in all browsers except Firefox

CSS3 provides a layout dedicated to allowing content to flow into any number of columns within an element. This is particularly useful for large amounts of text, and to obtain the 'newspaper look'.

Browser compatibility: up-to-date browsers will handle the column-count property.

  • Firefox ≥ 2.0 (prefix: -moz-)
  • Chrome ≥ 4.0 (prefix: -webkit-)
  • Safari ≥ 3.1 (prefix: -webkit-)
  • IE ≥ 10
  • Opera ≥ 15.0 (prefix: -webkit-)
<style> 
.columns {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
/*sets optimum width to 100px and number of columns to 3*/

    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;

    -webkit-column-rule: 1px dotted #ccc; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px dashed #ccc; /* Firefox */
    column-rule: 1px dotted #ccc;
/* dotted, solid, dashed */

}

h3 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
</style>

  • DOM
  • Document Object Model: an API (application programming interface) for XML extended for use in HTML, by means of a page map, specifiying the relationship between nodes consisting of elements such as head, body, title, p elements, etc.

    Although often used synonymously, Javascript and ECMAScript differ in that ECMAScript provides the core (syntax, types, statements, keywords, reserved words, operators, objects), and JavaScript implementation is extended by the DOM and BOM (Browser Object Model).

    DOM Level 0 is not a specification as such. It represents the state of the original DHTML supported by IE4.0 and Netscape 4.0 at the height of the browser war in the late 90s. W3C (World Wide WEb Consortium) developed the DOM standards to prevent Microsoft balkanising the Internet by separate development of DHTML.

    DOM Level 1 became a WC3 recommendation in October 1998. It became functional only in the later Internet Explorer version 5.5. Firefox has been more assiduous in ensuring compliance to the DOM standards. It consists of two modules: the DOM core and DOM HTML, which added HTML-specific objects and methods to the core.

    DOM Level 2 added DOM Views, DOM Events, DOM Style, and DOM Traversal and Range modules, to allow the DOM to cope with new interface types.

    DOM Level 3 is a further extension of the DOM, adding DOM Load and Save (method for uniform loading and saving documents, DOM Validation (method to validate a document). DOM LEvel 3 supports all of XMA 1.0 (XML Infoset, XPath, XML Base).

    DOM Level 4 is under development as of March 2016.

  • BOM
  • Browser Object Model: the BOM allows the control of browser windows and frames, and any browser-specific extension to JavaScript. These include pop-up new browser windows, move, resizing and closing of browser windows, the navigator object (provides information about the browser), location object, screen object, cookie support, and custom objects (e.g. IE's ActiveXObject and XMLHttpRequest).

  • DHTML

Content © Andrew Bone. All rights reserved. Created : November 6, 2014 Last updated :March 8, 2016

Latest Item on Science Library:

The most recent article is:

Air Resistance and Terminal Velocity

View this item in the topic:

Mechanics

and many more articles in the subject:

Subject of the Week

Mathematics

Mathematics is the most important tool of science. The quest to understand the world and the universe using mathematics is as old as civilisation, and has led to the science and technology of today. Learn about the techniques and history of mathematics on ScienceLibrary.info.

Mathematics

Great Scientists

Leo Baekeland

1863 - 1944

Leo Baekeland, 1863 - 1944, was a Belgian-born American chemist, best known for his invention of bakelite, the first commercially produced synthetic polymer.

Read about history on ScienceLibrary.info
Vitruvian Boy

Quote of the day...

ZumGuy Internet Promotions

Website content services