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.
<sub></sub>
Inline tag that sets text in subscript.
<sup></sup>
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.
