Be able to place appropriate content in the body section of a web page

21 Website Authoring

The body of a web page is where all the visible content lives. Think of it like the stage of a play – the actors (text, images, links) perform here while the <head> section sets up the lights and music.

Understanding the Body Section

  • Contains <p>, <h1>–<h6>, <ul>, <ol>, <table>, <img>, <a>, and more.
  • It is the main content area that visitors read and interact with.
  • All elements must be nested inside the <body> tag.

Common Content Types & Tags

Content Type HTML Tag Example
Heading <h1>–<h6> <h2>Welcome to My Site</h2>
Paragraph <p> <p>This is a paragraph of text.</p>
List (bulleted) <ul> <li> <ul><li>Item 1</li></ul>
List (numbered) <ol> <li> <ol><li>Step 1</li></ol>
Table <table> <thead> <tbody> <table><thead><tr><th>Header</th></tr></thead><tbody><tr><td>Data</td></tr></tbody></table>
Link <a> <a href="https://example.com">Visit Site</a>

Step‑by‑Step Guide to Building the Body

  1. Start with a clear heading that tells visitors what the page is about. Example: <h1>My Portfolio</h1>
  2. Add a paragraph to introduce yourself or the topic. Use <p> tags.
  3. Include a bulleted list of key points or skills. Wrap each item in <li> tags inside a <ul>.
  4. Insert a numbered list if you want to show steps or a process.
  5. Use a table to display data clearly. Remember to use <thead> for headers and <tbody> for rows.
  6. Add links to other pages or resources. Make sure the href attribute points to the correct URL.
  7. Finish with a closing statement or call‑to‑action, like a contact form or a “Read More” link.

Exam Tip Box

When marking the body section:

  • Check that all tags are correctly nested.
  • Ensure headings follow a logical order (h1 → h2 → h3 …).
  • Verify that lists are properly closed and that <ul> or <ol> contain <li> items.
  • Tables should have a <thead> for column names and a <tbody> for data rows.
  • Links must have descriptive text, not just “click here”.

Quick Reference Cheat‑Sheet

Use this table as a quick reminder of the most common body tags.

Tag Purpose
<h1>–<h6> Section titles
<p> Paragraph text
<ul> <ol> Lists (bulleted or numbered)
<table> Data grids
<a> Hyperlinks

Revision

Log in to practice.

3 views 0 suggestions