HTML Elements

HTML elements are the fundamental components of web pages. They consist of a start tag, content, and an optional end tag. Elements define the structure and provide functionality, such as headings, paragraphs, links, images, forms, tables, and more.

<> start tag
</> end tag

Basic Structure of HTML Elements

HTML elements consist of a start tag, content, and an optional end tag.

Example
Try yourself 
        
            
<p>This is a paragraph.</p>

Commonly Used HTML Elements

HTML common elements: headings, paragraphs, links, images, lists. They structure and display content on web pages.

Examples
  • Headings
    Try yourself 
            
            
<h1>Heading 1</h1>
  • Paragraphs
    Try yourself 
            
            
<p>This is a paragraph.</p>
  • Links
    Try yourself 
            
            
<a href="https://www.lets-coding.com">Click here</a>
  • Images
    Try yourself 
            
            
<img src="/images/common/cutecat.png" alt="description of the image">
  • Lists
    Try yourself 
            
            
Unordered: <ul><li>Item 1</li></ul>
Ordered: <ol><li>Item 1</li></ol>

HTML Element Attributes

Attributes provide additional information to elements.

Examples
  • Image Source: src , alt
    Try yourself 
            
            
<img src="/images/common/cutecat.png" alt="description of the image">
  • Link Destination: href
    Try yourself 
            
            
<a href="https://www.lets-coding.com">Click here</a>
  • Input Type: type , name
    Try yourself 
            
            
<input type="text" name="username">

Structural Elements

Structural elements help organize and semantically structure web page content.

Examples
  • Header:
    Try yourself 
            
            
<header>
    <h1>Website Header</h1>
</header>
  • Navigation(navbar):
    Try yourself 
            
            
<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>
  • Main Content:
    Try yourself 
            
            
<main>
    <p>This is the main content of the page.</p>
</main>
  • Section:
    Try yourself 
            
            
<section>
    <h2>About Us</h2>
    <p>Welcome to our website!</p>
</section>
  • Footer:
    Try yourself 
            
            
<footer>
    <p>© 2023 Lets coding. All rights reserved.</p>
</footer>

Additional HTML Elements

HTML offers a wide range of elements for various purposes

  • Table:
    Try yourself 
            
            
<table><tr><td>Table cell</td></tr></table>
  • Audio:
    Try yourself 
            
            
<audio src="/media/audio/sample.mp3" controls></audio>
  • Video:
    Try yourself 
            
            
<video src="/media/video/sample_video_720x480_2mb.mp4" controls></video>

Semantic HTML Elements

Semantic elements are HTML tags that provide meaning and structure to content. They are important for accessibility and SEO purposes.