HTML Essential Training

 

Entity used to create an extra inline space

multiple

Form attribute that allows multiple values to be entered in a single text field, or multiple options to be selected in a <select> field

checked

Form attribute that defaults a form field to a checked value

method=""

Form attribute that defines how the data is submitted. Method="post" submits variables to the server, but they are not visible on the front end. Method="get" submits variables in the URL where they are visible. This method allows user to bookmark position/result for a form.

<input type="reset">

Form button that will reset all of the form fields when clicked

<input type="submit">

Form button that will submit the form data when clicked

<select></select>

Form element that contains <option></option> tags. By default this displays as a drop-down list of options and allows one to be selected. The size attribute determines how many options are shown at once and the multiple attribute allows more than one option to be selected.

<input type="radio">

Form element that creates a group of buttons and allows the user to choose only one of the items in the group. To group radio buttons together they must all have the same name attribute. Example: <input type="radio" name="groupName">

<input type="password">

Form element that obscures what you type into it

<input type="checkbox">

Form element that produces a box that can be checked on or off.

<textarea></textarea>

Form element that produces a multi-line text box

title=""

Form input attribute that provides a tooltip to the user

value=""

Form input attribute that specifies a default value that is entered in the field

<div></div>

Generic block level element used to group items for purposes of styling with CSS.

<span></span>

Generic inline level element used to apply styling with CSS.

Standalone Tags

HTML elements that do not contain content. Are writing with a closing /, ex. <br />

HTML

Hypertext Markup Language

image map

Image mapping defines regions of a single image to link to different URLs. Image map areas can be rectangle, circles, or polygon and require the coordinates be defined for the area.

<iframe></iframe>

Includes a separate document within another document. This method is preferred to the depreciated method of using the <frame> tag. The src attribute defines the location of the external document that is loaded into the <iframe>

attributes

Information added to HTML tags to provide important information the tag needs to help it work correctly.

<img />

Inline element used to add images to a webpage. SRC="" attribute defines where the image is located. ALT="" attribute defines alternative text for when the image cannot be displayed visually. TITLE="" attribute defines text that is displayed in a tooltip when you hover over the image.

<li></li>

Inline level container for list items. Can be used in both the ordered and unordered lists.

<em></em>

Inline tag that gives the marked section of content emphasis. Can visually be controlled with CSS.

<strong></strong>

Inline tag that gives the marked section of content strong value. Can visually be controlled with CSS.

<b></b>

Inline tag that sets text in bold.

<i></i>

Inline tag that sets text in italics.



Inline tag that sets text in subscript.



Inline tag that sets text in superscript.

fragment links

Linking to a specific place within the current document. Uses ID attribute defined in elements to create a place to link to. Example: <a href="#idName"></a>

<h1></h1>

One of 6 block level headings. H1 is the largest by default and H6 is the smallest, but they can all be styled differently using CSS. Heading levels help your page get properly indexed.

host

Portion of the URL that indicates the host name or IP address (www.google.com)

scheme

Portion of the URL that indicates the protocol in use (HTTP or HTTPS)

path

Portion of the URL that indicates where the specific object is located. This typically shows after the host.

<section></section>

Semantic element that contains a generic sectioning of content

<article></article>

Semantic element that contains a self-contained composition, like a blog posting or newspaper article

<aside></aside>

Semantic element that contains content tangentially related to the content around it

<header></header>

Semantic element that contains introductory or navigational aids

<nav></nav>

Semantic element that contains links to other pages or resources

<form>

The <form> tag is used to create an HTML form for user input

HTML Tags

The basic elements of HTML. Opening tags contain < and the name of the tag and the >. Closing tags contain </ and the name of the tag and the >.

<!DOCTYPE html>

The declaration that tells the browser what version of HTML to use. This needs to be the first thing in the document.

<dl></dl>

Block level container for a definition list

<ul></ul>

Block level container for an unordered list

<ol></ol>

Block level container for ordered list. TYPE="" attribute applies the style of ordered list. a - lowercase letters, A = uppercase letters, 1 = numerals, i = lowercase roman numerals, I = uppercase roman numerals. START="" attribute determines on what number the ordered list begins.

semantic elements

Block level elements designed to create structure that makes it clear what parts of the page serve what purpose. Example: <nav>, <article>, <aside>

<p></p>

Block level tag for identifying paragraphs of text. By default paragraphs have space before and after them.

<blockquote></blockquote>

Block level way to quote a passage of text.

Collapsed borders

Border value that can be assigned through the CSS border-collapse attribute. Allows adjoining cells to share a border.

Whitespace

Characters that you do not see on a page such as spaces, tabs, and new lines. Sequential whitespace is condensed into one space.

<table></table>

Container for all of the table information

<body></body>

Container for the main content of the page. Displays all of the visible content on the webpage.

<!-- comment -->

Creates a comment in HTML

metadata

Data about data. This information is included in the <head> section and does not display on the webpage. <meta charset="" /> would define the character set used by the page. Other ways to use metadata include setting a description and keywords for a search engine.

<input type="text">

Default type of an input, allows for text to be entered in a single line

Separate Borders

Default value for table borders that gives each cell its own border.

<frame></frame>

Defines an area of the page into which another webpage can be loaded

<td></td>

Defines table data cells within a <table> element

<th></th>

Defines table headers within a <table> element

<title></title>

Defines the title for a webpage. Required in HTML even if it is empty.

<dt></dt>

Definition term used in definition list.

<dd></dd>

Definition used in definition list.

absolute link

Specifies a link's absolute position. Example: http://www.google.com

relative link

Specifies a link's location in relation to the current document. ../ will bring you up a level from the current directory.

action=""

Specifies where to send the form-data when a form is submitted.

SGML

Standard Generalized Markup Language. This is the original language that HTML is based upon.

<a></a>

Stands for anchor and creates a link. The HREF="" attribute defines where the link should resolve to. The TARGET="" attribute defines where the link should open. To open in a new window or new tab you set target="_blank".

clear

Stops elements from floating around other elements. You can clear the float for left (clear:left), right (clear:right), or for both (clear:both).

<br />

Tag used to create a line break

<html></html>

Tags that indicate the document will contain HTML content.

<head></head>

This contains information that applies to the entire document. Other tags within may include <title>, <meta>, and <link>

<optgroup></optgroup>

Used to group related options in a <select> field. If you have a long list of options, groups of related options are easier to handle for a user.

float

When added as an attribute to an image it converts the image from an inline element to a block element. Items can be floated left(float:left), right(float:right), or center(float:center). If images are floated left or right the text will wrap around the image.