Learn HTML Basics to Advance in 7 Days: Day Three
HTML Lists
Welcome to Day Three of learning HTML. Today, we will explore HTML lists, links, and iframes. Lists help organize content in a structured way.
There are two main types of lists in HTML:
- Ordered List (<ol>) - Displays items in a numbered format.
- Unordered List (<ul>) - Displays items with bullet points.
Here are examples of each:
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered List
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
HTML Links
Links are an essential part of the web. They allow users to navigate from one page to another. Links are created using the <a> tag. The "href" attribute specifies the URL of the page the link goes to.
<a href="https://www.example.com">Visit Example</a>
Links can also be used to link to different sections within the same page. This is done using anchor names.
Link to a Section within the Same Page
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
<p>This is Section 1.</p>
HTML Iframes
An iframe is used to embed another document within the current HTML document. The <iframe> tag is used to create an inline frame. Here is an example:
<iframe src="https://www.example.com" width="600" height="400">
Your browser does not support iframes.
</iframe>
This iframe embeds the content from "https://www.example.com" within the current page. You can set the width and height of the iframe.
Nested Lists
Lists can be nested inside each other to create a more complex structure. Here is an example:
<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This creates a nested list where "Item 1" has two subitems.
Styling Lists
Although we are not using CSS in this tutorial, it's good to know that lists can be styled using CSS. You can change the list style type, position, and more. For example, you can make the bullets in an unordered list appear as circles or squares.
Conclusion
Today, we learned about HTML lists, links, and iframes. These elements help structure and link content in a meaningful way. Practice creating lists, adding links, and embedding content using iframes to enhance your HTML skills.
FAQ
What is the difference between an ordered and unordered list?
An ordered list (<ol>) displays items in a numbered format, while an unordered list (<ul>) displays items with bullet points.
How do you create a link in HTML?
Links are created using the <a> tag with the "href" attribute to specify the URL. For example: <a href="https://www.example.com">Visit Example</a>.
What is an iframe?
An iframe is used to embed another document within the current HTML document. It is created using the <iframe> tag.
Can lists be nested in HTML?
Yes, lists can be nested inside each other to create more complex structures. For example, you can nest an unordered list inside an item of another unordered list.
How do you link to a section within the same page?
To link to a section within the same page, use the <a> tag with the "href" attribute set to the id of the section. For example: <a href="#section1">Go to Section 1</a> and <h2 id="section1">Section 1</h2>.