2018-02-28 05:44:10 +00:00
<!-- * *******************************************************************************************
* HTML5 Cheat sheet by Hackr.io
* Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
* ******************************************************************************************* * -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Document Summary -->
2018-02-28 18:47:10 +00:00
2019-04-12 22:49:28 +00:00
<!DOCTYPE html> <!-- Tells the browser that HTML5 version of HTML to be recognized by the browser -->
< html lang = "en" > < / html > <!-- The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, -->
2018-02-28 05:44:10 +00:00
< head > < / head > <!-- Contains Information specific to the page like title, styles and scripts -->
< title > < / title > <!-- Title for the page that shows up in the browser title bar -->
2019-10-16 18:39:29 +00:00
< body > < / body > <!-- Content that the user will see -->
2018-02-28 05:44:10 +00:00
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Document Information -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< base / > <!-- Usefull for specifying relative links in a document -->
2019-10-16 18:39:29 +00:00
< style > < / style > <!-- Contains styles for the html document -->
< meta / > <!-- Contains additional information about the page, author, page description and other hidden page info -->
< script > < / script > <!-- Contains all scripts internal or external -->
2018-02-28 05:44:10 +00:00
< link / > <!-- Used to create relationships with external pages and stylesheets -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Document Structure -->
2018-02-28 18:47:10 +00:00
2019-10-16 18:39:29 +00:00
< h1 > < / h1 > ... < h6 > < / h6 > <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent -->
< p > < / p > <!-- Used to organize paragraph text -->
< div > < / div > <!-- A generic container used to denote a page section -->
< span > < / span > <!-- Inline section or block container used for creating inline style elements -->
< br / > <!-- Creates a line - break -->
< hr > <!-- Creates a sectional break into HTML -->
2018-02-28 05:44:10 +00:00
<!-- Text Formatting -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< strong > < / strong > and < b > < / b > <!-- Makes text contained in the tag as bold -->
2018-07-14 08:38:05 +00:00
< em > < / em > and < i > < / i > <!-- Alternative way to make the text contained in the tag as italic -->
2019-10-16 18:39:29 +00:00
< strike > < / strike > <!-- Creates a strike through the text element -->
2018-02-28 05:44:10 +00:00
< pre > < / pre > <!-- Preformatted monospace text block with some spacing intact -->
< blockquote > < / blockquote > <!-- Contains long paragraphs of quotations often cited -->
2019-10-16 18:39:29 +00:00
< abbr > < / abbr > <!-- Contains abbreviations while also making the full form avaialable -->
2018-02-28 05:44:10 +00:00
< address > < / address > <!-- Used to display contact information -->
< code > < / code > <!-- Used to display inline code snippets -->
2020-10-02 08:50:36 +00:00
< q > < / q > <!-- Defines a short inline quotation -->
< sub > < / sub > <!-- Defines subscripted text -->
< sup > < / sup > <!-- Defines superscripted text -->
< kbd > < / kbd > <!-- Specifies text as keyboard input -->
2020-10-02 11:04:13 +00:00
< small > < / small > <!-- Specifies small text -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Links Formatting -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< a href = "url" > < / a > <!-- Used to link to external or internal pages of a wbesite -->
< a href = "mailto:email@example.com" > < / a > <!-- Used to link to an email address -->
< a href = "name" > < / a > <!-- Used to link to a document element -->
< a href = "#name" > < / a > <!-- Used to link to specific div element -->
2019-10-16 18:39:29 +00:00
< a href = "tel://####-####-##" > < / a > <!-- Used to display phone numbers and make them clickable -->
2018-02-28 05:44:10 +00:00
2018-02-28 18:47:10 +00:00
<!-- Image Formatting -->
2019-10-16 18:39:29 +00:00
< img src = "url" alt = "text" > <!-- Used to display images in a webpage where src="url" contains the link to the image source and alt="" contains an alternative text to display when the image is not displayed -->
2018-02-28 05:44:10 +00:00
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- List Formatting -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< ol > < / ol > <!-- Used to create ordered lists with numbers in the items -->
< ul > < / ul > <!-- Used to display unordered lists with numbers in the items -->
< li > < / li > <!-- Contains list items inside ordered and unordered lists -->
< dl > < / dl > <!-- Contains list item definitions -->
2019-10-16 18:39:29 +00:00
< dt > < / dt > <!-- Definition of single term inline with body content -->
2018-02-28 05:44:10 +00:00
< dd > < / dd > <!-- The descrpition of the defined term -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Forms Formatting and Attributes -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< form action = "url" > < / form > <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Supported attributes -->
2019-10-16 18:39:29 +00:00
method="somefunction()" <!-- Contains the type of request (GET, POST... etc) which dictates how to send the data of the form -->
2018-04-30 19:14:49 +00:00
enctype="" <!-- Dictates how the data is to be encoded when the data is sent to the web server. -->
2018-02-28 05:44:10 +00:00
autocomplete="" <!-- Specifies if the autocomplete functionality is enabled or not -->
novalidate <!-- Dictates if the form will be validated or not -->
accept-charset="" <!-- Identifies the character encoding upon form submission -->
2019-10-16 18:39:29 +00:00
target="" <!-- Tell where to display the information upon form submission. Possible values: '_blank', '_self', '_parent', '_top' -->
2018-02-28 05:44:10 +00:00
< fieldset disabled = "disabled" > < / fieldset > <!-- Identifies the group of all fields in the form -->
< label for = "" > < / label > <!-- A simple field label telling the user what to type in the field -->
< legend > < / legend > <!-- The form legend acts as a caption for the fieldset element -->
< input type = "text/email/number/color/date" > <!-- Input is the input field where the user can input various types of data -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Supported attributes -->
name="" <!-- Describes the name of the form -->
width="" <!-- Specifies the width of an input field -->
value="" <!-- Describes the value of the input information field -->
size="" <!-- Specifies the input element width in characters -->
maxlength="" <!-- Specifies the maximum input character numbers -->
required="" <!-- Specifies if the input field is required to fill in before submitting the form -->
step="" <!-- Identifies the legal number intervals of the input field -->
< textarea name = "" id = "" cols = "30" rows = "10" > <!-- Specifies a large input text field for longer messages -->
< / textarea >
2019-10-16 18:39:29 +00:00
< select name = "" > < / select > <!-- Describes a dropdown box for users to select from variety of choices -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Supported attributes -->
name="" <!-- The name for a dropdown combination box -->
2019-10-16 18:39:29 +00:00
size="" <!-- Specifies the number of available options -->
2018-04-30 17:51:31 +00:00
multiple <!-- Allows for multiple option selections -->
2018-02-28 05:44:10 +00:00
required <!-- Requires that a value is selected before submitting the form -->
2019-10-16 18:39:29 +00:00
autofocus <!-- Specifies that the dropdown automatically comes to focus once the page loads -->
2018-02-28 05:44:10 +00:00
< optgroup > < / optgroup > <!-- Specifies the entire grouping of available options -->
2019-10-16 18:39:29 +00:00
< option value = "" > < / option > <!-- Defines one of the avaialble option from the dropdown list -->
2018-02-28 05:44:10 +00:00
< button > < / button > <!-- A clickable button to submit the form -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Tables Formatting -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< table > < / table > <!-- Defines and contains all table related content -->
< caption > < / caption > <!-- A description of what table is and what it contains -->
< thead > < / thead > <!-- The table headers contain the type of information defined in each column underneath -->
< tbody > < / tbody > <!-- Contains the tables data or information -->
< tfoot > < / tfoot > <!-- Defines table footer -->
< tr > < / tr > <!-- Contains the information to be included in a table row -->
< th > < / th > <!-- Contains the information to be included in a single table header -->
< td > < / td > <!-- Contains actual information in a table cell -->
< colgroup > < / colgroup > <!-- Groups a single or multiple columns for formatting purposes -->
< col > <!-- Defines a single column of information inside a table -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Objects and iFrames -->
2018-02-28 18:47:10 +00:00
2019-10-16 18:39:29 +00:00
< object data = "" > < / object > <!-- Describes and embed file type including audio, video, PDF's, images -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- Supported attributes -->
type="" <!-- Describes the type of media embedded -->
2019-10-16 18:39:29 +00:00
height="" <!-- Describes the height of the object in pixels -->
2018-02-28 05:44:10 +00:00
width="" <!-- Describes the width of the object in pixels -->
usemap="" <!-- This is the name of the client - side image map in the object -->
< iframe src = "" frameborder = "0" > < / iframe > <!-- Contains an inline frame that allows to embed external information -->
< embed src = "" type = "" > <!-- Acts as a container for external application or plug - in -->
2019-10-16 18:39:29 +00:00
src="" <!-- The source of the external file you're embedding -->
2018-02-28 05:44:10 +00:00
width="" <!-- Describes the width of the iframe in pixels -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
<!-- HTML5 New Tags -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
< header > < / header > <!-- Defines the header block for a document or a section -->
< footer > < / footer > <!-- Defines the footer block for a document or a section -->
2019-10-16 18:39:29 +00:00
< main > < / main > <!-- Describes the main content of a document -->
2018-02-28 05:44:10 +00:00
< article > < / article > <!-- Identifies an article inside a document -->
< aside > < / aside > <!-- Specifies content contained in a document sidebar -->
< section > < / section > <!-- Defines a section of a document -->
< details > < / details > <!-- Describes additonal information that user can view or hide -->
< dialog > < / dialog > <!-- A dialog box or a window -->
< figure > < / figure > <!-- An independent content block featuring images, diagrams or illustrations -->
< figcaption > < / figcaption > <!-- Caption that describe a figure -->
< mark > < / mark > <!-- Displays a portion of highlighted text with in a page content -->
< nav > < / nav > <!-- Navigation links for the user in a document -->
2021-05-07 18:04:46 +00:00
< menuitem > < / menuitem > <!-- The specific menu item that a user can raise from a pop up menu -->
2018-02-28 05:44:10 +00:00
< meter > < / meter > <!-- Describes the scalar measurement with in a known array -->
< progress > < / progress > <!-- Displays the progress of a task usually a progress bar -->
< rp > < / rp > <!-- Describes text within the browsers that do not support ruby notations -->
< rt > < / rt > <!-- Displays east asian typography character details -->
< ruby > < / ruby > <!-- Describes annotations for east asian typography -->
< summary > < / summary > <!-- Contains a visible heading for details element -->
< bdi > < / bdi > <!-- Helps you format parts of text in a different direction than other text -->
< time > < / time > <!-- Identifies the time and date -->
< wbr > <!-- A line break within the content -->
2020-10-02 08:50:36 +00:00
<!-- Some other useful tags -->
< canvas > < / canvas > <!-- Allows to draw 2D shapes on the web page with the help of javascript -->
< keygen > <!-- Represents a control for generating a public - private key pair -->
2020-10-02 11:04:13 +00:00
< map > < / map > <!-- Specifies an image map -->
2018-02-28 18:47:10 +00:00
2019-10-16 18:39:29 +00:00
<!-- Collective Character Obejcts -->
2018-02-28 18:47:10 +00:00
2018-02-28 05:44:10 +00:00
" " Quotation Marks - "
& & Ampersand - &
< < Less than sign - <
> > Greater than sign - >
  Non-breaking space
© © Copyright Symbol - ©
@ Ü @ symbol - @
• ö Small bullet - .
™ û Trademark Symbol - ™
