HTML
<!DOCTYPE html>
HTML DOCTYPE declaration of standards compliance. An instruction to the web browser about what version of HTML the page is written in. It is the first thing in any HTML document and required for all HTML pages. Note: It is *not* a tag.
<strong>
HTML element and phrase tag for adding emphasis, typically by bolding text (use stylesheets).
<em>
HTML element and phrase tag for adding emphasis, typically italics (use stylesheets).
<code>
HTML element and phrase tag for defining a piece of code.
.\
In a relative link, indicates that path starts in current directory.
<textarea>
Represents multi-line input. Holds unlimited number of characters, rendered in fixed-width font. Use cols and rows attributes, or CSS, to control its width and height.
comment
Represents textual notations within markup which are generally not visually shown. Available to be read in the source view. In HTML and XML as content between '<!--' and '-->'. (In XML, the character sequence '--' cannot be used within a comment.)
<html>
Root element of an HTML document, which wraps, or includes all the pieces, the document.
<select>
Used with <option> tags to create a drop-down list.
<option>
Used with <select>, provides an option for a drop-down list. Use "selected" within the tag to make it the default selection. Example: <select name="dropDown"> <______ value="item1" selected>Item 1</______> <______ value="item2">Item 2</______> <______ value="item3">Item 3</______> </select>
range overflow
Validation rule that evaluates to true if a range value is greater than the max value of the range element.
pica
1) A unit of type size and line length equal to 12 points (about 1/6 inch or 4.2 mm). 2) A size of letter in typewriting, with 10 characters to the inch (about 3.9 to the centimeter).
semantic elements
<article> <footer> <nav> <aside> <header> <section> <details> <main> <summary> <figcaption> <mark> <time> <figure>
css link
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
table structure
<table summary="""> <caption> </caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody> </table>
relative link
A link in which the URI is relative to the current document. (Remember, the <base> element will affect how this works.)
absolute link
A link that includes a complete URI.
root em
A measurement relative to the default browser font-size, which is 16 pixels in most browsers. 16 pixels is pretty small, particularly for high-resolution devices. Set the font-size slightly above 100% of the default to make text more legible on all devices.
viewport
A meta tag that indicates how the browser should render the content of the page on a device's virtual window.
<output>
A semantic tag for containing the results of a calculation.
em
A unit of relative measurement for calculating the size of an element. Root ems (rems) represent the font-size of the root element, such as the <html> element. 2 em is twice the baseline; .8 em is 80% of the baseline. Alternate definitions: A unit for measuring the width of printed matter, equal to the height of the type size being used. A unit of measurement equal to twelve points.
hypertext transfer protocol
Abbreviated HTTP, an application protocol for distributed, collaborative, and hypermedia information systems. It's the foundation of data communication for the World Wide Web.
uniform resource indicator
Abbreviated URI, an address for a particular resource on the Internet.
uniform resource locator
Abbreviated URL, an address for a particular resource on the Internet.
point
Abbreviated pt, a measurement representing 1/72 of an inch.
content delivery network
Abbreviated, CDN, this gives developers the opportunity to link to files that may already have been downloaded into the user's cache.
vertical-align
Aligns table-cell or inline content, vertically.
css selector
Allows you to retrieve specific HTML elements and apply styles to them. Examples: .class #id a:hover
<source>
An anchor tag that links to a resource (includes href attribute). The type attribute tells the browser what type of file it is.
named anchor
An anchor tag that marks a target on a web page. Accessible as url/#anchorTag.
fallback
An implementation you can fall back to when users lack a plugin necessary to view your page. You can use text and images, or next an alternate object. Usually implement with a different API than what's found in the browser.
data
An object attribute that tells the browser what type of data it is.
type
An object attribute that tells the browser what type of object it is.
<a>
Anchor tag, which can be used to mark a target ("named anchor") or link out to a resource ("source," requires href attribute) .
RGB color model
Colors can be displayed as hexadecimals (like #FFFFFF) or using rgb(#,#,#), where # respectively represents red, green, and blue with a value range of 0-255.
inline elements
Container element for text and other ______ elements. They don't create more vertical space unless necessary. You can't set the width of these elements; they'll be just wide enough to accommodate their content.
block elements
Container elements for grouping, which may contain other block and line elements. They sit on top of each other and display on a separate line. Examples include <p> and <blockquote>.
<form>
Element for a web form.
<object>
Element for displaying objects, e.g., Silverlight or Flash objects, or Java Applets.
<img>
Element tag for images. Images can be used as content, as well as for layout and the user interface. Format: <img src="fileName.ext" alt="altText" width="##" height="##"> Does not require a closing tag.
<datalist>
Element that allows you to define a list of options that will be shown in a data-input field. Syntax: <input type="text" list="colors"> <datalist id="colors"> <option src="blue"> <option src="red"> </datalist>
<math>
Element that allows you to define equations and formulae, and display them on the page as expected.
<param>
Element that allows you to specify a parameter name and value (path) of an object, or to alter parameters of an object. Examples: <param name="source" value="TextMessage=./URI"> <param name="initParams" value="TextMessage=Your Text Message">
<section>
Element that contains a logical grouping of content in a document. Prior to HTML 5, divs were used. Now, divs are used to group elements for styling, only.
<figcaption>
Element that defines a caption for a <figure> element
<time>
Element that defines a date/time. You can specify just the time, just the date, or a specific date/time. May include the optional pubdate attribute.
<summary>
Element that defines a visible heading for a <details> element
<details>
Element that defines additional details that the user can view or hide
<aside>
Element that defines content aside from the page content
<mark>
Element that defines marked/highlighted text
<nav>
Element that defines navigation links
<script>
Element that executes inline JavaScript or refers to an external .js file. Example: <______ src="dir/filename.js"></______>
<header>
Element that specifies a header for a document or section
<article>
Element that specifies independent, self-contained content that would make sense on its own, such as a forum- or blog post, or a newspaper article.
<figure>
Element that specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<main>
Element that specifies the main content of a document
<meter>
Element that visually displays a value between a threshold of values. Attributes include min, max, and value.
<progress>
Element that visually displays progress in an application's process. Attributes include max and value.
autofocus
Form attribute that highlights a given field when the page loads.
novalidate
Form attribute that lets you skip validation rules when submitting the form (as you might for a search box).
placeholder
Form input attribute that allows you to specify placeholder text for a form field.
type
Form input attribute that specifies the type of input element to display, e.g., text, password, button, radio, or checkbox. If no type is specified, the default is text.
number
Form input type value that includes a spinner (desktop) or custom keyboard (mobile) for entering numbers. Syntax: <input type="number" />
search
Form input type value that includes a text box with an [x] on the right side, for clearing the contents. Syntax: <input type="_____" />
color
Form input type value that lets you include a color picker. Syntax: <input type="_____" />
datetime
Form input type value that lets you include a date picker. Syntax: <input type="________" />
datetime-local
Form input type value that lets you include a date-time picker for the user's time zone. Syntax: <input type="_______-_____ value="2018-07-02T20:51:00" />
range
Form input type value that lets you include a slider, as well as control start, stop, and increment values. Syntax: <input type="_____" />
month
Form input type value that optimizes the user's interface for month entry. Default-value syntax: <input type="______" value="2018-06" />
time
Form input type value that optimizes the user's interface for selecting a time. Syntax: <input type="____" />
week
Form input type value that optimizes the user's interface for selecting a week. Syntax: <input type="____" value="2018-W25" />
url
Form input type value that optimizes the user's mobile keyboard for Web-address entry. Syntax: <input type="___" />
Form input type value that optimizes the user's mobile keyboard for e-mail entry. Syntax: <input type="_____" />
tel
Form input type value that optimizes the user's mobile keyboard for telephone-number entry. Syntax: <input type="___" />
textarea
Form tag that allows user to provide multiple lines of input. Size can be determined by columns and rows, or by CSS height and width properties.
<var>
HTML element and phrase tag for defining a variable.
<kbd>
HTML element and phrase tag for defining keyboard input.
<samp>
HTML element and phrase tag for defining sample output from a computer program.
<hr />
HTML element for adding a horizontal rule.
<br />
HTML element for adding a line break.
<abbr>
HTML element for an abbreviation. The global attribute, "title," allows you to provide the expanded text as an attribute.
<acronym>
HTML element for an acronym. The global attribute, "title," allows you to provide the expanded text as an attribute.
<cite>
HTML element for citations, typically rendered as italicized text.
<dd>
HTML element for definition definition, usually indented by browsers.
<dl>
HTML element for definition list.
<dt>
HTML element for definition term.
<pre>
HTML element for preformatted text. It displays text in a fixed-width font and preserves both spaces and line breaks.
<sub>
HTML element for subscript.
<sup>
HTML element for superscript.
<td>
HTML element for table cells ("table data").
<tbody>
HTML element for table content.
<tfoot>
HTML element for table footer (usually for totals or column summaries). IMPORTANT: Place this element before <tbody>; this enables the browser to see the table structure before processing all the content. Where this is useful: Some browsers will show the header and footer, and allow you to scroll through the data, in between.
<thead>
HTML element for table header row (usually used for column headers).
<tr>
HTML element for table row.
<caption>
HTML element for table title.
<th>
HTML element for table-head cell.
<table>
HTML element for tables.
<blockquote>
HTML element that defines (usually) multiline content quoted from another source. Browsers usually indent text contained in this element. The "cite" attribute allows you to specify the source, in the form of a URL.
<q>
HTML element that defines inline content quoted from another source. Browsers usually place quote marks around the text contained in this element. The "cite" attribute allows you to specify the source, in the form of a URL.
<body>
HTML element used to section off document data that's displayed to users by the client browser.
<head>
HTML element used to section off document metadata (data that doesn't get directly displayed to the screen) used by browsers and search engines and to link to external style sheets or JavaScript pages.
<base>
Head element defining the base address for all relative links on the page.
<title>
Head element indicating the title of the document.
<style>
Head element that defines styles to apply to body elements.
<meta>
Head element that includes metadata, such as keywords.
<link>
Head-element directive indicating related documents, such as CSS files.
<embed>
Host container for external plugins. The current state of Web development encourages the use of native APIs to the extent possible, so this isn't used very often.
HTML
Hypertext Markup Language. ____ tags are the building blocks of a web page. They define how your web browser must format and display the content. Most tags occur in pairs using an opening tag and closing tag.
alt
Image attribute that specifies alt text for an image.
src
Image attribute that specifies the image URI.
height
Image or object attribute that specifies the image height.
width
Image or object attribute that specifies the image width.
polyfill
In contrast with a fallback, this provides exactly the same interface and functionality as the implementation build into the browser. Once browser support is ubiquitous, you can remove it from your page (theoretically; testing is recommended).
charset
Meta attribute that specifies page encoding.
tag
Names an element with angle brackets <>. An end ___ closes an opening ___ and has a forward slash after the first angle bracket (e.g. </div>).
<legend>
Optional tag, used with <fieldset>, to name grouped elements in a form.
attributes
Provide additional information about an element. Usually come in name="value" pairs.
refactoring
Restructuring existing computer code—changing the factoring—without changing its external behavior. Improves nonfunctional attributes of the software, such as code readability and simplicity. This can improve source-code maintainability and create a more expressive internal architecture or object model to improve extensibility.
<input>
Specifies an input field where the user can enter data. Does not use closing tag. Since <input> fields don't have a height tag, you need to use the font-size and padding to manage their height. See w3schools for all attributes.
cellpadding
Table attribute that allows you to control padding between the cell content and cell borders.
cellspacing
Table attribute that allows you to control spacing between cells.
width
Table attribute that allows you to control the table width, using a percentage (="##%") or pixels (="##px").
border
Table attribute that allows you to control the table--but not the cell--border size.
summary
Table attribute that shows a summary of the table's contents and can be used to enhance usability.
colspan
Table attribute, used in the <td> tag, which specifies the number of columns cell data should span.
rowspan
Table attribute, used in the <th> or <td> tag, which specifies the number of rows cell data should span.
<bdi>
Tag for bi-directional isolation of an element. This tag isolates a part of text that might be formatted in a different direction from other text outside it. This element is useful when embedding user-generated content with an unknown directionality.
<audio>
Tag for including audio in a web page. Supports MP3, Wav, and Ogg formats.
<video>
Tag for including video in a web page. Supports MP4, WebM, and Ogg formats. Attributes include "width", "height", "controls", "source", and "track". Track properties include "kind", "label", "src", and "srclang".
<canvas>
Tag that allows you to draw on the page.
<label>
Tag that defines a label for an input element. Attributes: for: element_id specifies which form element it's bound to (the element ID should match). form: form_id specifies one or more forms to which it belongs.
<wbr>
Tag that tells browsers where to hyphenate a word. Example: Supercalifragilistic<wbr>expialidocious
<h1>
Tag that was once reserved for the main page heading, but is now conventionally used as the main heading for containers, e.g., <article>, as well.
character entities
Tells the browser to render a specific character. Often used to specify a character when it would otherwise be interpreted as markup. Examples: - - < - >
element
The building block of HTML pages, it's represented by tags. It may contain a data item, a chunk of text, an image, or perhaps nothing. A typical _______ includes an opening tag with some attributes, enclosed text content, and a closing tag:
nesting
The practice of placing "child", or descendant block elements on a new line and indenting them, for readability. (Inline tags should not be placed on their own line.)
International Electrotechnical Commision
This organization, abbreviated IEC, provides international standards and conformity assessment for all electrical, electronic and related technologies.
International Organiztion for Standardization
This organization, abbreviated ISO, develops and publishes international standards, such as HTML.
World Wide Web Consortium
This organization, abbreviated W3C, is an international community that develops open standards to ensure the long-term growth of the Web.
Web Hypertext Application Technology Working Group
This organization, abbreviated WHATWG, led the effort to update the HTML standard in 2004 and has since been maintaining and evolving it.
pubdate
Time element attribute which, when present, acts as a timestamp for the publication date of a web page.
*
Universal selector. It selects all of the elements on a page and applies styles to them. Generally, it performs poorly on larger web pages, so be careful with how and when you use it.
<fieldset>
Used to group inputs and labels in a form.
pattern mismatch
Validation rule that evaluates to true if the input value doesn't match the regular expression defined in the pattern attribute.
type mismatch
Validation rule that evaluates to true if the input value doesn't match the type defined by the element's type value.
too long
Validation rule that evaluates to true if the input value is longer than the maxlength value set in the input element.
value missing
Validation rule that evaluates to true if the input value of a required field is empty (required value=" ").
range underflow
Validation rule that evaluates to true if the range value is smaller than the min attribute.
step mismatch
Validation rule that evaluates to true if the range value isn't possible in light of the step (increment) value defined for the range.
valid
Validation rule that evaluates to true when all other validation rules return false.
width=device-width
Value for meta content. Sets the width of the viewport to conform to the width of the device viewing the page.
initial-scale=1
Value for meta content. Sets the zoom level of the page when it's loaded. With a value of 1, the content remains unscaled. It is rendered as is, based on the CSS rules.
