HTML Tags and Attributes

HTML tags and attributes are the building blocks of any web page. They are used to mark up the content of the page and provide additional information about the elements. In this article, we’ll take a closer look at HTML tags and attributes, including the different types of tags and the syntax for using them.

Basic HTML Tags

HTML tags are used to mark up the content of a web page. They are written in pairs, with an opening tag and a closing tag, and the content of the tag goes in between. For example, the <h1> tag is used to create a heading, and it’s written like this:

<h1>My Heading</h1>

Here are some basic HTML tags that you’ll use frequently:

• <h1> – <h6>: These tags are used to create headings, with <h1> being the largest and <h6> being the smallest.
• <p>: This tag is used to create a paragraph.
• <br>: This tag is used to create a line break.
• <img>: This tag is used to add an image to a web page.
• <a>: This tag is used to create a link.
• <ul>: This tag is used to create an unordered list (a list with bullet points).
• <ol>: This tag is used to create an ordered list (a numbered list).
• <li>: This tag is used to create a list item.

Here’s an example of a basic HTML document using these tags:

<h1>My Website</h1>
<p>Welcome to my website. This is where I share my thoughts and ideas.</p>
<p>Here are some things you can do on my website:</p>
<ul>
  <li>Read my blog posts</li>
  <li>Browse my photos</li>
  <li>Contact me</li>
</ul>

In this example, we have a heading, two paragraphs, and an unordered list. The <h1> tag is used to create the heading, the <p> tags are used to create the paragraphs, and the <ul> and <li> tags are used to create the list.

HTML Attributes

HTML attributes are used to provide additional information about the elements. They are written inside the opening tag, and they consist of a name and a value. For example, the src attribute is used to specify the source of an image, and it’s written like this:

<img src="image.jpg" alt="My Image">

In this example, the src attribute has a value of “image.jpg”, and the alt attribute has a value of “My Image”. The alt attribute is used to provide a text description of the image, which is important for accessibility and search engine optimization.

Here are some common HTML attributes that you’ll use:

• id: This attribute is used to uniquely identify an element. It can be used to apply styles to a specific element or to create links to specific parts of a web page.
• class: This attribute is used to apply a class name to an element, which can be used to apply styles to a group of elements.
• href: This attribute is used to specify the destination of a link. It can be used with the <a> tag to create a link to another web page or to a specific part of the same page.
• src: This attribute is used to specify the source of an image. It can be used with the <img> tag to add an image to a web page.
• alt: This attribute is used to provide a text description of an image. It’s important for accessibility and search engine optimization, and it’s used with the <img> tag.

Here’s an example of an HTML document using these attributes:

<h1 id="title">My Website</h1>
<p class="intro">Welcome to my website. This is where I share my thoughts and ideas.</p>
<p>Here are some things you can do on my website:</p>
<ul>
  <li><a href="/blog">Read my blog posts</a></li>
  <li><a href="/photos">Browse my photos</a></li>
  <li><a href="/contact">Contact me</a></li>
</ul>
<img src="profile.jpg" alt="My profile picture">

In this example, we have an id attribute on the <h1> element, a class attribute on the <p> element, and href attributes on the <a> elements. We also have a src attribute on the <img> element and an alt attribute to provide a text description of the image.

HTML5 Semantic Elements

HTML5 introduced a new set of semantic elements that provide additional meaning to the content of a web page. These elements make it easier for search engines and screen readers to understand the structure and content of a web page, and they can also make it easier for developers to style and organize the content.

Here are some common HTML5 semantic elements:

• <header>: This element is used to contain the header of a web page or section. It can include a logo, a navigation menu, and other elements.
• <nav>: This element is used to contain the navigation links for a web page or section.
• <main>: This element is used to contain the main content of a web page. It should only be used once per page.
• <article>: This element is used to contain a standalone piece of content, such as a blog post or a news article.
• <section>: This element is used to contain a group of related content, such as a chapter or a section of a document.
• <aside>: This element is used to contain content that is related to the main content, but not essential to the understanding of it. It could be a sidebar, a related links section, or other elements.
• <footer>: This element is used to contain the footer of a web page or section. It can include a copyright notice, a list of links, and other elements.

Here’s an example of an HTML document using these elements:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>My Latest Blog Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id ornare leo. Ut tincidunt lacus sed justo placerat, sed aliquam libero dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor mollis, suscipit lacus in, pharetis lacus. Proin fermentum leo id sem efficitur, quis dictum nibh efficitur. Aliquam consectetur pretium est, a convallis erat cursus vel. Morbi vel bibendum velit. Suspendisse placerat turpis in diam porttitor pretium. Maecenas id turpis eu nisi efficitur pharetra in at diam.</p>

  </article>
  <section>
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id ornare leo. Ut tincidunt lacus sed justo placerat, sed aliquam libero dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor mollis, suscipit lacus in, pharetra lacus. Proin fermentum leo id sem efficitur, quis dictum nibh efficitur. Aliquam consectetur pretium est, a convallis erat cursus vel. Morbi vel bibendum velit. Suspendisse placerat turpis in diam porttitor pretium. Maecenas id turpis eu nisi efficitur pharetra in at diam.</p>
  </section>
</main>
<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</aside>
<footer>
  <p>Copyright 2022 My Website</p>
</footer>

In this example, we have a header with a logo and a navigation menu, a main section with an article and a section, an aside with related links, and a footer with a copyright notice. The semantic elements make it easier to understand the structure and content of the web page, and they can also make it easier to style and organize the content.

Conclusion

HTML tags and attributes are the building blocks of any web page. They are used to mark up the content of the page and provide additional information about the elements. Understanding how to use tags and attributes is essential for creating well-organized, professional-quality web pages. With the skills and knowledge you gain in this course, you’ll be well on your way to creating your own stunning websites.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.