HTML Content Layer: Head and Body Sections
The HTML content layer is divided into two main parts: the head and the body. The head section contains information about the page that is not displayed directly on the page but is essential for browsers and search engines. This includes the page title, links to external stylesheets, and metatags.
The page title appears in the browser tab and helps users identify the page. It is set using the <title> tag inside the head.
External stylesheets are linked using the <link> tag with attributes specifying the relationship (rel="stylesheet") and the path to the CSS file. Relative file paths are preferred over absolute paths to ensure links work correctly when the site is moved or accessed from different locations.
- Use <title> to set the page title in the head.
- Link external CSS with <link rel="stylesheet" href="styles.css"> using relative paths.
- Include metatags for charset, description, keywords, author, and viewport to improve SEO and device compatibility.
Using Metatags in the Head Section
Metatags provide metadata about the web page. The charset metatag defines the character encoding, usually UTF-8, ensuring correct display of text.
The description metatag summarises the page content for search engines.
Keywords metatag lists relevant terms to improve search engine ranking, though its importance has decreased over time but is still useful for some engines or internal search functions.
- Example: <meta charset="UTF-8"> sets character encoding.
- Example: <meta name="description" content="A beginner's guide to HTML"> provides a page summary.
- Example: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures proper scaling on mobile devices.
Structuring Content in the Body Section
The body section contains all visible content, including text, images, tables, and multimedia.
Tables are created using <table>, with <thead> for headers, <tbody> for rows, and <th> and <td> for header and data cells respectively.
Table attributes allow cells to span multiple rows or columns using rowspan and colspan, and sizes can be set in pixels or percentages to control layout and readability.
- Example: <th colspan="2"> merges two columns for a header.
- Example: <table width="80%"> sets the table width relative to the page.
- Use CSS styles or inline style attributes to enhance table appearance.
Inserting Multimedia and Applying Styles
Images are added with <img> tags, requiring src and alt attributes. The alt attribute provides alternative text for accessibility and SEO.
Sound clips and videos can be embedded using <audio> and <video> tags respectively. Videos can have controls enabled or disabled and can autoplay if desired.
Adjusting size and aspect ratio is done via width and height attributes or CSS styles to maintain visual consistency and responsiveness.
- Example: <img src="photo.jpg" alt="A mountain landscape" width="300">
- Example: <video src="clip.mp4" controls autoplay width="400"></video>
- Use <div> tags to group elements for styling with CSS classes or IDs.
Text Formatting, Bookmarks, and Hyperlinks
Text is structured using heading tags (h1, h2, h3), paragraphs (p), and list items (li) within ordered (<ol>) or unordered (<ul>) lists.
Classes can be applied to these tags to assign predefined styles from CSS, improving consistency and appearance.
Bookmarks are created by assigning an id attribute to an element, allowing hyperlinks to jump to specific sections within the same page using the #id syntax in href attributes.
- Example bookmark: <h2 id="section2">Section 2</h2>
- Link to bookmark: <a href="#section2">Go to Section 2</a>
- Hyperlinks can point to local pages using relative paths, external websites with full URLs, or email addresses using mailto: links.
- Target attributes (_self, _blank, or named windows) control where the link opens.
At-a-glance summary
Comparison table
| Step | Detail | Example | Exam Use |
|---|---|---|---|
| Setting Page Title | Use <title> inside <head> to name the page | <title>My Site</title> | Marks for correct placement and syntax |
| Linking Stylesheet | Use <link> with rel and href attributes | <link rel="stylesheet" href="styles.css"> | Marks for correct relative path and attributes |
| Creating Table Headers | Use <th> inside <thead> for headers | <th>Product</th> | Marks for correct table structure |
| Inserting Image | Use <img> with src and alt | <img src="logo.png" alt="Company Logo"> | Marks for alt text and correct tag |
| Creating Bookmark | Add id attribute to element | <h2 id="top">Top</h2> | Marks for correct id and link |
| Hyperlink to Email | Use mailto: in href | <a href="mailto:info@example.com">Email us</a> | Marks for correct syntax and purpose |
Active recall
Quick check
1. Where should the page title be placed in an HTML document?
Inside the <head> section using the <title> tag.
2. How do you link an external CSS file named 'style.css' located in the same folder?
Use <link rel="stylesheet" href="style.css"> inside the <head> section.
3. What attribute is used to provide alternative text for an image?
The alt attribute in the <img> tag.
4. How do you create a bookmark named 'section1' in a web page?
Add id="section1" to an element, for example <h2 id="section1">.
5. What is the difference between relative and absolute file paths?
Relative paths specify the location relative to the current file, while absolute paths specify the full path from the root or drive; relative paths are preferred for local links to maintain portability.