Technique – Identifying, Describing and Explaining HTML & CSS Code

Summary of Technique

The aim of this technique is to enable learners to think about the execution level of HTML and CSS.

Learners are provided, on paper,  with a piece of HTML and/or CSS code along with an image of how it will appear in a browser. They will be asked to identify particular HTML elements chosen by the teacher by either highlighting/underlining specific sets of keywords or by drawing a box around blocks of code. They can then describe how the browser will interpret particular tags or rules.

Exercises for Teachers

The teacher exercises are given in the presentation above.

Ways of Using the Technique in the Classroom

Before doing these activities pupils will have to be aware of tags and blocks.  They should also have a reference document containing descriptions of the html and CSS keywords. For each exercise at the start it is useful to identify the tags that are going to feature.  Later exercises can have pupils identifying tags and blocks independently.

Methods to identify areas of code within the block:

• underline pairs of start and end tags with a coloured pen
• use highlighter pen to draw a block around the head, title and body blocks in the html document
• if using CSS, label different parts of the rule – eg selectors, properties

The examples could be printed on A3 paper so that learners can work in pairs.

After highlighting. ask learners to write down what happens inside the computer or on the screen when each line or section of code is executed.

Benefits for Learners

• by using coloured pens and highlighters, learners can easily see the structure of the html sections and that blocks can be nested
• they can easily recognise the start and end tags
• helpful for visual learners
• helps learners to understand the structure of an html document

Tips for Creating New Exercises

Start with small blocks of code and ask learners to identify simple tags , then progress to more in-depth tags and coding

• use the templates provided to create more examples

Pupil Materials

Link to additional files for pupil/teacher exercises