Activity 18: Research HTML
Basic HTML Elements:
1. Headings
Headings are essential for organizing content and improving readability. HTML provides six levels of headings, ranging from <h1> to <h6>, where <h1> represents the highest level (most important) and <h6> the lowest.
Example:
<h1>Main Heading</h1>
<h2>Subheading Level 1</h2>
<h3>Subheading Level 2</h3>
Structure: Clearly defines sections and subsections.
SEO: Search engines use headings to understand page content.
2. Paragraphs
The <p> tag is used for text blocks, allowing you to define paragraphs in your HTML document.
Example:
<p>This is a paragraph of text that provides information about the topic.</p>
Text Formatting: Groups related sentences together.
Readability: Breaks content into manageable chunks.
3. Lists
HTML supports two types of lists: unordered lists and ordered lists.
a. Unordered List
An unordered list uses the <ul> tag to create a bullet-point list.
Example:
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
Organization: Presents items without a specific order.
b. Ordered List
An ordered list uses the <ol> tag to create a numbered list.
Example:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Hierarchy: Indicates a sequence or ranking of items.
4. Tables
Tables are created using the <table> tag, with rows defined by <tr>, headers by <th>, and data cells by <td>.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
Data Representation: Organizes data in a grid format for easy comparison.
Semantic HTML
Semantic HTML refers to the use of HTML tags that convey meaning about the content they contain. Common semantic tags include:
<header>: Represents introductory content or navigation links.<footer>: Contains footer information, such as copyright notices or contact information.<article>: Represents a self-contained composition that could be independently distributed.<section>: Defines a thematic grouping of content, typically with a heading.<nav>: Contains navigation links to different sections of the page.
Example:
<header>
<h1>My Website</h1>
</header>
<section>
<h2>About Us</h2>
<p>This section provides information about our company.</p>
</section>
<footer>
<p>© 2024 My Website</p>
</footer>
Accessibility: Enhances screen reader experiences and improves web accessibility.
SEO: Helps search engines understand the structure and context of the content
HTML Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Elements</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<section id="section1">
<h2>Introduction</h2>
<p>This is a paragraph introducing the content of my web page. Here, I will discuss various topics.</p>
</section>
<section id="section2">
<h2>Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</section>
<section id="section3">
<h2>Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Charlie</td>
<td>35</td>
<td>Chicago</td>
</tr>
</table>
</section>
<footer>
<p>© 2024 My Web Page</p>
</footer>
</body>
</html>
Explanation:
1. Document Structure
DOCTYPE Declaration: The
<!DOCTYPE html>declaration defines the document type and version of HTML being used.HTML Tag: The
<html>tag encapsulates all the content on the web page. Thelangattribute specifies the language of the document.
2. Head Section
Meta Tags: The
<meta charset="UTF-8">tag sets the character encoding for the document, while the<meta name="viewport">tag ensures proper scaling on different devices.Title Tag: The
<title>tag specifies the title of the web page, which appears in the browser tab.
3. Body Section
Header:
The
<header>tag contains introductory content, including the main heading<h1>and navigation links.The
<nav>tag houses an unordered list (<ul>) for navigation links to different sections of the page.
Sections:
Each
<section>tag represents a distinct part of the content.The first section introduces the page's topic with an
<h2>heading and a paragraph<p>.
Lists:
The second section includes two types of lists:
An unordered list (
<ul>) for bullet points.An ordered list (
<ol>) for numbered items.
Table:
The third section features a table created with the
<table>tag.Table rows are defined using
<tr>, with headers in<th>and data in<td>.
4. Footer Section
- The
<footer>tag concludes the document, containing a copyright notice.
Output:
