learn2kode.in

Menu

HTML Tutorial

Menu

HTML Cheat Sheet for Beginners

HTML (HyperText Markup Language) is the foundation of every website. It is used to structure content like text, images, links, and forms.

Basic HTML Structure

Copy Text 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Output

My Website

Hello World

Common HTML Tags

Copy Text 
<h1>Heading 1</h1>
<h6>Heading 6</h6>

<p>This is a paragraph</p>

<br>   <!-- Line break -->
<hr>   <!-- Horizontal line -->

Links & Images

Anchor (Link)
Copy Text 
<a href="https://learn2kode.in">Visit Site</a>
Output
Visit Site
Image
Copy Text 
<img src="image.jpg" alt="Image description">

Lists

Unordered List
Copy Text 
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
Ordered List
Copy Text 
<ol>
  <li>Step One</li>
  <li>Step Two</li>
</ol>

Div & Span

Copy Text 
<div>This is a block element</div>
<span>This is an inline element</span>

Forms & Inputs

Copy Text 
<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <input type="password">
  <input type="submit" value="Submit">
</form>

Common Input Types

Copy Text 
text | email | password | number | date | checkbox | radio | file

Buttons

Copy Text 
<button>Click Me</button>

Tables

Copy Text 
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Attributes

Copy Text 
class="box"
id="main"
style="color:red;"
title="Tooltip text"

Semantic HTML (Very Important)

Copy Text 
<header>Header</header>
<nav>Navigation</nav>
<main>Main content</main>
<section>Section</section>
<article>Article</article>
<aside>Sidebar</aside>
<footer>Footer</footer>

Media Tags

Copy Text 
<video controls>
  <source src="video.mp4">
</video>

<audio controls>
  <source src="audio.mp3">
</audio>

Meta Tags (SEO Basics)

Copy Text 
<meta name="description" content="Website description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Comments

Copy Text 
<!-- This is a comment -->

HTML Best Practices

  • Use semantic tags
  • Always add alt for images
  • Keep code clean and readable
  • Use lowercase tags
  • Validate HTML

Next Steps

After HTML, learn:
Learn HTML