HTML Structure and Presentation

KS3 Computer Science

11-14 Years Old

48 modules covering EVERY Computer Science topic needed for KS3 level.

GCSE Computer Science

14-16 Years Old

45 modules covering EVERY Computer Science topic needed for GCSE level.

A-Level Computer Science

16-18 Years Old

66 modules covering EVERY Computer Science topic needed for A-Level.

GCSE Creating web pages using HTML and CSS (14-16 years)

  • An editable PowerPoint lesson presentation
  • Editable revision handouts
  • A glossary which covers the key terminologies of the module
  • Topic mindmaps for visualising the key concepts
  • Printable flashcards to help students engage active recall and confidence-based repetition
  • A quiz with accompanying answer key to test knowledge and understanding of the module

A-Level Designing Web pages using HTML and CSS (16-18 years)

  • An editable PowerPoint lesson presentation
  • Editable revision handouts
  • A glossary which covers the key terminologies of the module
  • Topic mindmaps for visualising the key concepts
  • Printable flashcards to help students engage active recall and confidence-based repetition
  • A quiz with accompanying answer key to test knowledge and understanding of the module

HTML Structure

HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages.  It defines the composition of web pages by using markup.  HTML elements are the primary units of HTML pages and are denoted by tags.  HTML tags label parts of content like headings, paragraphs, and tables.  Browsers do not show the HTML tags, but they are used in the background in order to deliver the content of the page.

HTML Tags

HTML tags are element names enclosed by angle brackets.  HTML tags usually come in pairs.  The first tag in a pair is the start tag, and the second tag is the end tag.  The end tag is written like the start tag, but with a forward slash inserted before the tag name.  The start tag is sometimes also called the opening tag, and the end tags are the closing tag.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.  The HTML document itself begins with <html> and ends with </html>.  The visible part of the HTML document is between <body> and </body>.

HTML tags are not case sensitive.

HTML Attributes

All HTML elements can have attributes, which provide additional information about the element, and are always specified in the start tag.  They usually come in name/value pairs.

CSS

CSS (Cascading Style Sheets) defines how HTML elements are to be presented on any given screen, paper or other media.  It saves the developer a lot of work since it can control the layout of multiple web pages simultaneously.

Ways to add CSS to HTML Elements

  • Inline – used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
  • Internal – used to describe a style for one HTML page. It is indicated in the <head> section of an HTML page, within a <style> element.
  • External – used to define the style for multiple HTML pages by using an external CSS file. You can change the look of an entire website by changing one file.  This is the most common way to add CSS to HTML elements.

HTML Structure vs. HTML Presentation

The composition of a webpage could be regarded as a mixture of the following four elements:

  • Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. It does not require any additional presentational markups or styles in order to fully relay its message.
  • Structure is the name given to the practice of using HTML in content to transmit substance, and also to define how blocks of information are structured in relation to one another. Examples include: “This is a list,” (i, d, k), “This is heading and subheading,” (<h1>, <h2>, …, <h6>), “This section is related to,” (<a>), etc.
  • Presentation of Style refers to anything related to how the content and structure is presented. Examples include size, color, margins, borders, layout, location, etc.
  • Behaviour or Interactivity is the implementation of client-side script to generate a two-way flow of information between the webpage and its users. JavaScript is an example of this.

Most of the time it is difficult to clearly distinguish content from the structure.  For example, the <img> tag, as a structural element, is used to produce graphical content.  In practice, the composition of a webpage can simply be viewed as a mixture of three elements: Structure, Presentation and Behavior.

The following terms are often used in correspondence with one another: separation of content and presentation, separation of meaning and presentation, and separation of structure and presentation.  Nonetheless, all of these terms basically make reference to the separation of the content (which is made meaningful by structure and presentation), or simply acknowledge the separation of the structure (HTML) and the presentation (CSS) of any given webpage.

The main goal of HTML 4.01 is the separation of structure and presentation,  as specified in section 2.4.1 of HTML 4.01.

HTML structure and presentation are essential for the proper functioning of web pages

Further Readings: