HTML Cheat Sheet

Most objects use an opening and closing tag, both are wrapped in left right symbols, with the ending tag having a slash.

The website head uses "head" tags and it contains the page's name and metadata related to the css style and other associated data.

This is the page body and contains all actually visible items, it uses "body" tags.

Heading One uses "h1" tags

Heading Two uses "h2" tags

Heading Three uses "h3" tags

Heading Four uses "h4" tags

Heading Five uses "h5" tags

Heading Six uses "h6" tags

There are two types of elements in html, inline and block. Inline elements are tags that can be added in the middle of a line of text and don't start a new one. Block elements start on a new line and take up it's full width.

Elements can also use attributes, typically included in the opening tag. These attributes follow a structure of attributeName="attribute".

The inline strong element uses "strong" tags and highlights text (bold by default).

The inline emphasized element uses "em" tags and also highlights text (italics by default).

Then inline link element uses "a" tags and uses an "href" attribute to link to another site, local files can be linked to with just the html file's name, external sites require a full URL (this links to an HTML crash course video). A "target" attribute called "_blank" that causes the linked page to be opened in a new tab.

Tables	Rows	Columns
A block element that uses "table" tags.	Each row element uses "tr" tags.	Each column element uses "td" tags.
Can have a header row that uses "thead" tags and higlights its elements (bold by default).	It contains a list of elements for each of its columns.	They are contained within the row element, which has as many column elements as there are columns on the table.
The table body has all the non highlighted information and is contained in "tbody" tags.	Contained within the table body element.	Overall structure is: table contains rows which contain column bits each.

Forms elements use "form" tags and can be made of many types of input types that use "input" tags, these tags don't use an ending tag, and use the "type" attribute to tell which input type they are. This line uses an input of type "text", the "name" attribute gives the input field a name and the "placeholder" attribute gives it default gray text to show when empty.

Each line is placed in a division element that uses "div" tags that act as a container for all the elements whithin, this is done here to make each input a separate line. These lines of text are label elements that use "label" tags. This line uses an input of type "text" as well and also has a "name" attribute, but without a placeholder.

Instead of an input tag, this line uses a text area input element that uses "textarea" tags. This tag does use a closing tag, and it creates a larger text box for users to type in. This also uses a "name" attribute like all other input fields.

This is a selection list element that uses "select" tags with a "name" attribute. Within the selection list we have selection options that use "option" tags, they have a "value" attribute that gives the value a name, and the actual text of the option is housed between it's start and end tags like a paragraph.

This input type uses a "number" type, and can have a "value" attribute that gives it a default number, in this case 30.

This input type uses a "date" type to insert dates of the year.

Lastly, this button uses a "submit" type, and is used to submit all the info in the form (since we have no backend, this will break the site). the "value" attribute stores the text in it.

Images are housed in "img" tags with no end tag. The "src" attribute has the local image name (including file extension), an "alt" attribute that contains text that will appear if the image is missing, as well as "width" and "height" attributes that define the image size. We also wrapped the image tag in "a" tags with an "href" attribute that also links to the image, so it will open in full size when clicked.

This paragraph uses an inline abbreviation that uses "abbr" tags, hovering over it will show an extended version of the abbreviation. AbbrInfo

This citation inline element uses "cite" tags, it just italicizes text for the most part. Insert a cite here

Semantic tags are tags that define their meaning to the browser and developer, here's a nice diagram: