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

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.