Attributes in HTML

Attributes in HTML provide additional information about HTML elements. They modify the behavior or appearance of elements and are always included in the opening tag of an element. Attributes are written as name-value pairs, with the name and value separated by an equals sign. The value is enclosed in quotes.

Explanation of Attributes

HTML attributes consist of a name and a value. For example, in the tag <a href="Google.com">, href is the attribute name and "https://Google.com" is the value. Attributes help define how an element should behave or be displayed.

Common Attributes

Here are some commonly used attributes in HTML:

  • href: Specifies the URL of a link. Used with the <a> tag. Example:
<a href="https://Google.com">Visit Google</a>
            

This will create a clickable link that directs users to https://Google.com.

  • src: Specifies the source URL of an image or script. Used with the <img> and <script> tags. Example:
<img src="image.jpg" alt="Description">
            

This displays an image with the source image.jpg and an alternative text description.

  • alt: Provides alternative text for an image if it cannot be displayed. Used with the <img> tag. Example:
<img src="logo.png" alt="Company Logo">
            

The alt attribute helps users understand the content of the image if it fails to load.

  • class: Assigns one or more class names to an element. Used for styling and scripting. Example:
<div class="container">Content</div>
            

Here, the class attribute can be used in CSS to style the div element.

  • id: Assigns a unique identifier to an element. Used for styling and scripting. Example:
<h1 id="main-title">Welcome</h1>
            

The id attribute helps to uniquely identify an element for CSS or JavaScript manipulation.

Attributes Example
Visit Google
Nft

Welcome

Comments in HTML

Comments in HTML are used to add notes or explanations within the code. They are not displayed on the web page but can be useful for developers to understand or document the code. Comments are added between <!-- and --> tags.

How to Write Comments

HTML comments are written like this:

<!-- This is a comment -->
            

Examples of Comments in Various Contexts

Comments can be used in various places within your HTML code:

<!-- This is the header section -->
<header>
    <h1>My Website</h1>
</header>

<!-- Navigation menu -->
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>
            
Comments Example - Chrome

My Website

Semantic HTML

Semantic HTML refers to the use of HTML elements that convey meaning about the structure and content of a webpage. Semantic elements help browsers and search engines understand the page better and improve accessibility.

Definition and Importance

Semantic HTML provides meaningful names for different parts of a webpage. Instead of using generic <div> tags for everything, semantic tags like <header>, <footer>, and <article> offer a clearer, more descriptive structure. This improves the readability of the code and helps with SEO and accessibility.

Key Semantic Elements

  • <header>: Represents introductory content or a set of navigational links. Example:
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>
            
  • <nav>: Defines a set of navigation links. Example:
<nav>
    <ul>
        <li><a href="#services">Services</a></li>
        <li><a href="#blog">Blog</a></li>
    </ul>
</nav>
            
  • <main>: Represents the main content of a document. Example:
<main>
    <article>
        <h2>Blog Post Title</h2>
        <p>This is the content of the blog post.</p>
    </article>
</main>
            
  • <article>: Represents a self-contained piece of content. Example:
<article>
    <h2>Article Title</h2>
    <p>This is the article content.</p>
</article>
            
  • <section>: Defines a thematic grouping of content. Example:
<section>
    <h2>Section Title</h2>
    <p>Content related to the section.</p>
</section>
            
  • <footer>: Contains footer content. Example:
<footer>
    <p>© 2024 My Website</p>
</footer>
            
Semantic HTML Example - Chrome

Website Title

Blog Post Title

This is the content of the blog post.

© 2024 My Website

The Body Element

The <body> element is the main container for the content of an HTML document. It contains all the visible elements, such as headings, paragraphs, links, images, and more.

Role of <body>

The <body> tag defines the document's body and contains all the content that is rendered on the page. It's a crucial part of the HTML structure, as everything visible to the user is placed inside this tag.

Common Elements within <body>

  • Headings: Defined using <h1> to <h6> tags. Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
            
  • Paragraphs: Defined using the <p> tag. Example:
<p>This is a paragraph of text.</p>
            
  • Links: Created with the <a> tag. Example:
<a href="https://example.com">Click here</a>
            
  • Images: Displayed using the <img> tag. Example:
<img src="image.jpg" alt="Description">
            
Body Element Example

Main Heading

Subheading

This is a paragraph of text.

Click here