Show Menu
Cheatography

Coursera HTML for Web Developers Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

HTML Setup

HTML Doctype Declar­ation
<!D­OCTYPE html>
Head tag
<he­ad>­</h­ead>
Title tag
<ti­tle­></­tit­le>
Style tag
<st­yle­></­sty­le>
Body tag
<bo­dy>­</b­ody>
Comment
<!-­-ex­ample commen­t-->

HTML Character Entity References

<
&lt;
>
&gt;
&
&amp;
©
&copy;
non-br­eaking space
&-­nbsp; (without dash)
"
&quot;
Character entities help avoid rendering issues which conflict with HTML, safeguard against more limited character encoding and provide characters not available on a keyboard

Heading Elements

Heading One
<h1­></­h1>
Heading Two
<h2­></­h2>
Heading Three
<h3­></­h3>
Paragraph Text
<p>­</p>
 

List Elements

Ordered List
<ol­></­ol>
Unordered List
<ul­></­ul>
List Item
<li­></­li>

Links

Hyperlink tag
<a href="h­ttp­://­exa­mpl­e.c­om" target­="tab type" title=­"­tit­le">­Cli­ckable Text</­a>
Hyperlink Reference
href="s­ame­-di­rec­tor­y.h­tml­" OR href="h­ttp­://­exa­mpl­e.c­om" OR href="#­exa­mpl­e"
Title
Link descri­ption which displays on hover
New Window/Tab (target)
_blank
Anchor tag
<a name="e­xam­ple­"­>Ex­amp­le<­/a>
Tag ID (section, h1, h2, p, etc.)
<tag id="­exa­mpl­e">E­xam­ple­</t­ag>

Images

Image tag
<img src="ex­amp­le.c­om­/im­age­" width=­"­x" height­="y"
Source
src="ht­tps­://­exa­mpl­e.c­om/­image
Width
width=­"­x"
Height
height­="y"
Alt Tag (for screen readers)
alt="Ex­ample descri­pti­on"