HTML structure and tags
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<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>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:
|<!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 listsHeadings are used to start a new section, to help the reader understand the purpose of that part of the webpage.You use
<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 (
<h4>tags, and so on) to introduce subsections.
Want to keep
Raspberry Pi Foundation online course,
Introduction to Web Development
<ul>, which gives bullet points, or an ordered list
<ol>, which gives numbered points. Each item in the list must be contained within
Create a list on your Raspberry Pi Fan Club webpage.
<em>tags to italicise and
<strong>to embolden text on your page, to highlight the key points.
<em>This is italicised.</em>
Images and blockquotesIf 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
srcattribute to indicate the source of the image — where it is stored. The
<img>tag used below is from the Raspberry Pi Fan Club webpage:
In the HTML above, a Uniform Resource Locator (URL) is used to point to where the image is stored — in this case, on the Trinket website.
<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:
|<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 |
<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:
<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.
Introduction to Web Development
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.