Web Design: HTML Tags

HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML5

1991 1995 1997 1999 2000 2014 HTML 5 most updated version, some tags have been deprecated, but they will still work, however it is not good practice.

<a> </a>

<a href="linkgoeshere"></a>

<audio> </audio>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

<embed/>

<embed width="400" height="50" src="bookmark.swf">

An HTML <form> element, with all possible attributes set, will look like this

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form>

method attribute specifies the HTTP method (GET or POST) to be used when submitting the form

<form action="action_page.php" method="get"> <form action="action_page.php" method="post">

The action attribute defines the action to be performed when the form is submitted.

<form action="action_page.php">

The <fieldset> element groups related data in a form.

<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form>

<h1></h1>

Beginning and closing tags for a header (size #1),largest heading

name(form attribute)

Specifies a name used to identify the form (for DOM usage: document.forms.name).

action(form attribute)

Specifies an address (url) where to submit the form (default: the submitting page).

autocomplete(form attribute)

Specifies if the browser should autocomplete the form (default: on).

novalidate(form attribute)

Specifies that the browser should not validate the form.

method(form attribute)

Specifies the HTTP method used when submitting the form (default: GET).

accept-charset(form attribute)

Specifies the charset used in the submitted form (default: the page charset).

enctype(form attribute)

Specifies the encoding of the submitted data (default: is url-encoded).

target(form attribute)

Specifies the target of the address in the action attribute (default: _self).

<!-- HTML Comments -->

when you make notes in code that will not show on webpage

<input type="submit"> defines a button for submitting a form to a form-handler.

<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>

To be submitted correctly, each input field must have a name attribute

<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>

<input type="radio"> defines a radio button.

<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>

<input type="text"> defines a one-line input field for text input:

<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>

The <form> element defines an HTML form

<form> . form elements . </form>

<iframe></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"> </iframe>

<img />

<img src-"linkgoeshere"/>

- Example 4 - Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example 3 - Define the author of a page:

<meta name="author" content="Hege Refsnes">

- Example 2 - Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML and CSS">

- Example 1 - Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<th> </th>

<th colspan="3">table heading, can use colspan attribute to make heading go across multiple columns

<video> </video>

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

Sound Formats

MIDI .mid .midi MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. RealAudio .rm .ram RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers. AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5. Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers.

mp4

MP4 is the new and upcoming format for internet video. MP4 is recommended by YouTube. MP4 is supported by Flash Players. MP4 is supported by HTML5.

Other Video Formats

MPEG .mpg .mpeg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4). AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4) RealVideo.rm .ram RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers. Flash .swf .flv Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5. MPEG-4 or MP4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.

You should use POST: If the form is updating data, or includes sensitive information (password).

POST offers better security because the submitted data is not visible in the page address

<legend></legend>

The <legend> element defines a caption for the <fieldset> element

<object></object>

The <object> element is supported by all browsers. The <object> element defines an embedded object within an HTML document. It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.

You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information.

action_page.php?firstname=Mickey&lastname=Mouse

<h2></h2>

beginning and closing tags for a header (size #2)

<h3></h3>

beginning and closing tags for a header (size #3)

<h4></h4>

beginning and closing tags for a header (size #4)

<h5></h5>

beginning and closing tags for a header (size #5)

<h6> </h6>

beginning and closing tags for a header (size #6), smallest heading

<p></p>

beginning and closing tags for a paragraph, any text

<body></body>

beginning and closing tags for the body, everything you want to show on the webpage goes between these tags

<head></head>

beginning and closing tags for the header, is not seen in the webpage but stores information about the page

<title></title>

beginning and closing tags for the title, always put in the head, title shows in browser tab

<strong> </strong>

bold

<dl> </dl>

definition list

<dd> </dd>

definition of the term, goes directly below <dt></dt>

<html></html>

goes around all html code, <html> comes after <!DOCTYPE html>,</html is at the very end

<table> </table>

goes around entire table

<td> </td>

goes inside table rows. ex. 3 <td> tags in one <tr> tag would be 3 columns in the same row

<hr/>

horizontal rule, visible line in between items

HTML forms contain form elements

input elements, checkboxes, radio buttons, submit buttons, and more

Other

© &#169; &copy; COPYRIGHT SIGN ® &#174; &reg; REGISTERED SIGN € &#8364; &euro; EURO SIGN ™ &#8482; &trade; TRADEMARK ← &#8592; &larr; LEFTWARDS ARROW ↑ &#8593; &uarr; UPWARDS ARROW → &#8594; &rarr; RIGHTWARDS ARROW ↓ &#8595; &darr; DOWNWARDS ARROW ♠ &#9824; &spades; BLACK SPADE SUIT ♣ &#9827; &clubs; BLACK CLUB SUIT ♥ &#9829; &hearts; BLACK HEART SUIT ♦ &#9830; &diams; BLACK DIAMOND SUIT

Marks

̀a a&#768; à ́ a a&#769; á ̂ a a&#770; â ̃ a a&#771; ã ̀ O O&#768; Ò ́ O O&#769; Ó ̂ O O&#770; Ô ̃ O O&#771; Õ

<em> </em>

italics

<br/>

line break, blank line between items

<li> </li>

line item of a list

Entities

non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; € euro &euro; &#8364; © copyright &copy; &#169; ® registered trademark &reg; &#174;

<ol> </ol>

ordered or numbered list

<meta>

provides metadata about the HTML document

<thead> </thead>

put headings and subheadings in <thead>

<tbody> </tbody>

put table contents

<tr> </tr>

row

index.html

should be the file name of your homepage

Attributes

src, href

<!DOCTYPE html>

starts every html document

<dt> </dt>

terms of a definition list

<ul> </ul>

unordered or bulleted list

<div> </div>

used to separate sections of a page

Greek

Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA Β &#914; &Beta; GREEK CAPITAL LETTER BETA Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA

Math

∀ &#8704; &forall; FOR ALL ∂ &#8706; &part; PARTIAL DIFFERENTIAL ∃ &#8707; &exist; THERE EXISTS ∅ &#8709; &empty; EMPTY SETS ∇ &#8711; &nabla; NABLA ∈ &#8712; &isin; ELEMENT OF ∉ &#8713; &notin; NOT AN ELEMENT OF ∋ &#8715; &ni; CONTAINS AS MEMBER ∏ &#8719; &prod; N-ARY PRODUCT ∑ &#8721; &sum; N-ARY SUMMATION