« Previous Next »

What is an HTML Element?

An HTML element is a fundamental building block of a webpage. It consists of a start tag, content, and an end tag. The start tag defines the element and its attributes, while the end tag marks the end of the element.

HTML Element Structure

HTML elements are typically written as:

Basic Code Examples

      
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            HTML Elements Example
          </head>
          <body>
            <tagname>Content goes here</tagname>
          </body>
        </html>


Output

                 
        Content goes here

Basic HTML Element Example:

Basic Code Examples

      
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Welcome To My Elements Page</title>
          </head>
          <body>
                <p>This is a paragraph</p>
          </body>
        </html>


Output

                 
        
This is a paragraph

The above example defines a <p> (paragraph) element containing the text "This is a paragraph".

Common HTML Elements

1. <a> Element (Anchor Tag)

The anchor element is used to create hyperlinks:

Basic Code Examples

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Elements Page</title>
        </head>
        <body>
          <a href="http://aitaurangabad.com/">Visit AitAurangabad</a>
        </body>
      </html>


Output

                 
        Visit AitAurangabad

This creates a clickable link that navigates to the specified URL.

2. <img> Element (Image)

The image element is used to display images:

Basic Code Examples

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Elements Page</title>
        </head>
        <body>
          <img src="Birds.jpg" alt="Description">
        </body>
      </html>


Output

                      
       Description

This example displays an image from the specified source with an alternative description.

3. <ul> and <li> Elements (Unordered List)

Unordered lists consist of list items:

Basic Code Examples

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Elements Page</title>
        </head>
        <body>
          <ul>
            <li>Mango 1</li>
            <li>Grapes 2</li>
            <li>Apple 3</li>
          </ul>
        </body>
      </html>


Output

                      
      
    
        
  • Mango 1
    • 
        
  • Grapes 2
    • 
        
  • Apple 3
    •

This creates an unordered list with three items.

4. <form> Element (Form)

The <form> element is used to collect user input:

Basic Code Examples

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Elements Page</title>
        </head>
        <body>
          <form action="/submit">
            <label for="name">Name:</label>
              <input type="text" id="name">
              <input type="submit" value="Submit">
          </form>  
        </body>
      </html>


Output

This creates a form where the user can input their name and submit it.

5. <div> Element (Division)

The <div> element is a container used for grouping content:

Basic Code Examples

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Elements Page</title>
        </head>
        <body>
          <div>
            <h1>Header</h1>
            <p>This is a paragraph inside a div.</p>
          </div> 
        </body>
        </html>


Output

                      
        

          
Header

          
This is a paragraph inside a div.

This example uses the <div> element to group a header and a paragraph.

Conclusion

HTML elements are the building blocks of web pages, and they define the structure and content of a webpage. Understanding these elements will help you create more organized and functional HTML documents.

« Previous Next »