1.3. HTML Elements and Attributes (25 minutes)
Lesson 1: Introduction to HTML and Basic Structure
1.3. HTML Elements and Attributes (25 minutes)
Common HTML Elements: Headings and Paragraphs
HTML elements are the building blocks of web pages. They define the structure and content, making it possible for browsers to render text, images, and other media. Two of the most common elements used for text content are headings and paragraphs.
Headings (
<h1> to <h6>):HTML provides six levels of headings, ranging from <h1> (the most important) to <h6> (the least important).
Headings help to organize content hierarchically, with <h1> typically used for the main title and subsequent headings used for subheadings.
Example:
// Some code
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>Paragraphs (
<p>):The
<p>tag is used to define paragraphs of text. Each block of text inside a <p> element is displayed with some space above and below, making it easy to read.Example:
// HTML code
<p>This is a paragraph of text in HTML.</p>These elements work together to create structured, readable web content.
HTML Attributes: Adding Additional Information to Elements
Attributes are special characteristics or properties that can be added to HTML elements. They provide additional information about the element and often modify its behavior or appearance. Attributes are always placed in the opening tag of an element, and they come in name/value pairs (e.g., name="value").
Here are a few common attributes:
lang attribute in
<html>:Specifies the language of the document, which is important for accessibility and search engines.
Example:
// Some code
<html lang="en">title attribute:
Specifies extra information about an element, typically shown as a tooltip when the user hovers over the element.
Example:
// HTML code
<p title="This is a paragraph.">Hover over this paragraph to see the tooltip.</p>Attributes help customize the behavior and appearance of elements, allowing developers to better control how their web content is interpreted by both browsers and users.
The Anchor (<a>) Tag: Adding Hyperlinks
The anchor tag (<a>) is used to create hyperlinks, which allow users to navigate from one webpage to another. Hyperlinks are one of the defining features of the web and are crucial for connecting information across websites.
href attribute:
The most important attribute of the anchor tag is href, which stands for "Hypertext REFerence." This attribute specifies the URL (web address) of the destination page.
Example:
// Some code
<a href="https://www.example.com">Visit Example</a>In this example, when the user clicks on "Visit Example," they will be redirected to https://www.example.com.
Opening Links in a New Tab:
To open a link in a new tab, you can add the target="_blank" attribute to the anchor tag.
Example:
// Some code
<a href="https://www.example.com" target="_blank">Visit Example</a>The anchor tag is one of the most frequently used HTML elements because it provides a way to create a connected, navigable web.
Students Activity
Objective:
Students will practice modifying an existing HTML file by adding hyperlinks using the anchor (<a>) tag. This will help them understand how to connect pages on the web and how to use attributes effectively.
Activity Steps:
Open the Existing HTML File:
Instruct students to open the HTML file they created earlier (from previous lessons) using their preferred text editor (e.g., Notepad, Visual Studio Code).
Add a Hyperlink to Their Favorite Website:
Ask students to add an anchor tag with a hyperlink to a website they enjoy visiting. They should use the following syntax:
// HTML code
<a href="https://www.favorite-website.com">Visit My Favorite Website</a>Encourage them to use a website they frequently visit, like a social media platform, a news site, or a personal blog.
Save and Preview the File:
After adding the hyperlink, students should save the file and open it in a browser.
When they click the link, it should redirect them to the website they specified in the href attribute.
Enhance the Link (Optional):
Instruct students to add the target="_blank" attribute to their anchor tag so that the link opens in a new tab.
Example:
// Some code
<a href="https://www.favorite-website.com" target="_blank">Visit My Favorite Website</a>Test and Reflect:
Students should test the link to ensure it works as expected. Ask them to reflect on the following:
Did the link work correctly?
What happens when they use the
target="_blank"attribute?Why are hyperlinks important for navigating the web?
Extension Activity (Optional):
Students can experiment by adding multiple links to different websites, organizing them as a list:
// HTML code
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
<li><a href="https://www.example.com" target="_blank">Example Website</a></li>
</ul>
By the end of this activity, students will have a deeper understanding of HTML elements, attributes, and how to create hyperlinks using the anchor tag. They will also gain hands-on experience working with attributes to control the behavior of their HTML elements.
Last updated