Resources‎ > ‎

HTML5 Cheat Sheet

HTML 5 Tags


 Name: First Tag: Second Tag: Description: Attributes:
 Anchor<a> </a> Links are created with an anchor element. 
  • href="where the link should go" - The name of the point marker MUST be preceded by the # sign in the link.
  • "name=named anchor in document"
  • "mailto: contact@ieclass.com"
 Article<article> </article> Defines the primary content on the page.  
 Aside<aside> </aside> Defines secondary content, or content that does not directly relate to the topic of the page - such as advertisements or illustrations.  
 Body<body> </body> Body - Anything you see in your browser window will go in the body element. 
 Bold<strong> </strong> Bolds the text it encloses.  
 Break - Line<br />  Forces a ilne break  
 Break - Word<wbr />  Tells the browser that if a line break is needed, it should be here, otherwise the break is ignored.  
 Character Coding<meta charset="utf-8">  This defines what character coding is used in the page.  UTF-8 is a variable width Unicode format that is compatible with ASCII or plain text for the basic alphanumeric characters. 
 Comment
 <!-- //-->Tag is used to insert comments in the source code.  The two forward slashes (//) are a JavaScript symbol.  
 Div<div> </div> A generic container element where content is placed that would not fit in any of the other named containers. 
 Figure<figure> </figure> Figure group used to contain the image and caption tags.  
 Fig Caption<figcaption> </figcaption> A caption is a small amount of text that describes the image. 
  • Captions will need to be grouped with the image using the <figure> tags.
 Footer<footer></footer> Defines footer information such as copyrights, or anything that should appear at the bottom of the page or element. 
 Head<head> </head> Head section -  Generally anything that works behind the scenes go in the head element. 
 Header<header> </header> Defines the subject of information being presented.  Generally placed at the top of the page, but can also be used to define the top of other elements on the page.  
 Heading<h1> </h1> Formats text a top, or first, level heading.  
 Highlight<mark> </mark> Highlights enclosed text.  
 Horizontal Rule<hr />  Draws a horizontal line.  
 HTML<html> </html> Hyper Text Markup Language - The Root Element 
 Image<img />   Image Tag
  • src="pic.gif" 
 Italics<em></em> Italicizes the test it encloses.  
 Link<link>  Link used to attach external style sheet 
  • rel="stylesheet"
  • href="style.css" 
 List - Definition<dl></dl> List which are primarily used to set off and define terms.
  • <dt> - definition term
  • <dd> - definition detail item
 List - Ordered<ol> </ol> List which creates a list with numbers. 
  • <li> - List item
  • start="#"
  • style=
    • list-style-image:  upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek, upper-latin, lower-latin, decimal, decimal-leading-zero, none
 List - Unordered<ul> </ul> List which creates a list with bullets. 
  • <li> - List item
  • list-style-image:  circle, disc or square
 Navigation<nav> </nav> Defines content as the pages navigation.  
 Paragraph<p> </p> Formats text as a paragraph.  
 Section<section> </section> Used to group content together.  
 Style
<style> </style>  Allows you to define a style for an element one time and apply to every instance of that element on the page.  Defined within the head region of the document.element {
    property: value;
    property: value;
}
 Table<table> </table> Defines the starting and ending point of the table 
  •  <tr> Table Row
  • <td> Table Data
 Table Row<tr> </tr> Defines the rows of the table  
Table Data <td> </td> Defines the individual cells of the table  
 Table Heading<th> </th>The table heading tag can replace the table data tag.  Creates a table cell, but centers tand bolds the content within the cell.  
 Title<title> </title> Used to display a title in the tab or title bar of the browser. 

Style Sheets:

  • Embedded:  Defined within the head region of the document
<style>
element {
property:  value;
property:  value;
}
</style>

  • External:  Defined in an external document "file_name.css" and referred to via link
element {
property:  value;
property:  value;
}
  • In-Line:
<tag style="property: value; property: value;">

Style Properties:

  • a:  defines the default style of the link.
  • a:visited:  Defines the style of the visited link.
  • a:hover:  Defines the style of the link while the mouse is positioned over it.
  • background-color:  "rrggbb"
  • background-image:  Imports an image as the background to an object.
  • background-repeat:  Will repeat the background along a row or column.  Accepted values:  repeat-x (row), repeat-y (column), no-repeat, repeat (default)
  • background-attachment:  Specifies whether a background image scrolls or is fixed.  Accepted values:  scroll (default), fixed
  • background-position:  Specifies where the background image is placed on the screen.  Accepted values:  repeat-x or repeat-y (only one value) & no-repeat (two values)
  • background-size:  Defines the size of the background image.  Accepted values:  auto, contain, cover, width height -or- #px #px
  • border:  "CSS Units of Measure" - Can be written in shortcut notation:  "border:  style color width"
  • border-style:  Accepted values:  ridge, dashed, double, inset, dotted, solid, groove, outset
  • border-color:  "#rrggbb"
  • border-size:
  • border-radius:  Defines the radius of the arch on the corners of an element
    • border-top-left-radius:  
    • border-top-right-radius:
    • border-bottom-left-radius:
    • border-bottom-right-radius:
  • border-width:  Accepted values:  thin, medium, thick or "CSS Units of Measure"
  • clear:  "left, right or both"     
  • color:  "Text Color"
  • float: "left or right"
  • font-family:  "Arial, helvetica, veranda, sans-serif, Script, etc."
  • font-variant:  "small-caps or normal"
  • font-weight:  "lighter, normal, bold, bolder, 100-900"
  • font-size:  "8 - infinite", any CSS Units of Measure
  • height:  When height is added to the header, the text remains at the top of the element.
  • line-height:  Defines the height of the line that the text occupies.  Text occupies evenly above and below the text.
  • list-style-image:  "upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek, upper-latin, lower-latin, decimal, decimal-leading-zero, none, or url(image.gif)"
  • margin:  Specifies a margin to be applied to all four sides of an element - "CSS Units of Measure" or "auto"
  • margin-left:  Specifies a margin to be applied only to the left side of an element - "CSS Units of Measure"
  • margin-right:  Specifies a margin to be applied only to the right side of an element - "CSS Units of Measure"  
  • margin-top:  Specifies a margin to be applied only to the top of an element - "CSS Units of Measure"  
  • margin-bottom:  Specifies a margin to be applied only to the bottom of an element - "CSS Units of Measure"  
  • overflow:  "hidden, scroll, auto or visible"
  • padding:  "px"
  • start:  "Applied to the <ol> tag to specify a specific starting position"
  • text-align:  "center, left, right or justify" 
  • text-decoration:  Defines whether text should or should not be underlined
  • text-indent:  ##px;
  • text-shadow:  "#px #px #px #rrggbb"  Position 1 - how far down from the text the shadow should extend., Position 2 - how far the the right the shadow should extend, Position 3 - The size of the shadow, Position 4 - the color of the shadow.
  • url (fileName):  Images applied through style sheets should be referenced in the property's value.
  • width:  "CSS Units of Measure"

CSS Units of Measure:

  • Percent:  50% - relative size of its parent
  • Pixels:  10px - smallest unit of measure
  • Inches:  2in, 2.5in
  • Centimeters:  1cm, 1.5cm
  • Point:  12pt - Used by word processors - 72 pts per inch
  • Millimeters:  5mm
  • Picas:  1pc - 1 pica is equivalent to 12pt.

Special Characters:

    &nbsp;       Space
    &lt;             <
    &gt;            >
    &copy;        ©
    &amp;        &
    &quot;        "

Basics:

  • Tags indicated in BLUE should be included on ALL web documents.  They are the basic HTML tags.
  • Tags indicated in GREEN are optional container elements
    <!DOCTYPE html>
    <html>
        <head>
            <title> Your Name Here </title>
            <meta charset="utf-8">
        </head>
        <body>
            <header> </header>
            <nav> </nav>
            <section>
                <article>
                </article>
            </section>
            <aside> </aside>
            <footer> </footer>
        </body>
    </html>

Vector:  Mathematically Defined Points