Quick Reference Study Notes for HTML5 (Advanced)

HTML5
 

Introduction to HTML

HTML stands for hypertext markup language, the popular web language used to produce documents for the World Wide Web. Technically, HTML is not a programming language, but rather a markup language that  describes the structure of Web pages.HTML5 is the latest and most enhanced version of HTML. Browsers do not display the HTML tags visually, but use them to render the content of the page.

HTML has been around on web for a long time. Its roots starts at least from 1980, with Tim Berners-Lee‘s project ENQUIRE. And originally, the concept of hypertext goes back even further than that. The concept first seems to be appeared in the early 1940s, and was named and demonstrated in the 1960s.

Lee proposed a new hypertext system by taking the ideas from ENQUIRE features (and other systems, such as Apple's HyperCard) in 1989.This HTML became the first version of html language ..

Since then, the language has been in constant progress. The specification is managed by the World Wide Web Consortium(W3C) (Berners-Lee is still the director, as of 2018), and the Web Hypertext Application Technology Working Group(WHATWG).

Support of the features like allowing Uppercase tag names, adding Quotes are optional for attributes, adding attribute values are optional, optional Closing empty elements, support for  multimedia features like playing video and audio files, graphic elements makes the HTML5 more interactive and flexible web language.

 

New Features in HTML5

HTML5 introduces a number of new elements and attributes that can help you in building quick websites without need of external plugins. Here is a set of some of the most important features introduced in HTML5.

  • New Semantic Elements like <header>, <footer>, <section> <nav>, <figure>, and <figcaption> are available.

  • Improvements to HTML web forms where new attributes have been introduced for <input> tag.

  • New HTML5 API’s (Application Programming Interfaces) which includes -

  • Persistent Local Storage to store web applications data locally within the user’s browser.

  • The HTML Geolocation API is used to find the geographical position of a user by sharing the physical locations.

  • Drag and drop features to drag items from one location to different location.

  • Application caching mechanism lets web-based applications run offline.

  • Server-Sent Events(SSE) allow a web page to get updates from a server.

  • Web Workers are introduced to provide a simple means for web content to run scripts in background

  • New graphic elements like <svg> and <canvas> which supports  two-dimensional drawing surface that can be programmed with JavaScript.

  • New Multimedia elements like audio and video are introduced to embed audio or video on your webpages independent of third-party plugins.

 

Some of Elements are removed in HTML5 that existed in HTML4. The HTML4 elements <acronym>(use instead <abbr>), <applet>(use instead <object>), <basefont>, <big>

<center>,<dir>(use instead <ul>),<font>,<frame>,<frameset>,<noframes>

<strike>(use instead  <s>, or <del> or apply css), <tt> have been removed in HTML5. width attribute for <pre> tag not supported in HTML5

 

Basics

Standard Page Elements

<!DOCTYPE html>

Placed at the top of the document and declares the page to written in HTML5

<html>..

</html>

This is the root element of the page which marks the beginning and end of the html content and tells the website that all the other tags within this are html formatted.

<head>..</head>

This is a header section of the page which provides specifications about the document, including its title, style information, and scripts.

<body>..</body>

Contains the actual content that is rendered on the webpage.

<title>..<title>

This tag is used to specify title to the webpage and this appears at the title bar of the browser. Search engines use this tag to extract the topic of the page which is used for ranking relevant search results.

<base/>

Signifies the base url of the site and specifies the relative internal links in the document in a clean manner.

<meta/>

This tag is very useful for including additional information about page like character set, author, published date, keywords and any other

<link/>

Used to link external pages like stylesheets

<style>..</style>

This is used to create inline css styles in the specific page.

<script>..</script>

This can be used for writing code snippets in javascript or for linking to external javascript files.

Basic page format

<!DOCTYPE html>

       <html>

             <head>

                   <base href="https://mywebsite.com" target="_blank" />

                   <meta charset="utf-8" />

                   <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />

                   <script type="text/javascript">

                              var appname=’cheatsheet’;

                   </script>

                   <script src="Scripts/bootstrap.min.js"></script>    

             </head>

      </html>

Basic Document structure Elements

<h1>     …. </h1>

        ...

<h6>     …. </h6>

There are 6 html heading tags h1,h2,h3,h4,h5,h6  with h1 having the highest font size and moving down to h6 has the smallest font size.These are generally used for  highlighting important topics and structure of document.

<div> …  </div>

Most commonly used tag in HTMl to divide the web page into blocks or sections and is generally used as a container for for other HTML elements.

<span> …. </span>

This tag is used generally to group some inline content, but does not affect its visual appearance , instead styles of that grouped  content can be modified through manual css .

<p>  … </p>

this tag stands for paragraph.It applies some default marginal space , so is used organize plain text and stand like a paragraph in large amount of text.

<br/>

Used a insert single line break, So that next text starts from new line.

<hr/>

This is similar to break tag, but this also draws a horizontal line to indicate the end of some section or block.

HTML Formatting Elements

<b>...</b>

To make the text bold.

<strong>..</strong>               

It makes the text bold but also emphasizes the text with extra importance.

<i>..</i>

Makes the text italic.

<em>....</em>

Makes the text italic,but also emphasizes the text with extra importance

<mark>..</mark>     

Used for Highlighting the important text in yellow background.

<u>..</u>

Used to place underline below the text.

<strike>..</strike

places a horizontal line over text.

<sup>..</sup>

Displays the text in smaller font size than the normal text and is  placed half a line height higher.

<sub>..</sub>

Displays the text in smaller font size than the normal text and is  placed half a line height lower.

<small>..</small>

Displays the text in smaller  font size and is placed at its original position

<ins>..</ins>

Denotes the text has been inserted into the page.

<del>..</del>

Displays the text as deleted which is marked by a line through text.

<cite>..</cite>

Highlights the text as some reference information which could be some work title or simply citing author of a quotation.

<abbr>..</abbr>

Denotes abbreviation or an acronym(full forms).

<blockquote>..

<blockquote>

To represent Multiple Lines of text as a quoted text taken as reference from another source. Generally <cite> tag is placed with in to define citation.

<q>..</q>

To display shorter quotations within text.

<address>..</address>

Highlights the text as a contact information (author/owner) of a document or an article.

<bdo>..</bdo>

stands for Bi-Directional Override. As its name indicates it is used to override the current text direction

<pre>..</pre>

is displayed in a fixed-width font, and it preserves both spaces and
line breaks.

<code>..</code>

Used To display the piece of computer codes in formatted style

<kbd>..<kbd>

Designed to display text representing keyboard inputs like ‘Ctrl + L’ in special format.

<samp>..</samp>

Used for Special format representation of Output content of computer program code.

<var>..</var>

Used for Special format representation of variables of computer program code.

Attributes

These are the properties associated with the element that are used to provide additional information about an element which are always specified in the start tag.

These generally come in name/value pairs.

General format -

<tag-name attr-name1=”attr-value1” attr-name2=”attr-value2”> ..</tag-name>

  • Some of the tags have special attributes and without these tags, these become useless like ‘href’ attribute in link <a> tag.

Standard Attributes

There are some common attributes which can be used almost on all HTML attributes which are listed below along with the purpose these are designed for.  

accesskey=””

Attribute value is user defined and is used to specifies a keyboard shortcut to access an element.

align=””

Used for setting horizontal alignment of tag. Its value can be right, left or center

id=””

Gives a unique name to an element for use with Cascading Style Sheets or fetching the element at client side scripts.

class=””

Attribute value is user defined  which is used to classify an element for use with Cascading Style Sheets.

height=””

This attribute takes up the numeric value that sets the height of tables, images, or table cells.

width=””

Takes the numeric value to set the width of tables, images, or table cells.

hidden=””

Specifies whether element should be visible or not.

title=””

Takes a user defined value that gives hint information for elements on mouse hover.

valign=””

Vertically aligns tags within an HTML element. It takes up values like top, middle, bottom.

style=””

Specifies an inline style for an element which contains css style properties.

background=””

Attribute value is some URL of image that places background image behind an element.

bgcolor=””

This adds background color to an element. It values can be assigned in either of numeric, hexadecimal, RGB values

tabindex=””

Specifies the tab order of an element(some integer value).

contenteditable=””

Boolean Attribute that indicates if the user can edit the element's content or not.

contextmenu=””

Specifies the context menu for an element by supplying the Menu Id.

data-XXXX=””

Used to generate New custom attribute which takes up user-defined value .This attribute is detected if starts with data- prefix.

draggable=””

Specifies whether or not a user is allowed to drag an element. Available options are true,false, auto

item=””

Used for element grouping purposes.

itemprop=””

Used to group items.

spellcheck=””

Boolean attribute that Specifies if the element must have it's spelling or grammar checked.

subject=””

Specifies the element's corresponding item.

Event Attributes

When a user visits website, they perform different things to explore site like click on different content parts, hover over content etc. Technically these are JavaScript calls events. Within your HTML, you can respond to an event using an event handler attribute. You can add an event handler content attribute to the HTML element which contains the code to create response for that specific event when detected. HTML5 also introduced some very useful event attributes related drag-drop api and media elements. Some useful event attributes are discussed below-

onload

This is a window event that fires when the document has loaded.

onunload

A window event that fires immediately before the document is unloaded or the browser window is closed.

onerror

A window event that is Invoked when an error occurs while the element is being loaded.

onresize

A window event that fires when the browser window is resized.

onchange

A form event that fires immediately when input value is changed.

onfocus

A form event that fires when the element gets focus.

oninput

A form event that fires when input value for element is entered by user

oninvalid

A form event that fires when input element do not satisfy their constraints during form validation.

onsearch

A form event that fires when user enters value in input type search element.

onselect

A form event that fires when some text is being selected or the current selection is changed by the user.

onsubmit

A form event that fires when a form is submitted.

onclick

A mouse event that fires on a mouse click on the element

ondblclick

A mouse event that fires on a mouse double-click on the element

onmouseout

A mouse event that fires when the mouse pointer moves out of an element

onmouseover

A mouse event that fires when the mouse pointer moves over element.

ondrag

A drag event that fires when element is dragged and this fires throughout the drag operation.

ondragstart

Event  that fires when the user starts to drag a text selection or selected element.

ondragend

Event that fires when the user releases the mouse button at the end of a drag operation.

ondragenter

A drag event that fires when the dragged element enters the drop target area.

ondragleave

A drag event that fires when dragged element leaves a drop target in drag state.

ondragover

A drag event that fires when dragged element leaves a drop target in drag state.

ondrop

A drag event that fires when dragged element moves over a drop target area.

oncanplay

A media event that fires when sufficient data chunks are available to play the media, but still could be stopped for further buffering .

oncanplaythrough

A media event that fires when complete media could be played to the end without stopping for further buffering.

onended

A media event that fires when the playing media content has reached its end.

onpause

A media event that fires when error occurs while loading media content.

onplay

A media event that fires when media content is ready for play.

onplaying

A media event that fires when media content starts playing

onprogress

A media event that fires after short intervals while media content downloads to indicate the progress.

onratechange

A media event that fires when speed of playback is changed to slow  or fast forward mode.

onvolumechange

A media event that fires when volume is changed to set to mute or is unmuted.

 

Document structure Elements and associated attributes

New HTML5 Semantic Elements

<header>..</header>

Used for specifying header content on web page like group of introductory or navigational aids.

<footer>..</footer>

Used for specifying footer content on web page like author information, copyright information etc.

<article>..</article>

Represents an independent piece of content of a document, such as a blog entry or newspaper article

<aside>..</aside>

Represents a piece of content that is only slightly related to the rest of the page.

<section>..</section>

Represents a generic document sections or blocks of grouped content

<hgroup>..</hgroup>

Represents the header of a section.

<nav>..</nav>

Represents a navigation section on the web page.

<details>..</details>

Represents additional information or controls which the user has option to view or hide this.

<figure>..</figure>

Used for adding illustrations, diagrams, figures, photos  to main content flow of the document.

<figcaption>..

<figcaption>

Placed inside <figure> to set  caption for this.

<progress>..

</progress>

Represents a progress of a task completing to track the progress, such as downloading.

<keygen>

Represents control for key pair generation.

<meter>..</meter>

Represents a measurement, such as disk usage.

<ruby>..</ruby>

Together with <rt> and <rp> allow for marking up ruby annotations.

<time>..</time>

Represents a date and/or time.

<wbr>

Represents a line break within the content.

<command>..

</command>

Represents a command the user can invoke.

Links

<a>...</a>

stands for Anchor tag defines a hyperlink which links the current page to some another web page, files,different part/section of the same webpage, or any URL.

href=”value”

attribute which contains the Navigate link address value.

href=”:mailto”

Tag is dedicated for sending emails

target=””

Used for specifying window location where the link should be opened which is generally used in case of web page urls or file links. The target options are _blank,_self,_parent, _top or any framename  . If this is not specified , then link will open in same page.

Image

<img/>

Used to display images on web page

src="url"

Used to specify any type of web address which could be relative or absolute link of image file to be displayed..

alt=”text”

This is alternate text that appears if image is not found at specified url. This text is also useful for providing additional details which is used by search engines.

height=”value”

This property is used to set height of image in pixels

width=”value”

This property is used to set width of image in pixels

usemap=”mapname”

This is used to connect the image  target map object described below.

<map>..</map>

Makes the different areas of image clickable.

name=””

This is the identifying property of map which is specified in the “usemap” property of image which is to be made clickable.

<area>

Placed under map tag and used to create areas in image

shape

Specifies the shape of area which could be rect, circle etc

coords

Required Coordinate values based on shape separated by comma.

href

Defines the link for the area.

<picture>..</picture>

Used to display different images for different media screens.

<source media=

”<width-expression>”

srcset=””>

Source tags are placed under picture tag, where media attribute specifies the media screen restriction expression (like media="(min-width: 450px)") for which the image location specified in the  srcset attribute is to be displayed.

For other cases than the media restrictions specified in the Source attribute, image specified in the image tag placed under source tag appears.

Table

<table>..</table>

Displays the data in tabular form

<tr>..</tr>

Creates a row in table.

<th>..</th>

Used to generate a header data cell in table.

<td>..</td>

Used to generate a data cell in table.

<caption>..<caption>

Descriptive title of table content is placed inside this tag

<colgroup>..</colgroup>

Used for grouping columns for formatting purpose.

<col>..</col>

Placed inside the <colgroup> and denotes a single column of information inside the column group.

<tbody>..</tbody>

Used for grouping the table body content.

<thead>..</thead>

Used for grouping header content of table.

<tfooter>..</tfooter>

Used for grouping footer content of table.

Lists

<ul>...</ul>

ul stands for unordered List which is used to group a set of related items, in no particular order.

<li>...<li>

This specifies the individual content Items of the list.

list-style-type=””

This is used to specify the list item marker which could be “disc”,”circle”,”square” or “none”

<ol>

Ordered List Used to group a set of related items, in a specific order. Same li tag is used for defining list items

type=””

This attribute is used to specify the ordered list marker which could be “1”(numbers),”"A"(uppercase letters),"a"( lowercase letters),"I"(uppercase roman numbers),"i" (lowercase roman numbers).

<dl></dl>

dl stands for definition list which is used to display a list of terms and their descriptions.

<dt></dt>

This specifies the individual Item of the list.

<dd></dd>

Contains the related description of item.

Iframes

<iframe></iframe>

An iframe is used to display a web page within a web page. And it can also handle multimedia objects. You can add a YouTube video and can set  its height, width, autoplay, and many more properties.

src=””

specifies the URL (web address) of the inline frame page or some or you can point to Video url.

name=””

Name of the iframe

width=””

Sets the width of iframe

height=””

Sets the height of iframe

Embed

<embed>..</embed>

This is a container element for external application or interactive content like flash video. It has similar properties as iframe like src, width, height.  

type=”<mediatype>”

Specifies the media type of the embedded content

Form

<form></form>

Root element to generate form which includes variety of elements to collect the user input. Attributes of the form decides the operational behaviour of

name=”<value>”

To give a unique identifying name to form.

action=””

method or url location where the form data entered will be passed after submission.

method=””

Specify the type of Http submission process with verbs like ‘GET’, ‘POST’ etc.

target=””

Used to specify the location where the response after form submission will be displayed. It comes with options _blank,_parent, _top, _self.

enctype=” ”

Specifies the type of encoding scheme in which the data will be submitted.

novalidate

Specifies that the browser should not validate the form.

autocomplete

Provides the form with capability to set the autocomplete feature on or off.

accept-charset

Specifies the acceptable character set encoding for the form submission.

Form elements

<input>..<input>

Used to generate the field to receive input from users. There are variety of input controls which are defined by the type attribute.

type=””

Type attribute specifies the type of input control to be created which could be text, submit button,reset button,radio button, checkbox,color,date,datetime-local,email,month, number,range, search, tel,time,url and week.

name=””

Used to specify name of the input element for identification.

value=””

The value attribute specifies the initial value for an input field:

placeholder=””

specifies a hint  that describes the expected value of an input field (a sample value or a short description of the format).

maxlength=””

The maxlength attribute specifies the maximum allowed length for the input field:

size

The size attribute specifies the size (in characters) for the input field:

step

The step attribute specifies the legal number intervals for an <input> element.

autofocus

It is  a Boolean attribute which enables a field automatically focused when a webpage loads.

required

The required attribute specifies that an input field must be filled out before submitting the form.Works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

disabled

The disabled attribute specifies that the input field is unclickable and its value will not be sent when form will be submitted.

pattern

The pattern attribute is a validation attribute to check  <input> element against supplied regular expression

readonly

This attribute specifies that the input field is read only (cannot be changed):

min=””

Restricts the  <input> element for minimum acceptable value.Works with the input types: number, range, date, datetime-local, month, time and week.  

max=””

Restricts the  <input> element for minimum acceptable value. This is also applicable to input elements specified for max attribute.  

multiple

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element. Applicable to input types: email, and file.

list

This attribute contains the id of the datalist element used for providing autocomplete features.

<label>..</label>

Static informational text is added to indicate the purpose of  form control element to help user enter or select related information.

<fieldset>.</fieldset>

Used To provide arrangement of related form elements into groups.  

<lagend>..</lagend>

Used to provide group caption to the fieldset containing related elements.

<textarea>..

</textarea>

defines a multi-line input field (a text area):

rows=”value”

specifies the visible number of lines in a text area.

cols=”value”

specifies the visible width of a text area.

<select>..</select>

Used to generate a drop down list with pre-defined options.

<option>..</option>

Used to create items for the <select> dropdown

<optgroup>..

<optgroup>

Used to generate groups for set of related options inside dropdown

<datalist>.</datalist>

Provides autocomplete feature for input controls from fixed set of options

<output>..</output>

Indicates the result of a calculation

<button>..</button>

A clickable element for user to perform specific operations.

 

Graphics

Canvas

  • This element is used to draw graphics, on the fly, via JavaScript.Canvas has several methods for drawing paths, boxes, circles, text, and adding images. It can also be used to combine photos and creating animations

<canvas id=””>..</canvas>

Creates a fixed-size drawing surface in rectangular shape on an HTML page that exposes one or more rendering contexts. By default, a canvas has no border and no content. Id attribute is used for accessing the element for using in javascript.

width=””

defines the width of the canvas area

height=””

defines the height of the canvas area.

var element= document.getElementById("myCanvas");

Fetches the element at the client side script for manipulation.

var ctx = element.getContext("2d");

Gets the current drawing instance of the canvus element which returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. Different context events are available that can be used to draw lines , circles, gradients, patterns, shadows, using images  etc.

Some of the basic drawing context events

Line drawing methods and properties

  • Can be used to draw simple lines, and can also be used to generate triangles , rectangles from multiple lines.

beginPath()

This method resets the current path.

closePath()

This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

moveTo(x,y)

This method is used to define the starting point of the line..

lineTo(x,y)

This method is used to define the end point of the line, connects to the previous point by a straight line.

stroke()

This method strokes is used to draw the straight line between the specified start point and end point with the current stroke style.

fill()

This method fills the area with the current fill style while generating shapes of triangles etc. from lines .

lineWidth

This property returns the current line width and can be set, to change the line width.

lineJoin

This property returns the current line join style and can be set, to change the line join style. The possible line join styles are bevel, round, andmiter.

Rectangle drawing events and properties

fillRect( x,y,width,height)

This method draws a filled rectangle.

strokeRect( x,y,width,height)

This method draws a rectangular outline.

clearRect( x,y,width,height)

This method clears the specified area and makes it fully transparent

Arcs/Circle drawing events and properties

stroke(),beginPath(), closePath(),fill(), moveTo(x, y)

Similar to events specified for drawing lines

arc(x, y, r, start_angle, end_angle, anticlockwise)

Used to draw arc on the drawing surface with x, y values for setting the center position of arc and , r as radius ,arc start position is specified by the argument start angle w.r.t x-axis and end position by the argument end angle. Complete circle can be drawn using arc method by specifying the start angle as 0 and end angle as 2*Math.PI. Direction of drawing line can be specified by setting value to true/false for anticlockwise direction.

Text drawing events and properties

font

This property returns the current font settings and can be set, to change the font.

textAlign

This property returns the current text alignment settings and can be set, to change the alignment. The possible values are start, end, left, right, and center.

fillText( text, x, y, max-width)

This property draws the filled text at the given position indicated by the given coordinates x and y. The text looks like bold font.Optional max-width attribute can be set, within which text should text. This Makes the text shrink if max-width is less than original space occupied by the text.

strokeText(text, x, y, max-width )

This property strokes the text at the given position indicated by the given coordinates x and y, Text appears unfilled.

Gradient Generation

addColorStop(

offset, color)

method adds a new color stop, defined by an offset and a color, to a given canvas gradient.Offset is a number between 0 and 1, inclusive, representing the position of the color stop between the start and end position of gradient.color is a css color value of the stop position.This method used together with createLinearGradient() or createRadialGradient(). This method can be used multiple times to change the gradient.

createLinearGradient(x0, y0, x1, y1)

This method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments repre


*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students." 

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree