HTML5 Icon HyperText Markup Language Language of the Web

HyperText Markup Language (HTML) is the primary language for coding information into a web page. More details about its usage and history can be found on this page. Reference information for HTML can be found at the Mozilla Developer Network. Browser compatibility information for HTML can be found at Quirks Mode.

Input Controls User Inputs to Web Page

Drop down lists are created with <select> tag and text areas are created with <textarea> tag. The <input> tag can create buttons and a variety of text boxes based on the type= attribute. The <label> tag causes clicking the text to put the focus on the field and can toggle the values for check boxes and radio buttons.





<label for="selBkImage">Drop down list is created with select statement.</label> 
<select id="selBkImage" style="margin: 5px 0 0 0" onChange="changeBackground(this);">
   <option value="0">Optical Gray</option>
   <option value="1">Pattern Gray</option>
   <option value="2">Cloth Gray</option>
   <option value="3">Marble Gray</option>
</select>






<label for="comments">Text area is created with textarea statement.</label><br>
   <textarea id="comments" rows="3" cols="40">Default text area text.
</textarea>


Radio buttons are created with the input/button statement.

Search Option


<fieldset>
   <legend align="center"><b>Search Option</b></legend>

   <input id="yes_search" type="radio" name="searchoption" onchange="disablesearch()" checked></input>
   <label for="yes_search">Display Search Options</label><br>

   <input id="no_search" type="radio" name="searchoption" onchange="disablesearch()"></input>
   <label for="no_search">No Search - Show all Photos</label><br>
</fieldset>


Checkboxes are created with the input/checkbox statement.

Save Settings


<fieldset>
   <legend align="center"><b>Save Settings</b></legend>
   <input type="checkbox" name=ssave id="ssession" value="ssession" checked />
   <label for="ssession">This Session Only</label><br> 
   <input type="checkbox" name=ssave id="fsession" value="fsession" checked />
   <label for="fsession">Future Sessions</label><br>
</fieldset>


Text boxes are created with the input/text statement.

First name:

First name: <input type="text" name="firstname">



Buttons can be created with the input/button statement.



<input type="button" value="Click Me" onClick="alert('You clicked me.')";>


Submit buttons are created with the input/submit statement. Clicking on the submit button fires the onsubmit event and sends the named contents of the form to the server.

Submit button - Example 1

First name:
Last name:
Password:

<form action="getform.php" method="get">
   First name: <input type="text" name="firstname"><br>
   Last name: <input type="text" name="lastname"><br>
   E-mail: <input type="email" name="useremail"><br>
   Password: <input type="password" name="pwd"><br>
   <input type="submit" value="Submit">
</form>

Submit button - Example 2


<form method='get' action='filename.php' onsubmit='test();'>
   <input type='hidden' id='sql' name='sql'  />
   <input type='submit'  class='searchButton' value='Display Photos' style='padding: 10px' /
</form>


HTML5 Tag Definitions New Tags in HTML5
<!doctype>
The HTML5 <doctype> is specified as simply <!doctype html>. A Document Type Definition (DTD), also called a doctype, defines which version of (X)HTML was used to write the web page. This must be the first thing on your web page as it is telling the browser what type of document to expect.

<!doctype html> Specifies HTML5 was used to create the web page.
<abbr>
In HTML5 <acronym> is deprecated, so use <abbr> in its place. The abbr tag is used to define an acronym or an abbreviation, such as W3C.

<abbr title="World Wide Web Consortium">W3C</abbr> Shows the full words for the abbreviation on mouse over.
<audio>
In HTML5 the audio tag allows for the playing of audio files. The browser support for audio files is:

Note: Safari requires QuickTime to support HTML5 media.
Browser MP3 Ogg Wav
Chrome 6+ Yes Yes Yes
Firefox 3.6+ No Yes Yes
Internet Explorer 9+ Yes No No
Opera 10+ No Yes Yes
Safari 5+ Yes No Yes

<audio controls>
  <source src="audio/filename.mp3" type="audio/mpeg">
  <source src="audio/filename.ogg" type="audio/ogg">
  HTML5 audio is not supported by this browser.
</audio>
<span>Credit: Music by </span>


Displays the controls that allow audio to be played. Try it below:


Credit: Music by
<aside>
Defines content usually location to the side of other content.

<aside>
  This is for content to be display beside the main content.
</aside>


<canvas>
An area for drawing graphics with a script.   <canvas id="playerCanvas" width="200" height="88"></canvas>
<embed>
Defines a container for external applications such as a plugin.

<embed src="filename.swf">

<figcaption>
Defines a caption for a figure element.

<figcaption>Fig1. - A jQuery Screen Capture.</figcaption>

<figure>
Defines self-contained content such as photos and diagrams.

<figure>
  <img src="image1.png" alt="Picture of Holly" width="430" height="298">
</figure>

<footer>
Defines a section for information about the document such as copyright and terms of use.

<footer>
  <span id="appname">Kevin's Notepad</span>
</footer>
<header>
Defines a section for introductory content. Can also be used for navigational links.

<header>
   <h1>Internet Explorer 10</h1>
</header>

<keygen>
Specifies a key-pair generator field used for encryption when submitting forms.

<keygen name="encrypt">

<mark>
Used to highlight parts of text.

<mark>Soon!</mark>

<nav>
Defines a major block of navigational links.progress - Defines a progress graphic (Not supported in IE9 and earlier)

<nav>
  <a href="html.htm">HTML5</a> |
  <a href="css.htm">CSS3</a> |
  <a href="js.htm">JavaScript</a> |
  <a href="jquery.htm">jQuery</a>
</nav>

<section>
Defines a section in a document such as chapters

<section>
  <h1>Chapter 2</h1>
  <p>The most important ...</p>
</section>

<source>
Used to define media resources for media elements

<source src="misty.mp3" type="audio/mpeg">

<video>
Specifies a video stream

<video width="400" height="300" controls>
  <source src="movie1.mp4" type="video/mp4">
  <source src="movie1.ogg" type="video/ogg">
  Video is not supported by your browser..
</video>

Video Support by Browser
Browser MP4 Ogg WebM
Chrome 6+ Yes Yes Yes
Firefox 3.6+ No Yes Yes
Internet Explorer 9+ Yes No No
Opera 10+ No Yes Yes
Safari 5+ Yes No No
<wbr>
Word Break Opportunity. Specifies places where line breaks would be acceptable.

ubiq<wbr>uitously
HTML5 Attribute Descriptions
accesskey
accesskey="1" Creates a keyboard shortcut to activate or focus an element. For the PC use the <alt> key. For Mac use the <ctrl> key.
alt
alt="text" Specifies the text to display if the associated image is not able to display.
autoplay
<audio controls autoplay> Will cause the audio to play as soon as it is loaded.
contenteditable
contenteditable="value" Defines if an element can be edited by the user.

Contenteditable Values
Value Meaning
true The element can be edited.
false The element can not be edited.
inherit Ability to be edited depends on parent.
controls
<audio controls autoplay> This causes the audio controls to be displayed.
coords
shape="rect" coords="0,0,67,32" Specifies coordinates of rectangular region relative to top left corner (x1,y1,x2,y2).
shape="circle" coords="90,58,3" Specifies coordinates of circular region relative to the center of the circle. (x,y,radius).
hidden
hidden The hidden attribute will stop the element from displaying. The hidden attribute is not supported in IE.
href
href="#ahref" References a point on the current web page.
href="http://www.google.com" References an external web page.
id
id="idName" Used to uniquely identify a particular element (#idName).
loop
<audio controls loop> Causes the audio to continuously play in a loop.
shape
shape="rect" coords="0,0,67,32" Specifies a rectangular region of an image map.
shape="circle" coords="90,58,3" Specifies a circular region of an image map.
src
<source src="audio/time.mp3" type="audio/mpeg"> Specifies the file name of the audio file.
style
style="text-align:center; color:red" Used to specify inline styling for an element. This will override any style set at a higher level (e.g. in a Cascading Style Sheet).
tabindex
tabindex="1" Indicates the order fields receive focus when using the tab key for navigation.
target
target="targetName" Indicates how the linked document will be opened.

Target Values
targetName How the Linked Document is Opened
_blank Opens in a new window.
_self Opens in the same frame (default).
_parent Opens in the parent frame.
_blank Opens in the full body of the window.
framename Opens in a named frame.
title
title="Additional Information" Used to display extra information in the title bar (<head>) or on mouse over (<a>).


Top | Input Controls | Tag Definitions | Attribute Descriptions