Scribd
Upload
319 views

HTML Cheatsheet Skillcrush

This document provides an overview of basic HTML tags organized into structural elements, meta elements, content elements, inline elements, and table elements. It explains key attributes like href and src and distinguishes between block and inline elements. Required tags are denoted with "MUST HAVE". Descriptions are provided for common tags like <head>, <body>, <p>, <img>, <a>, <div>, <h1-6>, <ul>, <ol>, <li>, and table tags.

Uploaded by

Anonymous DrNLkX3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
319 views

HTML Cheatsheet Skillcrush

This document provides an overview of basic HTML tags organized into structural elements, meta elements, content elements, inline elements, and table elements. It explains key attributes like href and src and distinguishes between block and inline elements. Required tags are denoted with "MUST HAVE". Descriptions are provided for common tags like <head>, <body>, <p>, <img>, <a>, <div>, <h1-6>, <ul>, <ol>, <li>, and table tags.

Uploaded by

Anonymous DrNLkX3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

made with love by:

A COUPLE NOTES

STRUCTURAL

HEADLINES

Attributes
Some tags have attributes that you have to use. For
example, <a> tags need links in their href attribute.

<html></html> MUST HAVE


Denotes the HTML portion of the document.

<h1>...</h1>
Most important headline. Great for
logos, page titles, etc.

Block vs. Inline Elements


HTML tags fall into two categories: block or
inline. By default block elements fill the entire
width of the page. Inline elements, on the other
hand, only take a little bit of room and will sit next
to one another.
Inline elements should always go inside of block
elements. Block elements should not go inside of or
next to inline elements.
You can assume that every tag is a block element
unless it says otherwise.
Regular tags vs. self-closing
Most HTML tags have a beginning (<p>) and end
(</p>) tag. Some tags close themselves (<img />).

META
<!doctype html> MUST HAVE
Tells the computer that its looking at an HTML
page. Put this at the top of your HTML document.
<meta charset=utf-8> MUST HAVE
Tells the computer that you are using the UTF-8
character set (which is the character set for most
of the world wide web). Guards against your site
turning into gibberish.
<title>..</title> MUST HAVE
Gives your site a title in the top of the browser bar.
<script src=http://www.example.com/
scripts/myjavascript.js></script>
Links to external JavaScript files via the src
attribute.
<link rel=stylesheet href=http://www.
example.com/css/stye.css>
Links to external stylesheets via the href attribute.
Use the rel attribute to tell the computer that this
is a stylesheet.

<head></head> MUST HAVE


Denotes the head area of your site where the meta
tags go. None of this content is visible to the user.
<body></body> MUST HAVE
Denotes the body area of your document.
Everything inside these tags is visible to the user.

CONTENT
<div></div>
The workhorse of the HTML tags. Use divs for
your different site sections, sidebars, footers, etc.
<p>...</p>
Use for paragraphs!
<img src=http://www.example.com/image/
image.jpg alt=My Image /> SELF-CLOSING
Adds images to your site. Put the image link in the
src attribute and the name in the alt attribute.

<h2>...</h2>
Second most important headline.
Use for article headlines or headlines
for major sections of the page.
<h3>...</h3>
Third most important headline. Use for less
important articles or other secondary content.
<h4>...</h4>
Fourth most important headline.
Good for sidebars and footers.
<h5>...</h5>
Fifth most important headline.
<h6>...</h6>
Sixth most important headline.

TABLES

<ul>...</ul>
Unordered lists, perfect for bulleted lists and such.

<table></table>
Use this tag to add tables to your site.

<ol>...</ol>
Ordered lists, good for numbered or alphabetical lists.

<thead></thead>
Denotes the table head, where you put your
columns names.

<li>...</li>
Each list item goes inside of an li tag.
INLINE ELEMENTS
<a href=http://www.example.com>...</a>
Adds links to external sites via the href attribute.
<span>...</span>
Span tags allow you to group inline elements.
<strong>...</strong>
Use to make sections of your text bold.
<em>...</em>
Use these to make portions of your text italic.

<th></th>
Use these tags inside your table head to give each
column a name.
<tbody></tbody>
Denotes the table body, where all the tabular data
goes.
<tr></tr>
Use this tag to denote a table row.
<td>...</td>
Put each piece of data inside of a data cell, inside of
your table row, inside of your table body.

skillcrush.com

You might also like