Introduction to basic HTML page structure
An HTML document is one that has been divided into its logical parts (i.e. headers, paragraphs, lists, quotes) and those parts have been 'marked up' with short labels. The labels are called tags. The combination of tags and the text within those tags is called an HTML 'element'.
Most structural 'elements' of an HTML document are enclosed within two tags - an opening tag and a closing tag. It is a good idea to think of elements as containers, e.g the <P> tells that browser that this is the start of a paragraph and </P> tells the browser that this is the end of the paragraph; the text is contained within the start and end tags.
Why is labelling the structure of a document a good thing?
Documents 'marked up' correctly will work for people using a variety of different browsers and computers. The logical structure of the document will always be displayed correctly - but the presentation (i.e. the look of the page) can be left to the browser or a style sheet.
HTML documents are divided into two main sections; the HEAD section and the BODY section. The HEAD section contains META information; which is information about the document. The most important META information is the title of the document - as represented by the TITLE element.
The BODY section contains the content of the document, i.e. the bits that are displayed by the Web browser.
The entire document is enclosed (or contained) within HTML tags; an opening <HTML> and a closing </HTML>.
Block and Inline Elements
Elements in the body part of the document can be divided into 'Block' elements and 'Inline' elements.
Block elements - defined distinct blocks of text, typically preceded and followed by a line break - and stretching the full width of the page. Paragraphs, headers, and blockquotes are block elements.
Inline elements are elements that appear within the flow of the text, e.g. STRONG, A, EM, IMG.
Here is a summary showing the hierarchical nature of HTML documents:
<HEAD>
<TITLE>
The title of your document goes here
</TITLE>
</HEAD>
<BODY>
<DIV class="bodytext">
<H1>Main heading</h1>
<P>A paragraph of text with an <strong>inline element </strong>.</P>
<H2>Subheading</h2>
<P>Another paragraph of text with an <em>inline element </em>.</P>
<DIV>
</BODY>
</HTML>
Inline elements are nested within block elements, block elements are nested within the BODY element, and the BODY element is nested within the HTML element.
Understanding the hierarchical nature of HTML is important if you want to create accessible Web pages - and is the key to really understanding what HTML documents are and how they work. You need to write valid, standards based HTML documents for Cascadding Style Sheets (CSS) to work properly. If you are using style sheets to format your pages, incorrect nesting of elements, or invalid HTML can lead to unexpected results.
Download your free copy of Twitter for Charities, Non-profits and the Voluntary Sector
You are about to download a PDF with 139 pages of Twitter tips and marketing magic..
"Essential reading for those in the Third Sector who need to know how to harness the power of Twitter." Tom Alcott, The Social Network Company.