DEV Community

Cover image for 📘 Complete HTML: From Basics to Advance
Swapnil Meshram
Swapnil Meshram

Posted on • Edited on

📘 Complete HTML: From Basics to Advance

#webdev #html #devsync

Presented by Swapnil Meshram within mentorship @devsyncin

Started learning and understanding HTML tags with hands-on practice and gaining a deeper understanding of structuring and formatting web content.

Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the markup language used to build web pages. It defines the structure and content of a webpage.

Basic HTML Structure

An HTML document consists of:

 <!DOCTYPE html> <!-- Declares HTML5 document type --> <html> <!-- Root element --> <head> <!-- Metadata (title, linked CSS/js) --> <title>My First Page</title> </head> <body> <!-- Content visible to users --> <h1>Hello, World!</h1> </body> </html>
Enter fullscreen mode Exit fullscreen mode

HTML Elements/Tags:

🏷️ Headings

 <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <h3>This is a Heading 3</h3> <h4>This is a Heading 1</h4> <h5>This is a Heading 2</h5> <h6>This is a Heading 3</h6>
Enter fullscreen mode Exit fullscreen mode

📝 Paragraph

 <p>This is a paragraph of text.</p>
Enter fullscreen mode Exit fullscreen mode

🔤 Text Formatting Tags:

 <b>Bold Text</b> <i>Italic Text</i> <u>Underlined Text</u>
Enter fullscreen mode Exit fullscreen mode

🧮 Lists:

Types of Lists:

Unordered:

 <ul> <li>Bullet item</li> </ul>
Enter fullscreen mode Exit fullscreen mode

Ordered:

 <ol> <li>Numbered item</li> </ol>
Enter fullscreen mode Exit fullscreen mode

📸 Images

 <img src="image.jpg" alt="Description" width="200">
Enter fullscreen mode Exit fullscreen mode

🔗 Links

 <a href="https://example.com">Visit Example/a>
Enter fullscreen mode Exit fullscreen mode

▶️ Video Embeds

 <video controls width="300"> <source src="video.mp4" type="video/mp4"> </video>
Enter fullscreen mode Exit fullscreen mode

▶️ Audio Embeds

 <audio controls> <source src="audio.mp3" type="audio/mp3"> </audio>
Enter fullscreen mode Exit fullscreen mode

🧠 Iframes

 <iframe src="https://example.com" width="300" height="200"></iframe>
Enter fullscreen mode Exit fullscreen mode

🧩 Tables

 <table border="1"> <tr> <th>Name</th><th>Age</th> </tr> <tr> <td>Alice</td><td>25</td> </tr> </table>
Enter fullscreen mode Exit fullscreen mode

🧮 Forms and Input

 html Copy Edit <form> <label>Email:</label> <input type="email" required><br> <label>Password:</label> <input type="password" required><br> <input type="submit" value="Submit"> </form>
Enter fullscreen mode Exit fullscreen mode

🧱 Semantic Tags

 <header>Site Header</header> <nav>Navigation Menu</nav> <main>Main Content Area</main> <article>Blog Article</article> <footer>Footer Info</footer>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.