What you MUST know about HTML after fundamentals course

Tag

Description

Syntax

Possible attributes

Defines a comment

 wherever you want

<!DOCTYPE>

Defines the document type

<!DOCTYPE> at the very beginning

html to declare HTML5

html

Defines the beginning and the end of the document

<html> after <!DOCTYPE> declaration, </html> at the very end

head

Contains all the non-visual elements

<head> after <html>, </head> before the body

title

Defines the title of the page, describing it
Is used by search engines

<title>Your title</title> in the head

body

Contains all the visual-structural elements

<body> after the head, </body> before </html>

bgcolor, align

Defines an hyperlink

<a href="Some URL" target=_blank>Text to click to be redirected</a>
Text to click to be redirected

href, target

<animate>
(NEW IN HTML5)

Creates a SVG animation

attributeName, from, to, dur, fill, repeatCount

article
(NEW IN HTML5)

Main container of content of the web page, is intended to replace <div>

<article>

Your article content

</article>

aside
(NEW IN HTML5)

Defines a secondary or tangenial content like sidebars
Usually separated from content but indirectly related to it

<aside></aside>

audio (API)
(NEW IN HTML5)

Specifies a standard for embedding audio in a web page

2 ways are used :
<audio src="Some audio source" controls></audio>
<audio controls><source src="Some audio source"></audio>

src (MP3, WAV, OGG), controls, autoplay, loop

Makes the text bold

<b>Your bold text</b>

big

Makes the text bigger

<big>Your bigger text</big>

<br>

Adds a single line break without starting a new paragraph

Insert <br>
before your line break

canvas
(NEW IN HTML5)

Used to draw with Javascript, pixel-based

<canvas id="Canvas name" width=20px height=20px></canvas>

id, width, height

circle
(NEW IN HTML5)

Creates a SVG circle

<svg height=20px width=20px><circle cx=10 cy=10 r=10 fill=green stroke=black></circle></svg>

cx, cy, r, fill, stroke, style

datalist
(NEW IN HTML5)

Defines a list of pre-defined options for a search field

id (Note : <input> and datalist must have the same id)

del

Defines deleted text (Note : appears with a line through)

<del>~~Your deleted text~~</del>

div

Block-level section that is used as a container of other HTML elements

<div >One element here <p>Other <b>element</b> here</p></div>

One element here

Other element here

style, align

ellipse
(NEW IN HTML5)

Creates a SVG ellipse

<svg width=20px height=20px><ellipse cx=10 cy=10 rx=10 ry= fill=green></ellipse></svg>

Defines important text (Note : looks italic, used by search engines)

<em>Your emphasized text</em>

font

Creates an inline styling of text

<font color=#FF0000>Some red text</font>

color

footer
(NEW IN HTML5)

Defines a footer in the <body>
Refers to a location at the very bottom of the document
Usually provides : Contact Information, Privacy Policy, Social Media Icons, Terms of Service, Copyright Information, Sitemap and Related Documents

<footer></footer>

form

Used to collect information from user

<form action="Some URL" method=POST><input></form>

action, method, autocomplete

<frame>
(NOT IN HTML5)

Defines one specific window

<frame src="Some URL" noresize=noresize>

noresize, src

frameset
(NOT IN HTML5)

Defines a space to create frames

<frameset cols="25%,50%,25%"><frame></frameset>

cols, rows

h1 - h6

Defines headings (Note : makes the text bigger and bold, used by search engines)

<h1>Your heading 1</h1>

<h6>Your heading 6</h6>

header
(NEW IN HTML5)

Defines a header in the <body>
Completely different from the <head>

<header>

Your header content

</header>

<hr>

Creates an horizontal line

<hr width=50px>

width

Makes the text italic

<i>Your italic text</i>

<img>

Inserts an image

<img src="Some image source" alt=404 height=20px width=50px border=2px>

src, alt, height, width, border

<input>

Creates a single element to collect an information from user

<input type=text name=text>

id, type, name, value, placeholder, autofocus, required, form (don't understand either), formaction,
formmethod, formenctype, formnovalidate, formtarget, height, width, list, min, max,
multiple, pattern (regexp), step

ins

Defines inserted text (Note : looks underlined)

<ins>Your inserted text</ins>

Creates a list item

<li>list item</li>

list item

line
(NEW IN HTML5)

Creates a SVG line

<svg height=20px width=20px><line x1=0 y1=0 x2=20 y2=20 stroke=black></line></svg>

x1, x2, y1, y2, stroke, style

nav
(NEW IN HTML5)

Creates a section of a document that links to other pages or to certain sections within the document

<nav></nav>

noframes
(NOT IN HTML5)

Provides the ability to display the page if frames are not supported

<noframes>Alternative text</noframes>

Creates an ordered (numbered) list

<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>

First list item
Second list item

<option>

Defines the options in a drop-down list for the user to select

See datalist

value

Creates a paragraph

<p align=right>

Your paragraph

</p>

align

path
(NEW IN HTML5)

Creates a SVG path drawing

d, style

polygon
(NEW IN HTML5)

Creates a SVG polygon

<svg width=20px height=20px><polygon points="0 0, 10 20, 20 10" fill=green></polygon></svg>

polyline
(NEW IN HTML5)

Creates multiple lines in a SVG

<svg width=20px height=20px><polyline stroke=black fill=none points="0 0, 10 20, 20 0"></polyline></svg>

stroke, fill, points, style

progress
(NEW IN HTML5)

Creates a progress bar

<progress min="" max="" value=""></progress>

min, max, value

rect
(NEW IN HTML5)

Creates a SVG rectangle

<svg width=30px height=30px><rect width=20pc height=10px x=10 y =10 fill=green></rect></svg>

height, width, x, y, fill, stroke, style

script

Creates a place to write Javascript in an HTML document

<script>Some Javascript</script>

Javascript (yes that blew my mind too)

section
(NEW IN HTML5)

Defines a container that can be used to divide up content within an article

<section>

Your section content

</section>

small

Makes the text smaller

<small>Your smaller text</small>

<source>

Defines the source of a media like audio and video
Multiple sources can be linked to different media file, first recognized file will be used

See <audio> tag

src, type

span

Inline section used as container of text, can be styled

<span style="CSS styling">Some inline text</span>

style

strong

Defines important text (Note : looks bold, used by search engines)

<strong>Your strong text</strong>

sub

Makes the text subscripted

<sub>_{Your subscripted text}</sub>

sup

Makes the text superscripted

<sup>^{Your supercripted text}<sup>

SVG
(NEW IN HTML5)

Scalable Vector Graphics, used to draw shapes with only HTML
Vector-based, not pixel-based : the better the definition is, the better it looks like

Can be inserted as an image : <img src="Some svg.svg" alt=404 height=20px>
404

Or as a SVG element : <svg height=20px width=20px><Some shape + attributes></svg>
Shapes available : circle, rect, line, polyline, polygon, ellipse

width, height

table

creates a table

<table border=1px>
<tr>
<td>Table-</td>
<td>-ception</td>
</tr>
</table>

Table-

-ception

border, align

Defines a table column

Cell 1	Cell 2
Cell 3 and 4

colspan, rowspan, bgcolor

Defines a table row

Cell 1	Cell 2 and 4
Cell 3

Creates an unordered (not numbered) list

<ul>
<li>First list item</li>
<li>Second list item</li>
</ul>

First list item
Second list item

video (API)
(NEW IN HTML5)

Specifies a standard for embedding video in a web page

2 ways are used :
<video src="Some video source" controls></video>
<video controls><source src="Some video source"></video>

src (MP4, WebM, OGG), controls, autoplay, loop

Named but forgotten in this course :(

details, embed, label, meta, output , textarea

Attributes

Description

Possible Values

action

Points to a webpage after the form is submitted

URL

align
(NOT IN HTML5)

Defines the alignment of an element

center, right, left

alt

Defines an alternative text if img can't be loaded

text

attributeName

Defines the attribute to modify in an animation

ANY attribute

autocomplete

Specifies whether a form or input field should have autocomplete turned on or off

Guess what ? on or off

autofocus

Makes the input focussed when the form loads
(can be very annoying when automatic loading leads to this page and user wants to leave by typing a new adress)

autoplay

Specifies that the media should starts playing as soon as it is ready

bgcolor
(NOT IN HTML5)

Defines the background color of an element

color name, hexadecimal values

border

Creates a border around an element and defines its width

px, %

charset

Defines the character encoding

UTF-8

color
(NOT IN HTML5)

Defines the color of the text

color name, hexadecimal values

cols

Defines the number of columns in a frameset

px, %

colspan

Span columns in a table

number

controls

Specifies that media controls should be displayed (like play or pause)
If used with autoplay nice way of creating a VERY annoying page (invisible music player, can't stop the music)

Defines the horizontal relative coordinate of the radius of SVG circle / ellipse
Based on the top left corner of the SVG

number

Defines the vertical relative coordinate of the radius of SVG circle / ellipse
Based on the top left corner of the SVG

number

Defines the coordinates of a path

M (first coordinate)
L (draw line)
H (horizontal line)
V (vertical line)
C (curve)
S (smooth curve)
Q (quadratic Bézier curve)
T(smooth quadratic Bézier curve)
A (elliptical arc)
Z (close path)

dur

Defines the duration of an animation

number (in seconds)

fill

In a SVG shape tag : defines the color to fill the SVG shape with
In <animate> : specifies if the attribute's value should be kept or reset to initial at the end of the animation

SVG shape : color name, hexadecimal values
<animate> : remove, freeze

from

Defines the beginning value of attributeName in an animation

Value adapted to attribute (number, color name, ... etc)

height

Defines the height of an element

px, %

href

Defines the adress of the linked document

URL

loop

Specifies that the media should replay every time it is finished

max

Defines the maximum value of a progress bar

number

method

Specifies the HTTP method to be used when the form is submitted

GET, POST, PUT (NEW IN HTML5), DELETE (NEW IN HTML5)

min

Defines the minimum value of a progress bar

number

name

Defines the name of an element

text

noresize

Specifies that a user can't resize the frame

noresize

placeholder

Provides a hint to the user of what information to enter into the field

text (yes, be creative)

points

Defines the differents relative coordinates of a SVG polyline / polygon
Based on the top left corner of the SVG
Note : each "x y" pairs are separated by a comma

numbers (as many as wanted, feel free)

Defines the radius of a SVG circle

number

repeatCount

Specifies the repeat count of an animation

number, indefinite

required

Used to make the input element required
Form will not be submitted without filling in the required fields

rows

Defines the number of rows in a frameset

px, %

rowspan

Span rows in a table (Note : written in td)

number

Defines the horizontal axe of the radius of a SVG ellipse

number

Defines the vertical axe of the radius of a SVG ellipse

number

src

Defines the location of an element

URL, name of a document

stroke

Adds an outline to a SVG shape

color name, hexadecimal values

style

Allows to define elements styling

CSS (what a surprise ...)

target

Specifies where to open the linked document

_blank

Defines the end value of attributeName in an animation

Value adapted to attribute (number, color name, ... etc)

type

Defines the type of an element

text, password, checkbox, radio, submit, email, search, URL, color, number, range, tel
date, datetime, datetime-local, month, time, week

value

Defines the value of an element

text, number

width

Defines the width of an element

px, %

Defines the horizontal relative position of the top left corner of a SVG rectangle
Based on the top left corner of the SVG

number

x1 / x2

Defines the horizontal relative coordinates of the beginning and ending of a SVG line
Based on the top left corner of the SVG

number

Defines the vertical relative position of the top left corner of a SVG rectangle
Based on the top left corner of the SVG

number

y1 / y2

Defines the vertical relative coordinates of the beginning and ending of a SVG line
Based on the top left corner of the SVG

number

Values

Description

freeze

Resets the value of attributeName at the end of the animation

GET

Method that makes the form data visible in the page address

Hexadecimal colors

Hexadecimal values : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (A - F are equivalent to 10 - 15 / 10 is equivalent to 16)
HTML colors are displayed in combinations of red, green, blue (RGB)
Colors are written like this : #RRGGBB (from 00 to FF which is 255)
Examples : #0000FF is blue, #00FF00 is green, #00FFFF is cyan

POST

Method that makes the form data not visible in the page address
Used to update data and for sensitive informations like passwords

Unit of distance in pixels, not the same as percentages

remove

Keeps the final value of attributeName at the end of the animation

_blank

Open linked document on a new tab / window

Unit of distance in percentages of block's display, not the same as pixels

API's
(NEW IN HTML5)

Description

Drag & Drop

Used to let the user grab an object and drag it to a different location

Any HTML element can be draggable and it needs :
Javascript to write the events (drag(event), allowDrop(event), drop(event))
HTML attributes to set :
An element to accept to be dragged (draggable to true, ondragstart to drag(event))
An element to accept a drop (ondragover to allowDrop(event), ondrop to drop(event))

Geolocation

Used to obtain user's geographical location, needs user's approbation
Used with Javascript :
getCurentPosition() - retrieves current location of user's device in either Geodetic (scientific) or Civic (common) way
showLocation() - defines callback method that retrieves location information
ErrorHandler() - method used when an error occurs in processing asynchronous call
Options - defines a set of options for retrieving the location information

Web storage

Way to store date on user's computer
Local storage : stores data with no expiration data
Session storage : destroyed once the web browser is closed
Used with Javascript : .setItem() (stores a value), .getItem() (prints a value), .removeItem() (removes a value), .clear() (remove all values)

Named but forgotten in this course :(

Offline Web Applications, History, Web Messaging

Content models

Description

Block elements

Start from a new line
Can contain inline elements
Examples : h1, form, li, ol, ul, p, pre, table, div

Inline elements

Displayed without line breaks
CANNOT contain block elements
Examples : b, a, strong, img, input, em, span, ins

Inline or block elements

Some elements can be used either as block or inline
Examples : applet, iframe (NOT IN HTML5), ins, map, object, script

Embedded
(NEW IN HTML5)

Imports other ressources into the document
Elements : audio, video, canvas, iframe (NOT IN HTML5), img, math, object, svg

Flow content
(NEW IN HTML5)

Contains the majority of HTML5, elements that would be included in the normal flow of the document

Heading
(NEW IN HTML5)

Defines a section header
Elements : h1, h2, h3, h4, h5, h6, hgroup

Interactive
(NEW IN HTML5)

Content intended for user interaction
Elements : a, audio, video, button, details, embed, iframe (NOT IN HTML5), img, input, label, object, select, textarea

Metadata
(NEW IN HTML5)

Sets up the presentation / behavior of the rest of the content / Found in the <head>
Elements : base, link, metal, noscript, script, style, title

Phrasing
(NEW IN HTML5)

Inline elements, lot of common with HTML4
Elements : img, span, strong, label, br, small, sub, sub, ... etc

Sectioning
(NEW IN HTML5)

Defines the scope of headings
Elements : article, aside, nav, section

Miscellaneous

Description

Canvas vs. SVG

Canvas
Elements are drawn programmatically
Drawings are done with pixels
Animations are not built in
High performance for pixels-based drawing operations
Resolution dependent
No support for event handlers
You can save the resulting image a .png or .jpg
Well suited for graphic intensuv games

SVG
Elements are part of the page's DOM (Document Object Model)
Drawing is done with vectors
Effects, such as animations are built in
Based on strandard XML syntax, which provides better accessibility
Resolution independent
Support for event handlers
Not suited for game applications
Best suited for applications with large rendering areas (like Google Maps)

Both can be used on the same page

But SVG cannot be drawn in a Canvas or vice-versa

CSS

Language used to style the document
If HTML defines the structure of the document, CSS defines its presentation
Usually written in a separate sheet but can be placed in an HTML document using the style attribute :
<div style="background-color:green; color:white; padding:20px;"></div>

Some text

HTML

HyperText Markup Language, not a programming language, not a scripting language either
Defines the structure of a website, uses tags to identify content

Javascript

Programming language used to create dynamic pages
If HTML defines the structure of a document and CSS its presentation, Javascript defines its behavior
Usually written in a separate sheet but can be placed in a HTML document using the script tag
Used in canvas and API's

UTF-8

Default character encoding of HTML5

.html / .htm

Possible extensions of an HTML file

(NOT IN HTML5) = use CSS instead

Tags title with <> are those not requiring closing tags (like <img>)