aldomendez/html.cheat.sheet.md

## html.cheat.sheet.md

      
    Raw
  

              html.cheat.sheet.md
            
          
    HTML Cheat Sheet


html, title, head, body tags are the bare bones of a web page, barebones example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Document information


<base/> The base URL is usefull for especifying all relative links in a document


<style> To include document style information typically in CSS, inline.


<meta/> Spells information about the page, including page's description, author, published date, keywords, an other tipically "hidden" information


<link/> can be use to create relationships with external pages or documents, including style sheets


<script> Includes all scripting infornation, or link to external scripts. Can be included in the body to dinamically generate content.


Document structure


<h1..h6> All six level of headings


<div> A generic container use to denote page section


<span> An inline section or block container, tipically used for grouping styling elements


<p> This fundational tag is used to organize paragraphs of text


<br/> Creates a line break (or old school carrier-return), useful for writing blocks of text that need to be in diferent lines


Text formating


<strong> Exactly like it sounds, indicating STRONG emphasis, displayed bold in most browsers


<b> Another way to create bold text, however it's more for drawing attention, as opposed to emphasizing extra emphasis like previous tag


<em> The emphasis tag also are like they sound, emphasising text or phrases displayed as italics in most browsers


<i> Another way to add italics to text, however without the added emphasis (similar to bold text above) or instead used to denote things like thoughts or names


<strike> This tag creates strike through text (or text with a line through it). Not commonly supported


<cite> Tag used to cite or reference information, usefull for quotes and statements in a document


<pre> Pre-formatted, 'monospaced' text laid out with whitespace inside the element intact


<del> Helps denote previously deleted section of text


<ins> Represents a section of text that's been inserted into the document.


<blockquote> Reserved for long paragraphs of quotations, often cited


<q> These are usefull for shorter quotations


<abbr> Abbreviation, these help denote abbreviations, while also making the full form available example: <abbr title="Hypertext Markup Language">HTML</abbr>


<address> A helpfully obvious tag that display the author's contact information.


<dfn> Definifion, used to create an inline definition in the body text


<code> Code text, display code snippets, typically monospaced


<sub> Subscript text, A helpfull way to subscript text (shrinking it and placing it half line lower than the previous text)


<sup> Superscript text, A helpfull way to subscript text (shrinking it and placing it half line higher than the previous text)


<small> Small size text, Historically used to simply reduce text size, in HTML5 it also refers to information that may no longer be valid, accured or relevant


<bdo> The bidirectional override tag will identify which should text should be read opposite from the preceeding text


Links (+ formating)


<a href=""><a/> Anchor text for hiperlink


<a name="mailto:">...</a> A link to pull up an ongoing message to specific email addresses


<a href="tel://###-####"></a> A link to make phone numbers clickable, specially usefull for mobile users


<a name="name"></a> An anchor element that's usefull for bringingusers to specific document elements


<a href="#name"></a> An anchor link that brings users specifically to a element


Images (+ formating)


<img /> An image tag to include and display image files


src="url" Exactly what it sounds. The URL of the image to display


alt="text" Alternative text that helps explain the image content both search engines and users


height="" Specify the image height in pixels or percentages


width="' Specify the width in pixels or percentages


align="" The alignment of the image relative to other elements in the page


border="" Explains the border tickness (if any)


<map> Helps you tell the users that this is an interactive image with clickable areas


<map name=""> Name of the map associated between the image and the map


<area/> Specifi the area of image map


Example:
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
</map>
List (+ formating)


<ol> Create an ordered (numbered) list, showing sequential order, preference or priority


<ul> Creates a unordered (bulleted) list without any extra emphasis or order of importance`


<li> Specifies each list item


<dl> Reserved specifically for list items definitions


<dt> The definition term


<dd> The description of the defined term


Forms (+ formating)


<form> The form element creates a form, spelling out how the form will operate based on it's attributes


action="" Specifies where the data will be send


method="" Refers to the method [GET,POST], which indicated how the data will be send


enctype="" Dictates how the form-data is to be encoded when submiting information back to the server (for post only)


autocomplete dictates whether a form should have autocomplete on or off


novalidate Dicated whether the form should not be validated when submited


accept-charsets Identifies the character encoding upon the form submission


target Tells where to display the form response, generally one of the following [_ blank,_ self,_ parent,_ top]


<fielset> Identifies the group of all the fields on the form


<label> A simple field label, thelling the user what to enter in each field


<legend> The form legend acts as a caption for the fieldset element


<input /> The form input attribute defines the type of field information to receive from a user.


<button> Defines a clickable button


input type attributes


type="" Specifies the field input type, typically including text, password, date-time, checkbox, submit


name="" Describes the name of the form


value="" Describes the value or input field information


size="" Specifies the input element width in characters


maxlength="" Specifies the maximum input element character numbers allowed


required Another helpfull explicit tagm making sure the <input> element is completly filled out prior the user submitting the form


step="" Identifies the legal number intervals for an iput field


width="" Specifies the width in pixels for an input element


height="" Dictates de height in pixels of an <input> element


placeholder="" Provides a helpfull hint to the user, describing what the <input> element value should be


pattern="" Identifies a regular expression that the <input> element gets checked against, making sure the user entered the correct information


min="" The minimim value allowed for the element


max="" The maximum value allowed for the element


autofocus Says to make sure that the <input> element comes into focus after the pages loads


disabled Disables an <input> element on the form


<textarea> Specifies a largetext input for longer messages


<select> Describes a drop-down box for user's to select one from a variety of options


Select attributes


name="" The name of the drop-down


size="" Specifies the number of available, visible options in a drop-down


multiple Allows for multiple selections to be made at one time


required Requies that the value os selected before a user can submit a form


autofocus Specifies that the drop-down list autmatically comes into focus after a page loads


<optgroup> Specifies the entire grouping of available options


<option> Defines one of the available options of the drop-down list


Option attributes


value="" Explains the option value available for selection


selected Defines the default selected option for users


Tables (+ formating)


<table> Identifies and contains all table related content


<caption> Describes what the table is, and what it contains


<thead> Describe the type of information contained in each column underneath


<tbody> Contains the table data information


<tfoot> Describe all footer content


<tr> Contains the information to be included in a single row of a table


<th> Contains the actual information or data in a single header item


<td> Contains the actual information or data in a single table cell


<colgroup> Groups a single (or multiple) columns for formating purposes


<col/> Defines a single column of information inside a table


HTML5 New Tags


<header> Defines a header block for a document (or individual section)


<footer> Identifies the footer block for the document (or individual section)


<main> Describes the main contents of a document


<article> Identifies an article inside a document


<aside> Content in a document sidebar


<section> Specifies a section block in the document


<details> Describes additional facts or information that the user can view or hide


<dialog> A dialog box or window


<figcaption> The <figure> element caption that helps describes the figure


<figure> An independent content block featuting diagrams, photos illustrations or more


<mark> Displays a portion of highlighted text within the page content


<nav> Navigation links for the user in a document


<menuitem> The specific menu item that a user can raise froma popup menu


<meter> Describes a scalar measurement within a known array


<progress> Displays the progress of the task, usually used for progress bar


<rp> Displays text within browsers that not support ruby annotations


<rt> Displays East asian typography character details


<summary> Contains a visible heading for a <detail> element


<bdi> Helps format part of the text in a different direction from another text


<time> Identifies time and date


<wbr> The HTML element word break opportunity  represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.