HTML Structure and Presentation

46 Computer Science Topics

We’ve created 46 modules covering every Computer Science topic needed for GCSE level. These are transferable across AQA, CIE, Edexcel, CIE & Internationally. Suitable for teachers or home educators alike.

Whether you’re a brand new Computer Science teacher, or you’ve been teaching ICT for years, our resources will save you hours and hours of lesson preparation every single week.

View the resources →

HTML

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 tag 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, papers 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.

Structure vs. 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 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.