HTML Cheat Sheet: A Complete Guide for Beginners

Introduction

HTML (HyperText Markup Language) is the foundation of web development. Whether you're a beginner or an experienced developer, having a quick reference guide can save time and improve efficiency. In this HTML cheat sheet, we cover essential elements, tags, and attributes to help you build well-structured web pages.

Basic HTML Structure

Every HTML document starts with a basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Essential HTML Tags

Here are some fundamental HTML tags and their functions:

Document Structure

<html>: Root element of an HTML page.
<head>: Contains metadata and links to styles/scripts.
<body>: Contains all visible content on the page.

Headings & Text

<h1> to <h6>: Headings, <h1> being the largest.
<p>: Defines a paragraph.
<br>: Line break.
<hr>: Horizontal line.
<strong>: Bold text.
<em>: Italicized text.
<mark>: Highlights text.

Links & Media

<a href="URL">: Creates a hyperlink.
<img src="image.jpg" alt="Description">: Displays an image.
<video>: Embeds a video.
<audio>: Embeds an audio file.

Lists

<ul>: Unordered list (bullets).
<ol>: Ordered list (numbers).
<li>: List item.

Forms & Input Fields

<form>: Creates an input form.
<input type="text">: Text input.
<textarea>: Multiline text input.
<button>: Clickable button.
<select>: Dropdown menu.
<option>: Defines dropdown options.

Tables

<table>: Creates a table.
<tr>: Table row.
<td>: Table cell.
<th>: Table header.

Semantic HTML Tags

<header>: Defines page header.
<nav>: Navigation links.
<main>: Main content.
<section>: Defines a section.
<article>: Independent content block.
<footer>: Footer section.

HTML Attributes

Attributes provide additional information about elements. Some commonly used attributes include:

href="URL": Specifies a hyperlink destination.
src="image.jpg": Specifies an image source.
alt="Description": Alternative text for images.
id="uniqueID": Unique identifier for an element.
class="className": Assigns a class for styling.
style="color: red;": Inline CSS styling.

Conclusion

This HTML cheat sheet provides a handy reference for both beginners and advanced developers. Mastering these elements will help you create structured and efficient web pages. Save this guide for quick reference and enhance your HTML skills!

HTML Cheat Sheet

HTML Cheat Sheet: A Complete Guide for Beginners

Introduction

Basic HTML Structure