Unit 6 Website Development - Tutorial 1
1.8 Add paragraphs, lists and links
Continue the School Coding Club website by adding useful text, lists and links to the pages.
Core Content Elements
Most web pages contain text and links. HTML gives you tags for paragraphs, ordered lists, unordered lists and clickable links.
These elements help structure information so users can read it quickly.
Examples
<p>Our club meets every Wednesday after school.</p>
<ul>
<li>HTML practice</li>
<li>CSS challenges</li>
<li>Website projects</li>
</ul>
<ol>
<li>Create your folder</li>
<li>Add index.html</li>
<li>Open the page in a browser</li>
</ol>
<a href="about.html">Find out more</a>
Which Element To Use
| Element | Use it for |
|---|---|
<p> |
A paragraph of text. |
<ul> |
A bullet list where order does not matter. |
<ol> |
A numbered list where order matters. |
<a> |
A link to another page, file or website. |
Build It Yourself
- Add two paragraphs to
index.htmlintroducing the School Coding Club. - Add a bullet list of three club activities, such as HTML practice, CSS challenges and website projects.
- Add a numbered list on
about.htmlshowing three steps for joining the club. - Add a link from the homepage to
about.html. - Add contact information text to
contact.html.
Common Mistakes
- Putting list items outside the
<ul>or<ol>. - Forgetting the
hrefattribute on a link. - Using a list when a paragraph would be clearer.
- Using vague link text such as Click here.
Success Checklist
- Your paragraphs use
<p>tags. - Your lists use
<ul>or<ol>. - Each list item uses
<li>. - Your link uses
<a href="...">. - Each of the four pages now has useful School Coding Club content.