By the end of this session, you will be able to: Understand and use a variety of tags to structure content Create paragraphs to hold text Edit your Week 1 page to include multiple sections Add lists to your website Feel confident adding content to your webpage Recap from Week 1 Last week you created your first webpage! You learned about: Logging in to Neocities Basic HTML structure Changing the title, headings, and paragraphs Today, we’re going to expand that page with more headings and paragraphs. Headings are like titles or chapter names. They range from <h1> (the biggest) to <h6> (the smallest). Example: My Cool Website About Me My Hobbies 💡 Tip: Use headings to show what each part of your page is about. Headings are not just for making text bigger. They help browsers, search engines, and screen readers understand the structure of your page by organising information into sections and topics.This makes webpages easier for people to read and understand. A webpage should usually have one main heading (<h1>) and smaller headings underneath it. For example, this webpage has: one <h1> heading at the top one <h2> heading below the navigation bar one <h3> heading for each section, and occasionally a <h4> heading within sections for extra context separation. Paragraphs hold the main text for your webpage. They are wrapped in <p> tags. You can have paragraph text outside of the <p> tag, but HTML tags are not only about appearance. They also describe what the content means. For example: <h1> means "main heading" <p> means "paragraph" <ol> means "ordered list" Example: <p>I love coding because I can create games and websites.</p> <p>My favourite subject at school is science.</p> 💡 Tip: Each paragraph should cover one idea or topic. When you have a lot of information on your page, it can be helpful to break it up using a list. Lists can be ordered, like this: this is item one this is item two this is item three or unordered, like this: this is item one this is item two some items can be nested like this sub-item two sub-item three this is item three Lists are different to paragraphs because you need an opening and closing tag for the list, and also for each list item create a list like this: <p>My hobbies are</p> <p>My hobbies are</p> <ul> <li>Snowboarding</li> <li>Software development</li> <li>Computer games <li>Minecraft</li> <li>Runescape</li> <li>GTA V</li> </li> </ul> use <ul> tags for an unordered list, or <ol> for an ordered list. Developers often leave comments on their work to explain to themselves and others what a line or block of code does. These comments are ignored by the computer and only visible inside the code. HTML offers the ability to add comments as well. A HTML comment looks like this: <!-- This is a comment --> <p>This is actionable HTML</p> Browsers will ignore HTML comments and won't display them on the page. IMPORTANT: Comments are still visible to users with CTRL+U or Inspect Element. Do not use them to store sensitive information. There is a hidden comment somewhere on this page. Try to find it. What does it say? This linked page has been created to show what a webpage without these headings, or any tags to separate the content, would look like. It contains all of the same information as in this lesson, but with minimal HTML. Do you think it is easier or harder to follow? Good developers write code which is easy to read and understand. Using headings, paragraphs, and lists not only helps your users, but helps you to maintain your webpage, by easily finding and changing information on it. Create a profile page with: a main heading at least two sections ordered and unordered lists meaningful headings Extension Challenge Create a webpage about: a game a sport a movie a hobby Your page must include: multiple headings paragraphs ordered and unordered lists