HTML Cheat Sheet

Welcome, aspiring web developers! Today, we're diving into the world of HTML, the backbone of every website you've ever visited. As someone who's been teaching HTML for over a decade, I can tell you that it's not as intimidating as it might seem at first glance. In fact, I like to think of HTML as the Lego blocks of the internet - simple pieces that, when put together, can create something amazing!

HTML - Cheat Sheet

Table of Content

Before we start our journey, let's take a quick look at what we'll be covering:

Basic Tags
Body Attributes
Text Tags
Links
Formatting
Lists
Graphical Elements
Forms
Tables
Table Attributes
HTML5 input tag Attributes
HTML Editor and Formatter

Now, let's roll up our sleeves and start building!

Basic Tags

Every HTML document starts with a few essential tags. Think of these as the foundation of your web page:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    Hello, World!
</body>
</html>

Let's break this down:

<!DOCTYPE html> tells the browser this is an HTML5 document.
<html> is the root element of the page.
<head> contains meta information about the document.
<title> specifies a title for the document.
<body> defines the document's body, where all the visible content goes.

Body Attributes

The <body> tag can have various attributes to control how the content is displayed. Here are some common ones:

Attribute	Description
bgcolor	Sets the background color
background	Sets a background image
text	Sets the text color

Example:

<body bgcolor="lightblue" text="navy">
    Welcome to my blue world!
</body>

This will create a page with a light blue background and navy text. It's like painting your room, but for websites!

Text Tags

HTML provides several tags for formatting text. Here are some of the most common:

Tag	Description
`<h1>` to `<h6>`	Headings (h1 is the largest, h6 the smallest)
`<p>`	Paragraph
`<br>`	Line break
`<strong>`	Bold text
`<em>`	Italicized text

Example:

<h1>Welcome to My Website</h1>
<p>This is a <strong>bold</strong> statement.</p>
<p>This is an <em>emphasized</em> point.</p>

Links

Links are what make the web, well, a web! Here's how to create them:

<a href="https://www.example.com">Click me!</a>

The href attribute specifies the URL of the page the link goes to. You can also link to specific parts of a page using IDs:

<h2 id="section2">Section 2</h2>
<a href="#section2">Go to Section 2</a>

Formatting

HTML offers various ways to format your text beyond just bold and italic. Here are some more:

Tag	Description
`<sup>`	Superscript text
`<sub>`	Subscript text
`<pre>`	Preformatted text
`<code>`	Code snippet

Example:

<p>H<sub>2</sub>O is water.</p>
<p>2<sup>3</sup> equals 8.</p>
<pre>
  This text
    is preformatted.
</pre>
<p>Here's some <code>inline code</code>.</p>

Lists

Lists help organize information. There are three types in HTML:

Unordered lists (<ul>)
Ordered lists (<ol>)
Definition lists (<dl>)

Example:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Graphical Elements

Images can make your website come alive. Here's how to add them:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

The src attribute specifies the image file, alt provides alternative text for screen readers or if the image fails to load, and width and height set the dimensions.

Forms

Forms allow users to input data. Here's a simple form:

<form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <input type="submit" value="Submit">
</form>

This creates a form with name and email fields, and a submit button.

Tables

Tables are used to display data in rows and columns:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Table Attributes

Tables can be customized with various attributes:

Attribute	Description
border	Sets the width of the border
cellpadding	Sets the space between cell content and borders
cellspacing	Sets the space between cells
width	Sets the width of the table

HTML5 input tag Attributes

HTML5 introduced new input types and attributes:

Type/Attribute	Description
type="email"	For email addresses
type="date"	For date pickers
type="number"	For numerical input
placeholder	Hint text in the input field
required	Makes the field required

Example:

<input type="email" placeholder="Enter your email" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">

HTML Editor and Formatter

While you can write HTML in any text editor, using a dedicated HTML editor can make your life easier. Some popular options include:

Visual Studio Code
Sublime Text
Atom

These editors offer features like syntax highlighting and auto-completion, which can save you a lot of time and headaches!

Conclusion

And there you have it, folks! This HTML cheat sheet covers the basics you need to start creating your own web pages. Remember, HTML is just the beginning. As you progress, you'll want to learn CSS for styling and JavaScript for interactivity.

Learning HTML is like learning a new language - it takes practice. Don't be afraid to experiment and make mistakes. That's how we all learn! And who knows? Maybe the next big website will be built by you!

Happy coding, and may your tags always be properly closed!

Credits: Image by storyset

Previous Tutorial:

HTML - Color Picker

Next Tutorial:

HTML - Tags Reference