HTML REVIEW
<form autocomplete="on" | "off"> ... </form>
Dictates whether a form should have autocomplete on or off.
<form novalidate> ... </form>
Dictates whether the form should not be validated when submitted.
<rt> ... </rt>
Displays East Asian typography character details.
<ul> ... </ul>
Displays a bulleted (unordered) list without any extra emphasis on order of importance.
<mark> ... </mark>
Displays a portion of highlighted text within the page content.
<rp> ... </rp>
Displays text within browswers that do not support ruby annotations.
<progress> ... </progress>
Displays the progress of a task, usually used for progress bar.
<strong> ... </strong>
Exactly like it sounds, indicating STRONG emphasis, discplayed bold in most browsers.
<img border="" />
Explains the border thickness (if any).
<element onreset="script">
<form onreset="myFunction()"> Enter name: <input type="text"> <input type="reset"> </form> <script> function myFunction() { alert("The form was reset"); } </script>
<input alt="">
<input type="image" src="submit.gif" alt="Submit" width="48"> -Only for forms with image as submit button.
<element oninvalid="script">
<input type="text" oninvalid="alert('Must contain 6 or more characters');" pattern=".{6,}">
<input type="number" name="points" step="3">
Adds a up and down ticker and shows the user that they must enter a number, in this case, that is a multiple of 3. Zero is allowed, as were negative numbers. <form action="/action_page.php"> <input type="number" name="points" step="3"> <input type="submit"> </form>
<code> ... </code>
Code text displays code snippets, tyipcally showing up monospaced.
<summary> ... </summary>
Contains a visible heading for a <details> element.
<ol> ... </ol>
Create numbered (ordered) lists showing sequential order, preference or priority.
<hr/>
Creates a horizontal rule, a sectional break in an HTML page. Typically used to denote a change in topic or section of a page.
<br/>
Creates a line break (or old-school carriage-return), useful for writing blocks of text that need to be on different lines (this addresses, etc).
<header> ... </header>
Defines the header block for a document (or individual section)
<dfn> ... </dfn>
Definition used to create an inline definition in the body text.
<img vspace="" />
Denotes spacing on top or on the bottom of an image.
<img hspace="" />
Denotes the spacing on the left or right of the image.
<details> ... </details>
Describes additional facts or information that the user can view or hide.
<main> ... </main>
Describes the main content of a document
<meter> ... </meter>
Describes the scalar measurement within a known array.
<meta/>
Meta data spells out additional information about the page, including the page's descsription, author, published date, keywords and other typically 'hidden' page information.
<map name=""> ... </map>
Name of the map associated between the image and the map.
<nav> ... </nav>
Navigation links for the user in a document.
<pre> ... </pre>
Pre-formatted, 'monospace' text laid out with whitespace inside the element intact.
<input accept="file_extension | audio/* | video/* | image/* | media_type">
Input Attribute Values: file-extension starting with the STOP character, e.g: .gif, .jpg, .png, .doc audio/* All sound files are accepted media_type A valid media type, with no parameters.
<cite> ... </cite>
Tags used to cite or reference information, useful for quotes and statemetns in a document.
<form target=""> ... </form>
Tells where to display the form response after being submitted, generally one of the following: <form target="_blank | _self | _parent | _top | framename"> _blank The response is displayed in a new window or tab _self The response is displayed in the same frame(default) ~~~~~~~~~~~~~~~MOSTLY UNUSED NOW _parent . The response is displayed in teh parent frame. _top The response is displayed in the full body fo the window framename The response is displayed in a named iframe.
<figcaption> ... </figcaption>
The <figure> element caption that helps describe the figure.
<base/>
The Base URL (for example: www.YourSite.com) is useful for specifying all relative links in a document (especially if you have many internal links).
<img height="" />
The ability to specify height in pixels or as a percentage.
<img width="" />
The ability to specify width in pixels or as a percentage.
<img align="" />
The alignment of the image (relative to other text elements on the page.
<form autofocus> ... </form>
The autofocus attribute is a boolean attribute. If present it specifies that an input should automatically get focus on page load.
<input autofocus> ... </input>
The autofocus attribute is a boolean attribute. If present it specifies that an input should automatically get focus on page load.
<input type="checkbox" checked>
The checked attribute is a boolean attribute. When present, it specifies that an <input> element should be pre-selected (checked) when the page loads. The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
<dt> ... </dt>
The definition of a single term inline with body content.
<dd> ... </dd>
The description for the defined term.
<element onmouseover | onmouseout="script">
onmouseover and onmouseout <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> <p>The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.</p> <p>The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.</p> <script> function bigImg(x) { x.style.height = "64px"; x.style.width = "64px"; } function normalImg(x) { x.style.height = "32px"; x.style.width = "32px"; } </script>
<dialog> ... </dialog>
A dialog box or window.
<div> ... </div>
A generic container used to denote a page section.
<address> ... </address>
A helpfully obvious that that displays the author's contact information.
<wbr>
A line break within the content.
<a href="mailto: "> ... </a>
A link used to pull up an outgoing message to a specific email address.
<a href="tel://###-####"> ... </a>
A linkt o make phone numbers cickalbe, especially useful for mobile users.
<label> ... </label>
A simple field label, telling the user what to enter in each field.
<abbr> ... </abbr>
Abbreviation - these help denote abbreviations, while also making the full form available.
<h1-h6> ... </h1...h6>
All six levels of Headings, with 1 being the most important on a page and 6 being the least. These elements are used to describe content sections on a page.
<img alt="text" />
Alternative that helps explain the image content to both search engines and users.
<a href="#name"> ... </a>
An anchor link that brings users specifically to a div element.
<a name="name"> ... </a>
An anchor that's useful for bringing user to specific document elements.
<img src="url" />
An image tag to include and display image files based on the source.
<figure> ... </figure>
An independent content block featuring diagrams, photos, illustrations or more.
<span> ... </span>
An inline section or block container, typically used for grouping styling elements.
<a href=""> ... </a>
Anchor text for hyperlink
<i> ... </i>
Another way to add italics to text, however without the added emphasis. In other words, visual only. Often used to denote thoughts or names.
<b> ... </b>
Another way to create bold text, however it's more for drawing attention as opposed to emphasizing extra emphasiss like the <strong> tag.
<input autocomplete="on" | "off">
Autocomplete enables the browser to predict the value...these are based on earlier typed values. Autocomplete works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
<body> ... </body>
Body tags include all content that will be shown to users, including everything they'll see and read.
<link/>
Can be used to create relationships with external pages or documents, including style sheets.
<del> ... </del>
Helps denote a previously deleted section of text.
<map> ... </map>
Helps you tell user sthat this is an interactive image with clickable areas.
<article> ... </article>
Identifies an article inside a document.
<form accept-charsets> ... </form>
Identifies the character encodings upon teh form submission.
<footer> ... </footer>
Identifies the footer block for the document (or individual section)
<fieldset> ... </fieldset>
Identifies the group of all field son the form.
<time> ... </time>
Identifies the time and date.
<ins> ... </ins>
Represents a section of text that's been inserted into the document.
<blockquote> ... </blockquote>
Reserved for long paragraphs of quotations, often cited.
<dl> ... </dl>
Reserved specificaly for the list items definitions.
<sub> ... </sub>
Shrinks text and places it a half line lower than the previous text.
<section> ... </section>
Specifies a section block in the document.
<aside> ... </aside>
Specifies content contained in a document sidebar.
<li> ... </li>
Specifies each list item to be bulleted or numbered.
<area />
Specifies the area of image map.
<input form="form_id">
Specifies the form element the <input> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.
<sup> ... </sup>
Superscript text shrinks text and places it a half line above previous text.
<input type="checkbox" disabled>
The disabled attribute is a boolean attribute. When present, it specifies that the <input> element should be disabled. A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable.
<em> .. </em>
The emphasis tags also are like they sound, emphasizing text or phrases displayed as italics in most browsers.
<form action="url"> ... </form>
The form action URL specifies where data is to be sent when a site visitor submits the form.
<form> ... </form>
The form element creates a form, spelling out how the form will create based on it's attributes.
<input />
The form input attribute defines the type of field information to receive from a user.
<legend> ... </legend>
The form legend acts as a caption for the fieldset element.
<input type="submit" formaction="/action_page2.php" value="Submit to another page">
The formaction attribute specifies the URL of the file that will process the input control when the form is submitted. The formaction attribute overrides the action attribute of the <form> element. Note: The formaction attribute is used with type="submit" and type="image". <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="/action_page2.php" value="Submit to another page"> </form>
<head> ... </head>
The head contains information about that specific page, including the title tags, meta data, and links to scripts and style sheets.
<input list="browsers">
The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
<input type="date" name="bday" max="1979-12-31">
The max attribute specifies the maximum value for an <input> element. Tip: Use the max attribute together with the min attribute to create a range of legal values. Note: The max and min attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week. <form action="/action_page.php"> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form>
<input type="text" name="usrname" maxlength="10">
The maxlength attribute specifies the maximum number of characters allowed in the <input> element. <form action="/action_page.php"> Username: <input type="text" name="usrname" maxlength="10"><br> <input type="submit" value="Submit"> </form>
<form method=""> ... </form>
The method attribute refers tot eh HTTP method (POST, GET, PUT, DELETE) which dictates how to send the form data.
<input type="file" name="img" multiple>
The multiple attribute is a boolean attribute. When present, it specifies that the user is allowed to enter more than one value in the <input> element. Note: The multiple attribute works with the following input types: email, and file. Tip: For <input type="file">: to select multiple files, hold down the CTRL or SHIFT key while selecting. Tip: For <input type="email">: separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field. <form action="/action_page.php"> Select images: <input type="file" name="img" multiple> <input type="submit"> </form>
<input type="text" name="fullname">
The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Note: Only form elements with a name attribute will have their values passed when submitting a form. <form action="/action_page.php"> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"><br> <input type="submit" value="Submit"> </form>
<element onblur="script">
The onblur attribute fires the moment that the element loses focus. Onblur is most often used with form validation code (e.g. when the user leaves a form field). Tip: The onblur attribute is the opposite of the onfocus attribute. ___ Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script>
<element oninput="script">
The oninput attribute fires when an element gets user input. The oninput attribute fires when the value of an <input> or <textarea> element is changed. Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements. __ <input type="text" oninput="myFunction()">
<element onkeypress="script">
The onkeypress attribute fires when the user presses a key (on the keyboard). Tip: The order of events related to the onkeypress event: 1. onkeydown 2. onkeypress 3. onkeyup Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use onkeydown instead, because it works for all keys. <input type="text" onkeypress="displayResult()"> Try it Yourself »
<element onload="script">
The onload attribute fires when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below). The onload attribute can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload attribute can also be used to deal with cookies (see "More Examples" below). <img src="w3html.gif" onload="loadImage()" width="100" height="132"> <script> function loadImage() { alert("Image is loaded"); } </script>
<element onsearch="script">
The onsearch attribute fires when a user presses the "ENTER" key or clicks the "x" button in an <input> element with type="search". <input type="search" onsearch="myFunction()">
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
The pattern attribute specifies a regular expression that the <input> element's value is checked against. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. <form action="/action_page.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form>
<input type="text" name="fname" placeholder="First name">
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password. <form action="/action_page.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="Submit"> </form>
<input type="text" name="country" value="Norway" readonly>
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable. <form action="/action_page.php"> Email: <input type="text" name="email"><br> Country: <input type="text" name="country" value="Norway" readonly><br> <input type="submit" value="Submit"> </form>
<input type="text" name="usrname" required>
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. <form action="/action_page.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form>
<script> ... </script>
The script element includes all scripting information, or links to external scripts. You can also include this element in the body to dynamically generate content.
<element onclick="script">
The script to be run on a click. <p id="demo" onclick="myFunction()">Click me to change my text color.</p> <script> function myFunction() { document.getElementById("demo").style.color = "red"; } </script>
<form onsubmit="script">
The script to be run onsubmit. <form onsubmit="myFunction()"> Enter name: <input type="text"> <input type="submit"> </form>
<input type="text" name="pin" maxlength="4" size="4">
The size attribute specifies the visible width, in characters, of an <input> element. Note: The size attribute works with the following input types: text, search, tel, url, email, and password. Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute. <form action="/action_page.php"> Email: <input type="text" name="email" size="35"><br> PIN: <input type="text" name="pin" maxlength="4" size="4"><br> <input type="submit" value="Submit"> </form>
<menuitem> ... </menuitem>
The specific menu item that a user can raise from a popup menu.
<style> ... </style>
The style element includes document style information, typically defaulting to CSS.
<html>...</html>
The tag shows up at the beginning and end of an HTML document (known as the root element). It indicates that the webpage is written in HTML5, and all other page markup comes in between these beginning and ending tags.
<title> ... </title>
The title tag is the title for that page, useful for both search engines (when they scan and index pages) and users (showing up in a browser's title bar) by explicitly stating the primary topic of each page.
<input type="text" name="fname" value="John">
The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: For "button", "reset", and "submit" - it defines the text on the button For "text", "password", and "hidden" - it defines the initial (default) value of the input field For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) Note: The value attribute cannot be used with <input type="file">. <form action="/action_page.php"> First name: <input type="text" name="fname" value="John"><br> Last name: <input type="text" name="lname" value="Doe"><br> <input type="submit" value="Submit form"> </form>
<q> ... </q>
These are used for shorter quotations
<form enctype=""> ... </form>
This attribute dictates how the form-data is to be encoded when submitting information back to the web server (for method="POST" only)
<p> ... </p>
This foundational tag is used to organize paragraphs of text.
<input type="value">
button Defines a clickable button (mostly used with a JavaScript to activate a script) checkbox Defines a checkbox color Defines a color picker date Defines a date control (year, month and day (no time)) datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) email Defines a field for an e-mail address file Defines a file-select field and a "Browse..." button (for file uploads) hidden Defines a hidden input field image Defines an image as the submit button month Defines a month and year control (no time zone) number Defines a field for entering a number password Defines a password field (characters are masked) radio Defines a radio button range Defines a control for entering a number whose exact value is not important (like a slider control). Default range is from 0 to 100 reset Defines a reset button (resets all form values to default values) search Defines a text field for entering a search string submit Defines a submit button tel Defines a field for entering a telephone number text Default. Defines a single-line text field (default width is 20 characters) time Defines a control for entering a time (no time zone) url Defines a field for entering a URL week Defines a week and year control (no time zone)