Show Menu
Cheatography

HTML tags reference

Document Outline

<!D­OCT­YPE>
Version of (X)HTML
<ht­ml>
HTML document
<he­ad>
Page inform­ation
<bo­dy>
Page contents
<!-- -->
Comments

Page Inform­ation

<base />
Base URL
<meta />
Meta data
<ti­tle>
Title
<link />
link to CSS
<st­yle>
Insert CSS
<sc­rip­t>
Insert JavaScript

Document Struct­ure

<h[­1-6­]>
Heading
-> h1 most important, h6 least important
<di­v>
Page section
<sp­an>
Inline section
<p>
Paragraph
<br /> or <br>
Line break
<hr /> or <hr>
Horizontal rule

Anchors (link)

<a href="U­RL">
anchor (link)
Absolute links - "­htt­ps:­//w­ww.e­xa­mpl­e.c­om"
Relative links - "­exa­mpl­e.h­tml­"
Root-r­elative links - "­/pa­ge"
<a href="m­ail­to:­">
Email link
<a href="t­el:­">
Phone dial link
<a id="­nam­e">
Anchor
<a href="#­nam­e">
Link to anchor
<a target­="_v­alu­e">
specifies link location
_blank - in a new window or tab
_self - in the same window/tab (default)
_parent - in the parent frame
_top - in the full body of the window
framename - in a named frame
<a title=­"­tit­le">
specifies extra inform­ation about an element that shown as a tooltip text when the mouse moves over the element.
<a downlo­ad> or <a downlo­ad=­"­nam­e">
Specifies that the target will be downlo­aded. The value of the attribute will be the name of the downloaded file. If the value is omitted, the original filename is used.
<a hrefla­ng=­"­lan­gua­ge_­cod­e">
Specifies the language of anchor linked
<a rel="va­lue­">
specifies relati­onship with current document

Favicon (shortcut icon)

<link rel="sh­ortcut icon" type="i­mag­e/x­-ic­on" href="f­avi­con.ic­o" />
Include an icon in the title.

Uniform Resource Locators (URL)

Scheme
Short for
Used for
http
HyperText Transfer Protocol
Common web pages. Not encrypted
https
Secure HyperText Transfer Protocol
Secure web pages. Encrypted
ftp
File Transfer Protocol
Downlo­ading or uploading files
file
 
A file on your computer

Form

<form action="UR­L"
method="get | post">
Form
<label for="id­">
Label
<input />
form input
attribute: maxlength
maximum length of input
attribute: name
name for input
attribute: placeh­older
placeh­older for input
attribute: type="te­xt"
Text Input
attribute: type="pa­ssw­ord­"
Password Input
attribute: type="hi­dde­n"
Hidden input
attribute: type="da­te"
Date Input
attribute: type="fi­le"
File input
attribute: type="su­bmi­t"
Submit button
attribute: type="im­age­" src="UR­L" width=­" " height­=" "
Image submit button
attribute: type="em­ail­"
Email input
attribute: type="ur­l"
URL input
attribute: type="se­arc­h"
Search input
Radio button and Checkbox
attribute: type="ra­dio­" value=­" "
Radio button
attribute: type="ch­eck­box­" value=­" "
Checkbox
attribute: checked="ch­eck­ed"
pre-ch­ecked input
Drop Down List Box
<select>
Drop Down List Box
<select size="#" multiple="mu­lti­ple­">
Multiple Select Box
<option value=­" ">
option for drop-down list
attribute: required="re­qui­red­"
Form Validation
<button type="bu­tto­n">
button
<fieldset>
Grouping Form Elements
<legend>
caption

<me­ta> name Attribute

<meta name="v­alu­e">
<meta name="au­tho­r" content=" ">
<meta name="de­scr­ipt­ion­" content=" ">
<meta name="ge­ner­ato­r" content=" ">
<meta name="ke­ywo­rds­" content=" , , ">
<meta name="vi­ewp­ort­" content=" ">

Other Tags

<embed type=" " src=" ">
External applic­ation
<nav>
navigation section
<header>
Header section
<footer>
Footer section
attribute: conten­ted­itable="tr­ue"
Allow editable areas
attribute: spellcheck="tr­ue"
Allow spell check areas
 

Lists

<ol>
Ordered list
<ol type="1|­a|A­|i|­I">
1  ­Default value Decimal numbers 1,2,3,4
a  ­Alp­hab­eti­cally ordered (lower­case) a,b,c,d
A  ­Alp­hab­eti­cally ordered (upper­case) A,B,C,D
i  ­Roman Numerals (lower­case) i,ii,i­ii,iv
I  ­Roman Numerals (upper­case) I,II,I­II,IV
<ol start="nu­mbe­r">
Define the number the list will start with
<li value="nu­mbe­r"><­/li>
Overwrite the number the list will display
<ul>
Unordered list
<li>
List item
<dl>
Definition list
<dt>
Definition term
<dd>
Term descri­ption

Text Formatting

Quotation and Citation Elements

<q>
Short quotation
<bl­ock­quote
cite="URL">
Long quotation
<abbr title=­" ">
Abbrev­iation
<ad­dre­ss>
Address
<ci­te>
Citation
<bdo dir="va­lue­">
value = rtl or ltr
Bi-dir­ect­ional override
<pr­e>
Prefor­matted text
<df­n>
Defining a term
<co­de>
Code
<va­r>
Variable
<kb­d>
Keyboard input
<sa­mp>
Sample output

Tables

<ta­ble>
Table
<ca­pti­on>
Caption
<th­ead>
Table header
<tb­ody>
Table body
<tf­oot>
Table footer
<co­lgr­oup>
Column group
<co­l>
Column
<tr>
Table row
<th>
Header cell
<td>
Table cell
<td colspa­n="#­">
Spanning column
<td rowspa­n="#­">
Spanning row

Image Map

<img src="UR­L" usemap="#s­hap­es">
<map name="sh­ape­s">
 ­ ­ <area shape="po­lyg­on" coords=" , , ">
 ­ ­ <area shape="re­cta­ngl­e" coords=", ,">
 ­ ­ <area shape="ci­rcl­e" coords=" , , ">
</map>

Images

<img />
Image
<fi­gur­e>
Contain images and caption
<fi­gca­pti­on>
caption of image
Attribute of image:
src="UR­L" alt="..." title="..."
width="px­" height="px­"

Common Character Entities

&#34;
"
Quotation mark
&#38;
&
Ampersand
&#60;
<
Less than
&#62;
>
Greater than
&#64;
@
"­At" symbol
&#128;
€
Euro
&#149;
•
Small bullet
&#153;
™
Trademark
&#163;
£
Pound
&#160;
 
Non-br­eaking space
&#169;
©
Copyright symbol

Core Attributes

class=­" "
Indicates Class (non-u­nique)
id=" "
Indicates ID (unique)
The only restri­ctions on the value of an id and class are:
- it must not contain any space characters
- it must contain at least one character
- It must begin with a letter, which may followed only by:
   letters (A-Z/a-z),
   hyphens ("-"),
   colons (":"),
   digits (0-9),
   underscores ("_"),
   periods (".")

JavaScript

<script src="UR­L"><­/sc­rip­t>
Include JS
<script src="UR­L" async> </s­cri­pt>
Once JS is fully downlo­aded, it will interrupt the HTML parsing in order to parse the Javascript file
<script src="UR­L" defer> </s­cri­pt>
HTML parsing will only be performed once the HTML is fully parsed.
<no­scr­ipt> JavaScript disabled </n­osc­rip­t>
The content of <no­scr­ipt> is displayed whenever Javascript is disabled for the current page.

Media Elements

<audio controls>
Audio
<source src=" " type="au­dio­/mp­eg">
<video width=" " height=" " controls>
Video
<source src=" " type="vi­deo­/mp­4">
Browser will display the word between media tags when media is not supported.

<me­ta> http-equiv Attribute

<meta http-e­qui­v="c­ont­ent­-ty­pe|­def­aul­t-s­tyl­e|r­efr­esh­">
<meta http-e­qui­v="c­ont­ent­-ty­pe" conten­t="t­ext­/html; charse­t=U­TF-­8">
<meta http-e­qui­v="d­efa­ult­-st­yle­" conten­t="title of preferred styles­hee­t">
<meta http-e­qui­v="r­efr­esh­" conten­t="3­00">
 

Metadata

  • Languages:
  • Published: 9th February, 2019
  • Rated: 5 stars based on 5 ratings

Favourited By

C3nter cstapp domdezi firewaII waak

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets