In the previous posts, we learned about the basic structure of an HTML document and how to create a simple web page. Now, let's dive deeper into HTML tags and explore their various uses and functionalities.
HTML tags are the building blocks of a web page. They define the structure, content, and elements within the page. Each tag consists of an opening tag (<tag>) and a closing tag (</tag>), with the content placed in between. Let's take a look at some commonly used tags and their purposes:
Headings are used to define the hierarchical structure of the content. HTML provides six heading tags, from h1 to h6, with h1 being the highest level and h6 the lowest. These tags are typically used to indicate the importance and organization of the content on a page. For example:
<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>
Paragraphs are used to group text content together. By wrapping text within <p> and </p> tags, you can separate it from other elements and apply specific formatting if needed. For instance:
<p>This is a paragraph. It can contain multiple sentences and blocks of information.</p>
HTML offers two types of lists: ordered lists (<ol>) and unordered lists (<ul>). Ordered lists display items in a numbered sequence, while unordered lists use bullet points. List items (<li>) are used within these tags to define individual list elements. Here's an example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
To create hyperlinks in HTML, we use the <a> tag. The href attribute within this tag specifies the URL that the link points to. Here's an example:
<a href="https://www.example.com">Click here</a> to visit our website.
You can also embed images using the <img> tag. The src attribute within this tag specifies the source file (URL or file path) of the image. Here's an example:
<img src="image.jpg" alt="Description of the image" />
These are just a few examples of HTML tags that you can use to add content and structure to your web pages. By combining and nesting these tags, you can create complex layouts and interactive elements. In the next post, we will explore HTML forms and learn how to incorporate user input into our web pages.