HTML Introduction

Identifying HTML elements and blocks

A HTML page is a web page, these are used to create websites. Today in class we were looking at how a web page is structured.

A HTML tag (element) is used to describe what a part of the page does.

Today we looked at

<!DOCTYPE html> – this tells the browser that the document is html5
<html></html> – everything in this block is html
<head></head> – this is the head of the html page, the content of this area is not displayed when the page is loaded.
<body></body> – this contains the main body of the website, this is where the website content is found.
<h1></h1> <h2></h2> – these are heading tags and are used to show headings.
<p></p> – This is a paragraph and normally contains a block of text.
<img/> – This is a image, details about the image are given in it’s attributes.
<em></em> – Emphasis, the text within this tag is often rendered as italics.
<strong></strong> – Important text, the text within this tag is often rendered as bold.
<br/> – line break, used to take a new line

Working on paper

We started off by underlining at the tags we could find. (red)
Then we looked for pairs of tags and drew a box around the blocks of each tag. (green)
We noticed ' and underlined these as well, they are called HTML entities. (blue)
Finally we identified the elements that were required for all web page (yellow)

HTML 5 template
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html>

*Note the image has some mistakes, can you spot them?