An HTML document is one that has been divided into its logical parts (i.e. headers, paragraphs, lists, images, quotes and so on) 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

tells that browser that this is the start of a paragraph and

tells the browser that this is the end of the paragraph; the text is contained within the start and end tags.

Why is labeling 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 openingand a closing.

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:



Main heading

A paragraph of text with an inline element .



Another paragraph of text with an inline element .


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 Cascading 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.

Some common HTML Elements


some text

Headers: some text were n = a number 1 to 6.


some text

Links: link text


Unordered Lists:

  • list text

Deprecated elements

Some of the attributes I have mentioned above are now ‘deprecated’ in HTML 4 by the World Wide Web Consortium (W3c). This means that they may be made obsolete in future versions of HTML. Users are discouraged from using them because similar or better results can be obtained by using style sheets.

However they are still legal attributes and can be used alongside style sheets to ensure that a page ‘degrades’ gracefully on browsers that do not support style sheets. A full list of deprecated elements and attributes can be found on the W3c Website.

Contact us today to discuss your website

Or phone to talk over your ideas: 07810 098 119.

Related Content

  • Accessibility Auditing – WCAG 2.1 & WCAG 2.2 and Accessible Website Design, UK
    Jim Byrne is an accessibility specialist with three decades of experience in accessible website design, training and accessibility auditing and consultancy for the not-for-profit, education, public and third sector. An award-winning website developer, website accessibility training provider and WCAG 2 expert ( he provided feedback on the development of WCAG ...
  • Accessibility of audio and video content on the web
    I have re-published this content from a report I wrote for The Spoken Word Project in March 2007 - because it occurred to me that this might be useful information for organisations thinking of adding video to their websites. Time constraints mean that this document cannot be considered a definitive ...
  • Don’t use the statistics defence as a reason to exclude people from your content
    I was recently involved in a discussion about whether website designers should still be expected to accommodate Internet Explorer 6 users. The case against accommodating IE 6 users is invariably backed up with statistics about how few people now use this, admittedly flawed, browser. I've heard 'the statistics defence' (as I ...

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course. Video image from Web Accessibility Online Training Course - WCAG 2.1 Compliance

Working with non-profits, charities, voluntary and public sector organisations and social enterprises for over 20 years. Jim set up one of the worlds first website accessibility web agencies in the mid 1990s.