Lesson 5

Meta and Structural HTML

Giving our app shape and description

Now we have the important elements of HTML in our code, we can add a few more elements to help give our page a name and add a little more structure.

1. Create a section element around your content

The 'section' element tells the browser that this area is a piece of generic content.

What is a section for?

A 'section' is a descriptive tag which holds some content. Usually web pages are made up of a number of sections (it can be helpful to imagine them as boxes) that can be positioned anywhere on the page. The 'section' element is a new addition to HTML and can be described as being more 'semantic'. See *Semantic Elements for more information.

2. Update your app title

This 'title' is not part of the 'body' content. This 'title' gives the page a name, which displays on the tab in your browser and is the same a search engine will use.

How can I see this title in the browser?

Click 'View your app' now – your title should be displaying in the tab at the top.

3. Mobile ready and "character set"

Thimble has automatically added two lines to your code that probably look a bit intimidating. They are both 'meta' tags, or pieces of information about our file that tells the browser some information about how to display it.

The 'charset' meta tag helps the browser interpret the code properly. The initial-scale and user-scalable parts ensure our games will look correct on a mobile device. See *Initial Scale for more details.

Why don't the meta elements a closing tag?

Some tags HTML tags are self-closing. Often tags that don’t contain any content, like the meta tag, are likely to self-close but it’s only through practice that you learn which ones do! If you’re ever stuck, the answer is only ever a web-search away.

*Initial Scale

When the iPhone first launched in 2007 one of the reasons it revolutionised the mobile computing landscape was because it pretended to every web page it had a much wider width than the screen size.
This meant that an iPhone could display a website exactly as it had been designed - and the user could double tap to zoom in a see more.
As we’re designing specifically for mobile, we need to tell mobile devices to tell us their true width, and to automatically have a zoom level of 1.

*Semantic Elements

Lots of HTML tags are not very descriptive. Div, for example, just stands for ‘division’ and could be anywhere on a page. With HTML5 came a number of new more ‘semantic’ (descriptive) tags - things like section, footer and header. These semantic tags make it easier for a computer to read and understand an HTML page - which is especially useful for things like accessibility (so that text can be enlarged for people with visual impairments for example).

Go to the next lesson

index.html

the web page

New Window
Next Lesson