HTML References

HTML (HyperText Markup Language) is the standard markup language used to create web pages. Understanding HTML elements, attributes, and tags is essential for web development. This reference guide provides detailed information about HTML components, their usage, and best practices.

HTML Elements

HTML elements are the building blocks of web pages. They represent different types of content, such as headings, paragraphs, links, images, and more. Here are some common HTML elements:

Element Description Example
<h1> to <h6> Defines HTML headings. <h1> is the highest (most important) level, and <h6> is the lowest level.
Try yourself 
        
            <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p> Defines a paragraph.
Try yourself 
        
            <p>This is a paragraph.</p>
<a> Defines a hyperlink.
Try yourself 
        
            <a href="https://www.lets-coding.com">This is a link</a>
<img> Defines an image.
Try yourself 
        
            <img src="/images/common/background.jpeg" alt="Description of the image">
<ul><li> Defines an unordered list and list items.
Try yourself 
        
            <ul class="ps-3 mt-4">
    <li class="mb-2">Item 1</li>
    <li class="mb-2">Item 2</li>
    <li class="mb-2">Item 3</li>
</ul>
<table> Defines a table.
Try yourself 
        
            <table class="table table-bordered" border="1">
    <tr class="border-collapse border-amber-500">
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

HTML Attributes

HTML attributes provide additional information about elements. They are always included in the opening tag and usually come in name/value pairs like name="value". Here are some common HTML attributes:

Attribute Description Example
id Specifies a unique id for an HTML element.
Try yourself 
        
            <p id="uniqueID">This paragraph has a unique ID.</p>
class Specifies one or more class names for an HTML element (used for CSS and JavaScript).
Try yourself 
        
            <p class="myClass">This paragraph has a class attribute.</p>
src Specifies the source file for an image, script, or iframe.
Try yourself 
        
            <img src="/images/common/cutecat.png" alt="Image description">
href Specifies the URL for a link.
Try yourself 
        
            <a href="https://www.lets-coding.com">Visit Example</a>
alt Provides alternative text for an image.
Try yourself 
        
            <img src="/images/common/background.jpeg" alt="Description of the image">

HTML Tags

HTML tags are used to create HTML elements. Tags are enclosed in angle brackets like <tagname>. Most HTML tags come in pairs, with an opening tag and a closing tag. Here are some important HTML tags:

Tag Description Example
<div></div> Defines a division or a section in an HTML document.
Try yourself 
        
            <div>This is a div element</div>
<span></span> Defines a section in a document.
Try yourself 
        
            <span>This is a span element</span>
<header></header> Defines a header for a document or a section.
Try yourself 
        
            <header>This is a header element</header>
<footer></footer> Defines a footer for a document or a section.
Try yourself 
        
            <footer>This is a footer element</footer>
<main></main> Specifies the main content of a document.
Try yourself 
        
            <main>This is the main content of the document</main>