What is machine learning? – A beginner’s guide
What is machine learning, and why is it so useful? We take a detailed look …
Home / IT & Computer Science / Secondary Education Teaching / Introduction to Web Development / HTML structure and tags
HTML structure and tags
HTML uses tags to control the structure of a web page. Watch Matt Hogan explain more.
Now it’s time for you to have a go at changing the visual appearance of the content on your web page. Let’s have a look at lists. On this Raspberry Pi fan club web page, we have a paragraph that describes the specifications of the Raspberry Pi 4. This is quite hard to read. We better put it into some sort of list. There’s two sorts of lists that we can have. There’s an unordered list, which returns bullet points, and an ordered list, which returns numbers. So for this, we probably want bullet points. So we have to tell– put into the HTML that we’re going to put in an unordered list, ul.
It gives us the end tag, which we can drag to the end of where our list is going to be. And then we need to say the list will start here. The first point of the list would be here. So we’ve got an li tag. It gives us the end of the li tag, which we can grab. And then we can drag it to the end of that point. So this is going to be our first point here. And get rid of that comma. And we can do another one for the next point of the list.
Here. Drag it to the end of that point. Get rid of that comma. And you can see on the right hand side, we’ve got two bullet points. You can also carry on and do– and add to that list. If you wanted to do the ordered list, all we have to do is change the ul tag into an ol tag.
And you can see on the right hand side it changes to the numbers 1 and 2. We can also all alter the appearance of the text on our web page. So if we wanted to italicise this word fantastic, we can use the em tag.
And we can just drag the end of the em tag to the end of fantastic. And you can see it italicised here on our preview. We can also embolden text by using the strong tag.
So we can type in the strong tag, grab the end tag, and drag it to the end of the Raspberry Pi. And you see that in bold on the right hand side.
Great. There’s also a place for a quote. So here’s a quote from Raspberry Pi website. But it just looks like the same as the rest of the page. It’s not– that doesn’t indicate it’s come from somewhere else. So we can use the block quote tag. So let’s find it on the HTML.
Here it is. Now we can insert block quote tag. And that’s the actual word block quote. And that’s just going to cut the end tag out, make sure you get everything you need.
There’s the end of that line.
And paste it in. And you can see on the preview here it’s now indented. So it gives that appearance of being from somewhere else.
There’s also a space here for an image. Here’s a Raspberry Pi 4, but we don’t have an image in it yet. So we need to get an image from somewhere. So I’ve searched for an image and found this Raspberry Pi 4. And we need to copy the URL. So we need to grab this, copy it. So now we need to paste that URL into the appropriate place on our web page. So here’s the Raspberry Pi 4. So just below that, we can paste the URL in. But what– it just gives us the URL at the moment. It doesn’t actually give us the image. So we need to use the img tag.
So img. And we also– we need to tell it where the source has come from. So– and then equals.
And then you need to put the source into quotes.
And we need to finish that tag off. So now we can see we’ve got the Raspberry Pi image, but it is huge. So we need to make it a bit more of appropriate size for our web page. So we need to add in some attributes here of width and height. So let’s do width. Let’s say 200. And then we can have the height attribute, as well, which let’s say is 200 as well.
Now we can see that we have the Raspberry Pi 4 at a really nice size for our webpage. Now it’s time for you to have a go. Try changing the appearance of your webpage by using these tags, and share a link to your trinket in the comment section. If you get stuck, be sure to ask questions and help each other out. I look forward to seeing what you create.
In this step you will learn about the basic structure of a webpage and look at more tags to use for your Raspberry Pi Fan Club page. Compare the basic HTML structure below to your Raspberry Pi Fan Club webpage:Any information within the 
The table below describes the tags that have been used in the basic HTML structure above:
Add
Add an appropriate image to your Raspberry Pi Fan Club webpage by adding an 
Look at the other webpages that have been created and compare them to yours. Is there anything you can take from the other learners’ webpages that you can use to improve yours?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<head> tags is hidden and used by browsers and web crawlers; this is known as metadata. Also notice that some tags are nested inside other tags; in the example below, <title> is nested inside <head> and <head> is nested inside <html>. The image below shows how elements can exist inside other elements:The table below describes the tags that have been used in the basic HTML structure above:| Tag | Description |
|---|---|
| <!DOCTYPE> | This is a declaration to show the document type; it helps the web browser to display the webpage correctly |
| <title> </title> | This defines the title of the webpage, to be displayed on the tab of a web browser |
| <html> </html> | This shows the start and end of the HTML file |
| <head> </head> | This gives information about the file (metadata) |
| <body> </body> | This defines the main body; everything within the body tags appears on the webpage |
| <h1> </h1> | This defines a heading; <h1> to <h6> tags are used for different-sized headings, with <h1> the largest and <h6> the smallest |
| <p> </p> | This defines a paragraph |
Headings and lists
Headings are used to start a new section, to help the reader understand the purpose of that part of the webpage.You use<h2> and <h3> headings to introduce different sections, such as the “Raspberry Pi 4“ header that sits inside the “Raspberry Pi Fan Page” section of your Raspberry Pi Fan Club webpage. Think of <h2> headings like the chapters of a book. Those individual sections might also use more specific headings (<h3> tags, then <h4> tags, and so on) to introduce subsections.Change the heading tags on your Raspberry Pi Fan Club webpage to be more useful to the reader.You can also use a list on your Raspberry Pi Fan Club webpage, to break a paragraph into key points. This can make the points stand out for the reader.To create a list on your webpage, you have two options: an unordered list <ul>, which gives bullet points, or an ordered list <ol>, which gives numbered points. Each item in the list must be contained within <li> tags:<ul>
<li>Bullet point</li>
<li>Bullet point</li>
</ul>
Add
<em> tags to italicise and <strong> to embolden text on your page, to highlight the key points.<em>This is italicised.</em>
Images and blockquotes
If you want to show the Raspberry Pi logo, or help the reader understand a point you are making on your page, you may want to include an image.The<img> tag is used to define an image element on a webpage. It uses the src attribute to indicate the source of the image — where it is stored. The <img> tag used below is from the Raspberry Pi Fan Club webpage:<img src="https://sandbox.trinket-shell.com/5550343ee6c144dc/raspberrypi.png">
<blockquote> tags are used when you want to give a quote from another source; this is useful when you want to back up a point you are making. This will indent the text and make the reader aware that it is different to the rest of the text.You have used a lot of new tags, so I’ve recapped them in this table:| Tag | Description |
|---|---|
| <ul> </ul> | Defines an unordered list, shown as a bulleted list |
| <ol> </ol> | Defines an ordered list, shown as a numbered list |
| <li> </li> | Defines a list point |
| <blockquote> </blockquote> | Defines a section that is quoted from another source |
| <img> | Defines an image; uses the src attribute within the tag to indicate the source of the image |
<img> element, as shown in the example HTML above.Here are the URLs for three images you can use to replace the URL in the example above:- https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi2.png
- https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi3.png
- https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi4.png
<blockquote> on your Raspberry Pi Fan Club webpage.Share your webpage
- Save your Raspberry Pi Fan Club webpage.
- On your Trinket, click on “Share”.
- Click on “Link”.
- Copy the link.
- Paste the link in the comments below for your fellow learners.
Look at the other webpages that have been created and compare them to yours. Is there anything you can take from the other learners’ webpages that you can use to improve yours?
How to reduce your carbon footprint – 20 top tips
If you’re wondering what a carbon footprint is and why it’s so important, we’ve got …
Explore: the data industry in detail
We take a look at what the state of play is in the data industry. …
Learning Subscriptions: the Education Trend of 2020
Find out about the acceleration of online learning in 2020 and discover how online education …
Our purpose is to transform access to education.
We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.
We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.
Learn more about how FutureLearn is transforming access to education
