Here’s a beginner’s HTML cheat sheet to get you started with the basic structure and common elements:
HTML Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>Essential HTML Tags
1. Basic Text Tags
- Heading Tags
<h1>to<h6>(h1 is the largest, h6 is the smallest)
<h1>Heading 1</h1>
<h2>Heading 2</h2>- Paragraph
<p>for text paragraphs
<p>This is a paragraph.</p>- Bold Text
<b>or<strong>(strong adds importance semantically)
<b>Bold text</b>
<strong>Bold and emphasized text</strong>- Italic Text
<i>or<em>(emphasis adds importance semantically)
<i>Italic text</i>
<em>Emphasized italic text</em>- Line Break
<br />
First line<br />Second line2. Links & Anchors
- Hyperlink
<a href="URL">Link Text</a>
<a href="https://www.example.com">Click here</a>3. Lists
- Unordered List (bullets)
<ul>for the list,<li>for each item
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>- Ordered List (numbers)
<ol>for the numbered list,<li>for each item
<ol>
<li>First item</li>
<li>Second item</li>
</ol>4. Images
- Image Tag
<img src="image.jpg" alt="description" />
<img src="image.jpg" alt="A description of the image" />5. Tables
- Table Structure
<table>,<tr>for rows,<td>for data cells,<th>for header cells
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Forms
1. Form Elements
- Form Tag
<form action="submit_url" method="POST">
<form action="/submit" method="POST">
<!-- Form elements go here -->
</form>- Text Input
<input type="text" name="username" />
<input type="text" name="username" placeholder="Enter your name" />- Password Input
<input type="password" name="password" />
<input type="password" name="password" placeholder="Enter your password" />- Submit Button
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />- Textarea (multi-line text)
<textarea name="message"></textarea>
<textarea name="message" rows="4" cols="50"></textarea>Attributes
- Class Attribute
Used to apply CSS styles to elements.
<div class="container">Content here</div>- ID Attribute
Used to uniquely identify an element.
<div id="uniqueElement">This is unique</div>- Style Attribute
Adds inline CSS styles to an element.
<p style="color:red;">This text is red.</p>- Alt Attribute
Used for images to describe the content for accessibility.
<img src="logo.png" alt="Company logo">Comments
- HTML comments are wrapped inside
<!-- -->
<!-- This is a comment -->HTML Entities
- Special Characters
Use HTML entities for special characters like&,<,>, etc. &for&<for<>for>"for"©for the copyright symbol (©)
& < > " ©Meta Tags (Inside <head>)
- Character Set
<meta charset="UTF-8" />- Viewport for Mobile Responsiveness
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- Description for SEO
<meta name="description" content="This is a sample webpage description." />Useful Tips
- Whitespace and indentation: Indent nested elements to keep your code clean and readable.
- Self-closing tags: Some tags like
<img>,<br>,<input>, and<hr>do not need closing tags. - Case sensitivity: HTML is not case-sensitive for element names, but it is recommended to use lowercase for consistency.
This should give you a solid foundation as you begin working with HTML. As you advance, you’ll encounter more complex elements and concepts, but these basics will always be essential.
Try these yourself and explore each element’s working.
Leave a Reply