HTML Tutorial

Learn the basics of HTML and start building your own web pages.

Introduction

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures content using tags.

Basic Structure

Every HTML document starts with a <!DOCTYPE html> declaration and contains <html>, <head>, and <body> elements.





    Your Page Title


    


            

Headings

Use <h1> to <h6> for headings. They define the hierarchy of your content.


<h1>Main Heading</h1>
<h2>Subheading</h2>
            

Paragraphs

Use <p> to define paragraphs of text.


<p>This is a paragraph of text.</p>
            

Lists

Lists can be ordered (<ol>) or unordered (<ul>). Use <li> for list items.

Ordered List:


<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
            

Unordered List:


<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>
            

Images

Display images using the <img> tag. Provide the image source (src) and alternate text (alt).


<img src="image.jpg" alt="Description of the image">
            

Forms

Use the <form> tag to create input forms. Include various form controls like text inputs, checkboxes, and buttons.


<form action="submit-form.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Submit</button>
</form>
            

Tables

Use the <table> tag to create tables. Organize data using <tr> (table row), <th> (table header), and <td> (table data) elements.


<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
            

Semantic Elements

Use semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> to give meaning to the structure of your web page.


<header>
    <h1>Website Title</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<main>
    <section>
        <h2>Welcome to Our Website</h2>
        <p>Learn, explore, and enjoy!</p>
    </section>
    <article>
        <h3>Latest News</h3>
        <p>Read about exciting updates.</p>
    </article>
</main>

<footer>
    <p>Copyright © 2023. All rights reserved.</p>
</footer>
            

Audio and Video

Embed audio and video using the <audio> and <video> tags. Include source and control options.


<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>