Fallinfo

Basic HTML

<!DOCTYPE>

  
// Defines the document type
// Declaration is NOT case sensitive

<!DOCTYPE html>

  // Defines a comment

  <!-- Some commnent -->

<html>

  
// Defines an HTML document

<html>
  // Code
</html>

<head>

  
// Contains metadata/information for the document

<html>
  <head>
    // Some content
  </head>
</html>

<body>

  
// Defines the document's body

<bod>Y
// Content
</bod>Y

<title>

  
// Defines a title for the document
// Should be inside head tag

<title> Some title </title>

<meta>

      
// Defines metadata about an HTML document
// Should be inside head tag

<meta charset="UTF-8">
<meta name="description" content="Some text">
<meta name="keywords" content="Some text,Some text,Some text">
<meta name="author" content="Some Text">
<meta name="viewport" content="width=device-width, initial-scale=1.0">



// Attributes
charset
content
http-equiv
name

<base>

// Specifies the base URL/target for all relative URLs in a documentt
// Should be inside head tag

<base href="Some_path" target="_blank">



// Attributes
href
target

  
// Defines HTML headings

<h1> Some text </h1>
<h2> Some text </h2>
<h3> Some text </h3>
<h4> Some text </h4>
<h5> Some text </h5>
<h6> Some text </h6>

<p>

  
// Defines a paragraph

<p>
Some paragraph content
</p>

<br>

  
// Inserts a single line break

<br>

<hr>

  
// Defines a thematic change in the content
// Insert a horizontal line 

<hr>

Formatting

<abbr>

  
// Defines an abbreviation or an acronym

<abbr title="Full form">Short_form</abbr>

<dfn>

  // Specifies a term that is going to be defined within the content
  
  <dfn title="Full form"> Short form </dfn>

<del>

  // Defines text that has been deleted from a document
  // Line through the text

  <del> Some striked text </del>

<s>

  
// Defines text that is no longer correct
// Line through the text

<s> Some striked text </s>

<u>

// Defines some text that is unarticulated and styled differently from normal text
// Underlined text

<u> Underlined text </u>

<ins>

  // Defines a text that has been inserted into a document
  
  <ins> Underlined text </ins>

<b>

  // Defines bold text

  <b> Bold text </b>

  
// Defines important text
// Bold text

<strong> Some bold text </strong>

<i>

// Defines a part of text in an alternate voice or mood

<i> Italic text </i>

<em>

  
// Defines emphasized text 
// Some form of italic

<em> Emphasized text </em>

<var>

// Defines a variable
// Basically an italic styles text

<var> Some variable name </var>

  // Defines contact information for the author/owner of a document/article
  // Font style italic will be applied

  <address>
    Text <br>
    Some text <br>
    Some long text <br>
    Some number
  </address>

  
// Represents the progress of a task

 Progress name

<meter>

// Defines a scalar measurement within a known range (a gauge)
// Small progress like element

<label for="id_name"> Some text </label>
<meter id="id_name" min="0" low="40" high="90" max="100" value="35" optimum="0.5">

<ruby>

// Defines a ruby annotation (for East Asian typography)
// A ruby annotation is a small extra text, attached to the main text 
// to indicate the pronunciation or meaning of the corresponding characters

<rub>Y
  A <rt> Some meanig </rt>
 </rub>Y

<rt>

// Defines an explanation/pronunciation of characters (for East Asian typography)

<rub>Y
  A <rt> Some meanig </rt>
 </rub>Y

<rp>

// Defines what to show in browsers that do not support ruby annotations
// Basically to show brackets if ruby does not support

<rub>Y
  A <rt> <rp>(</rp> Some meanig <rp>)</rp> </rt>
 </rub>Y

<code>

  
// Defines a piece of computer code

<codeYY background-color </codeYY

<pre>

  
// Defines preformatted text
// Shows exactly inside the tag in the page

<pre>
  // Some content
</pre>

<samp>

  
// Defines sample output from a computer program

<samp> Some output text </samp>

// Defines a container for content that should be hidden when the page loads
// Basically display none

<template>
 // Some hidden html
</template>

<sub>

  
// Defines subscripted text

<sub> subscript </sub>

<sup>

  
// Defines superscripted text

<sup> superscript </sup>

<mark>

  
// Defines marked/highlighted text

<mark> Highlighted text </mark>

<small>

  
// Defines smaller text

<small> Some text in small size </small>

<q>

  
// Defines a short quotation
// Text will be inside double quotes

<q> Some text </q>

<time>

// Defines a specific time (or datetime)

<time datetime="2020-01-01 00:00"> Some text </time>

<wbr>

  
// Defines a possible line-break
// Tells browser to break the word at specific place

<p> Some_long_text<wbr>is_here<wbr></p>

<kbd>

 
// Defines keyboard input

<kbd> Keyboard key </kbd>

<bdo>

// Overrides the current text direction

<bdo dir="rtl"> Text right to left </bdo>
<bdo dir="ltr"> Text Left to left </bdo>

<bdi>

// BDI stands for Bi-Directional Isolation
// Isolates a part of text that might be formatted in a different direction

<span> Some text <bdi> Direction changed text </bdi> Some text </span>

  // Defines a section that is quoted from another source
  
  <blockquote cite="source_link">
    Some content from another source
    </blockquote>

<cite>

  
// Defines the title of a work

<cite> Title of the work </cite>

Links

<a>

      
// Defines a hyperlink

<a href="#some_link"> Some link text </a>


// Attributes
download
href
hreflang
media
ping
referrerpolicy
rel
target
type

<link>

// Defines the relationship between a document and an external resource 
// Basically to link to style sheets

<link rel="stylesheet" href="style_sheet_name">


// Attributes
crossorigin
href
hreflang
media
referrerpolicy
rel
sizes
title
type

<nav>

      
// Defines navigation links
// Basically a wrapper for links

<nav>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</nav>

Lists

<ul>

      
// Defines an unordered list
// Bulleted list
// Should use li tag inside

<ul>
  <li>Some text 1</li>
  <li>Some text 2</li>
</ul>

<ol>

      
// Defines an ordered list
// Numerical or Alphabetical list
// Should use li tag inside

<ol>
  <li>Some text 1</li>
  <li>Some text 2</li>
</ol>


// Attributes
reversed
start
type

<li>

      
// Defines a list item
// Used inside ul,ol and menu tags

<ul>
  <li>Some text 1</li>
  <li>Some text 2</li>
</ul>

<ol>
  <li>Some text 1</li>
  <li>Some text 2</li>
</ol>

<dl>

      
// Defines a description list
// Wrapper to dt and dd tags

<dl>
  <dt> Term </dt>
    <dd> Description </dd>
  <dt> Term </dt>
    <dd> Description </dd>
</dl>

<dt>

      
// Defines a term/name in a description list

<dl>
  <dt> Term </dt>
    <dd> Description </dd>
  <dt> Term </dt>
    <dd> Description </dd>
</dl>

<dd>

// Defines a description of a term/name in a description list

<dl>
  <dt> Term </dt>
    <dd> Description </dd>
  <dt> Term </dt>
    <dd> Description </dd>
</dl>

Tables

<table>

// Defines a table

<table>
  // Table content
</table>

      
// Defines a table caption

<table>
  <caption> Table title </caption>
  // Table content
</table>

<tr>

      
// Defines a row in a table

<table>
  <tr>
  // Table content
  </tr>
</table>

<th>

      
// Defines a header cell in a table

<table>
  <tr>
    <th> Heading 1 </th>
    <th> Heading 2 </th>
  </tr>
</table>



// Attributes
abbr
scope

colspan
rowspan
headers

<td>

      
// Defines a cell in a table

<table>
  <tr>
    <td> Data 1 </td>
    <td> Data 2 </td>
  </tr>
</table>



// Attributes
colspan
rowspan
headers

<thead>

      
// Groups the header content in a table
// Must have one or more tr tags inside

<table>
  <thead>
    <tr>
    <th> Heading 1 </th>
    <th> Heading 2 </th>
    </tr>
  </thead>
</table>

<tbody>

      
// Groups the body content in a table
// Must have one or more tr tags inside

<table>
  <tbody>
    <tr>
    <td> Data 1 </td>
    <td> Data 2 </td>
    </tr>
  </tbody>
</table>

<tfoot>

      
// Groups the footer content in a table
// After tbody tag

<table>
  <tfoot>
    <tr>
    <td> Data 1 </td>
    <td> Data 2 </td>
    </tr>
  </tfoot>
</table>

// Specifies a group of one or more columns in a table for formatting

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
</table>

<col>

// Specifies column properties for each column within a colgroup element

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
</table>



// Attributes
span

Styles and Semantics

<span>

      
// Defines an inline container for text content

<span>
  // Some content
</span>

      
// Defines a header for a document or section
// For introductory content

<header>
  // Some content
</header>

      
// Defines a footer for a document or section
// Ending content

<footer>
  // Some content
</footer>

<div>

      
// Defines a section in a document

<div>
  // Some content
</div>

      
// Defines a section in a document

<section>
  // Some content
</section>

<main>

      
// Specifies the main content of a document
// For main content in the page

<main>
  // Some content
</main>

// Defines an article
// For some blog like content

<article>
  // Some content
</article>

<aside>

      
// Defines content aside from the page content
// Mostly for sidebar

<aside>
  // Some content
</aside>

// Defines additional details that the user can view or hide
// Basically like accordian
// summary tag is used for heading      

<details>
  <summar>Y Heading </summar>Y
  <p> Some content </p>
</details>



// Attributes
open

// Defines a visible heading for a details element
// Used inside details tag

<details>
  <summar>Y Heading </summar>Y
  <p> Some content </p>
</details>

      
// Defines a dialog box or window
// Basically like modal

<dialog>
  // Some content
</dialog>



// Attributes
open

<data>

// Adds a machine-readable translation of a given content

<ul>
  <li><data value="1"> Data 1 </data></li>
</ul>

<style>

      
// Defines style information for a document
// Should be inside head tag

<style>
  h1 {color:red;}
  p {color:blue;}
</style>



// Attributes
media
type

Frames

  
// Defines an inline frame
// An inline frame is used to embed another document within the current HTML document

<iframe src="#some_link" title="Some title">
</iframe>



// Attributes
allow
allowfullscreen
allowpaymentrequest
height
loading
name
referrerpolicy
sandbox
src
srcdoc
width

Images

<img>

// Defines an image
// Basically to load 

<img src="img_path" alt="Some text" width="500" height="600">



// Attributes
alt
crossorigin
height
ismap
longdesc
referrerpolicy
sizes
src
srcset
usemap
width

<svg>

  
// Defines a container for SVG graphics

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>



// Examples

// Circle
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

// Rectangle
<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

// Star
<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<map>

  
// Defines a client-side image map
// Custom clickable areas inside an image
// Contains a number of area tags

<img src="img_path" alt="Some text" width="500" height="600" usemap="#map_id">

<map name="map_id">
  <area shape="rect" coords="34,44,270,350" alt="Some text" href="#some_path1">
  <area shape="rect" coords="290,172,333,250" alt="Some text" href="#some_path2">
</map>

<area>

  
// Defines an area inside an image map
// Used with map tag

<img src="img_path" alt="Some text" width="500" height="600" usemap="#map_id">

<map name="map_id">
  <area shape="rect" coords="34,44,270,350" alt="Some text" href="#some_path1">
  <area shape="rect" coords="290,172,333,250" alt="Some text" href="#some_path2">
</map>



// Attributes
alt
coords
download
href
hreflang
media
rel
shape
target
type

// Used to draw graphics, on the fly, via JavaScript

<canvas id="some_id">
  Your browser does not support
</canvas>

<script>
  var canvas = document.getElementById("some_id");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);
</script>



// Attributes
height
width



// Examples
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

canvas.height = window.innerHeight - 100;
canvas.width = window.innerWidth - 20;

ctx.strokeStyle = 'red';
ctx.lineWidth = 1;

// Line
lineTo(x, y)

ctx.moveTo(100,100);
ctx.lineTo(0,100);
ctx.stroke();

// Box
ctx.fillStyle = 'red';
ctx.fillRect(10,10,150,80);
ctx.strokeRect(10,10,150,80);
ctx.clearRect(26, 26, 98, 98);

// Circle
arc(x, y, radius, startAngle, endAngle, anticlockwise)
arcTo(x1, y1, x2, y2, radius)

ctx.beginPath();
ctx.arc(30,30,30,0,2 * Math.PI);
ctx.stroke();

// Text
ctx.font = '30px arial';
ctx.fillText('Hello ooo ooooo',100,100);
ctx.strokeText('Hello ooo ooooo',100,100);

// Filling gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

// Image
var img = document.getElementById("id_name");
ctx.drawImage(img,10,10);

  
// Defines a container for multiple image resources
// Change whole image when resize

<picture>
  <source media="(min-width:650px)" srcset="some_path_3">
  <source media="(min-width:465px)" srcset="some_path_2">
  <img src="some_path_1" alt="Flowers" style="width:auto;">
</picture>

 
// Specifies self-contained content
// Like images, illustrations

<figure>
  <img src="some_path">
</figure>

  
// Defines a caption for a figure element
// Used inside figure tag

<figure>
  <img src="some_path">
  <figcaption> Some text </figcaption>
</figure>

Audio / Video

<audio>

  
// Defines sound content
// Browser will choose the first best source

<audio controls>
  <source src="some_path" type="audio/ogg">
  <source src="some_path" type="audio/mpeg">
  Your browser does not support
</audio>



// Attributes
autoplay
controls
loop
muted
preload
src

<video>

  
// Defines a video or movie

<video width="320" height="240" controls>
  <source src="some_path" type="video/mp4">
  <source src="some_path" type="video/ogg">
  Your browser does not support
</video>



// Attributes
autoplay
controls
height
loop
muted
poster
preload
src
width

// Defines multiple media resources for media elements 
// Used inside video, audio, picture tags

<audio controls>
  <source src="some_path" type="audio/ogg">
  <source src="some_path" type="audio/mpeg">
  Your browser does not support
</audio>


<picture>
  <source media="(min-width:650px)" srcset="some_path_3">
  <source media="(min-width:465px)" srcset="some_path_2">
  <img src="some_path_1" alt="Flowers" style="width:auto;">
</picture>

<track>

// Defines text tracks for media elements
// Basically subtitles

<video width="320" height="240" controls>
  <source src="some_path" type="video/mp4">
  <track src="some_path" kind="subtitles" srclang="en" label="English">
  <track src="some_path" kind="subtitles" srclang="no" label="German">
</video>



// Attributes
default
kind
label
src
srclang

Programming

// Defines a client-side script

<script src="some_path"></script>

<script>
  // Some javascript
</script>



// Attributes
async
charset
defer
src
type


// Default - Html parse until js file,then download and execute and resume
// Async - Html parse and continue to download js files ,and stop only while js execution
// Defer - Html parse and continue to download js files and finish parsing and then start js execution

// Defines an alternate content if browser does not support client-side scripts

<script>
  // Some code
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<embed>

// NOT RECOMMENDED
// Defines a container for an external (non-HTML) application
// Instead of embed tag, can directly use img,audio,video and iframe tags

<embed type="image/jpg" src="some_path" width="300" height="200">
<embed type="text/html" src="some_path" width="500" height="200">
<embed type="video/webm" src="some_path" width="400" height="300">



// Attributes
height
src
type
width

// NOT RECOMMENDED
// Defines an embedded object
// Instead of object tag, can directly use img,audio,video and iframe tags

<object data="some_path" width="300" height="200"></object>
<object data="some_path" width="500" height="200"></object>
<object data="some_path" width="400" height="300"></object>



// Attributes
data
form
height
name
type
typemustmatch
usemap
width

<param>

 
// Defines a parameter for an object
// Used inside object tag

<object data="some_path">
  <param name="autoplay" value="true">
</object>



// Attributes
name
value

Forms and Input

<form>

  
// Defines an HTML form for user input
// Wrapper for input/forms elements
// input,textarea,button,select,option,optgroup,fieldset,label,output

<form action="some_path" method="get">
  // Input/form elements
</form>



// Attributes
accept-charset
action
autocomplete
enctype
method
name
novalidate
rel
target

  
// Groups related elements in a form
// Used inside form tag

<form action="some_path">
  <fieldset>
    // Input/form elements
  </fieldset>
</form>



// Attributes
disabled
form
name

  
// Defines a caption for a fieldset element
// Used inside fieldset tag
// Basically a border

<form action="some_path">
  <fieldset>
    <legend> Some text </legend>
  </fieldset>
</form>

<input>

  
// Defines an input control

<input type="text">
<input type="number">
<input type="checkbox">
<input type="radio">
<input type="email">
<input type="password">

<input type="button">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">




// Attributes
accept
alt
autocomplete
autofocus
checked
dirname
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
minlength
multiple
name
pattern
placeholder
readonly
required
size
src
step
type
value
width

  
// Defines a multiline input control (text area)

<textarea rows="4" cols="50">
  // Some text
</textarea>



// Attributes
autofocus
cols
dirname
disabled
form
maxlength
name
placeholder
readonly
required
rows
wrap

  
// Defines a drop-down list

<select>
  <option value="one">one</option>
  <option value="two">two</option>
  <option value="three">three</option>
</select>



// Attributes
autofocus
disabled
form
multiple
name
required
size

// Defines a group of related options in a drop-down list

<select>
  <optgroup>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>
  </optgroup>
  <optgroup>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>
  </optgroup>



// Attributes
disabled
label

  
// Defines an option in a drop-down list

<select>
  <option value="one">one</option>
  <option value="two">two</option>
  <option value="three">three</option>
</select>



// Attributes
disabled
label
selected
value

// Specifies a list of pre-defined options for input controls
// Search and select

<datalist>
  <option value="one">
  <option value="two">
  <option value="three">
</datalist>

  
// Defines a clickable button

<button> Button text </button>



// Attributes
autofocus
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value

<label>

  
// Defines a label for an input element

<label for="some_id"> Some text </label>



// Attributes
for
form

  
// Defines the result of a calculation

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="1">
  <input type="number" id="b" value="1">
  <output name="x" for="a b"></output>
  </form>



// Attributes
for
form
name

Global attributes

class

// Specifies one or more classnames for an element (refers to a class in a style sheet)  

<span class="class_name"></span>

    
// Specifies a unique id for an element  

<span id="id_name"></span>

style

    
// Specifies an inline CSS style for an element  

<p style="color:green;"> Some text </p>

title

    
// Specifies extra information about an element  
// Basically a tooltip text

<p title="Some text"> Some text </p>

lang

// Specifies the language of the element's content  

<p lang="en"> Some text </p>

contenteditable

// Specifies whether the content of an element is editable or not  

<p contenteditable="true"> Some text </p>

<p contenteditable="false"> Some text </p>

hidden

// Specifies that an element is not yet, or is no longer, relevant  

<p hidden> Some text </p>

accesskey

// Specifies a shortcut key to activate/focus an element  
// Single character

<input accesskey="a">

data-*

// Used to store custom data private to the page or application  
// Lowercase letters

<span data-custom-attr="some_class"></span>

dir

// Specifies the text direction for the content in an element  

<p dir="ltr"> Some text </p>

<p dir="rtl"> Some text </p>

<p dir="auto"> Some text </p>

draggable

// Specifies whether an element is draggable or not  

<p draggable="true"> Some text </p>

<p draggable="false"> Some text </p>

<p draggable="auto"> Some text </p>

spellcheck

// Specifies whether the element is to have its spelling and grammar checked or not  

<input type="text" spellcheck="true">

<input type="text" spellcheck="false">

tabindex

    
// Specifies the tabbing order of an element  
// Basically tab button focus order

<div tabindex="1"> Some content </div>
<div tabindex="3"> Some content </div>
<div tabindex="2"> Some content </div>