To help the community here at hackr, I created this HTML cheat sheet. It's made to be short and sweet. Use it to quickly reference anything you need while building web pages, mobile apps, or emails.
And don't forget I also have an HTML compiler. It's free to use, and you can click the run button to see your changes immediately. Below is all the content on the cheat sheet. To get the PDF, scroll to the bottom.
HTML Cheat Sheet
Here we are sharing with you the complete HTML Cheat Sheet:
Basic structure
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> body tags and main content </body>
</html>The main elements in HTML are the tags. Tags structure and present the data in different forms.
Heading
<h1>Heading 1</h1>
<h2>Heading 2 </h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Paragraph
Attribute ‘style’ can be used with <p> to display the text inside <p> in a specific manner. For example, <p style = "color:blue">I will appear blue</p> <p style = "background-color:blue">Highlighting as blue</p> <br> line break
<p>write a paragraph</p>
<p style = "background-color:blue">Highlighting as blue</p>
Span
Span tag is used for styling inline elements.
<span style = “color:green”> Address </span>- prints the word ‘Address’ in the specified color (here green). The style attribute is used to style HTML elements.
Characters
- – space (non-breaking)
- " - add quotation mark (“)
- < - less than symbol (<)
- > - greater than symbol (>)
- & - the ‘&’ or ampersand symbol
- © - copyright symbol
- ™ - trademark symbol
Formatting
- <b>Bold text </b>
- <i>Italic text</i>
- <u>underlined text</u>
- <mark>I am highlighted in yellow</mark>- marks the text in yellow. If other colors are needed, span is used.
- <span style="background-color: #FF00FF">I am highlighted in pink</span>
- <strong>I am strong</strong> - give emphasis to a particular text; mostly bold
- <font></font> - chosen font for the text
- Font is not used in HTML 5, CSS is used. Attributes of <font> -
- <face> - the font family, for example Courier New
- <size> - size of the text
- <color> - color of the text in hex value (eg. #FF000F) or text (eg.red)
- <small></small> - smaller text, fine print size
- <strike>Strike that out</strike> - strikeout the text inside the tag
- <sup></sup> - superscript (text above the normal text like exponential numbers)
- <sub></sub> - subscript
- <em></em> - emphasis
- <pre></pre> - preformatted text
- <tt></tt> - typewriter text
Body
<body> - the main content lies in the body. Inside <body> there can be many sections. Attributes –
- background="" - Background Image source; can be left empty if no image
- bgcolor="" - Background Colour in hex value
- text="" - page text color
- link="" - Link Colour
- alink="" - Active (current) Link Colour
- vlink="" - Visited Link Colour
- bgproperties="" - Background Properties. A value of "fixed" means non-scrolling watermark
- topmargin="?" - Top Margin Size in Pixels
- leftmargin="" - Side Margin Size in Pixels
Metadata
<meta> tag is a part of <head> and describes information about data. Most common use of metadata is by search engines for keywords. <meta charset = “UTF-8”> - most common character set Attributes –
- name = “” – can be name like keyword, author, description etc…
- content = “” – the value corresponding to above names
Example - <meta name="keywords" content="What is HTML, How to learn HTML">
Sections and divisions
- <div></div> new section; nested div tags are very common when multiple sub-sections are required
- <hr> - horizontal line
<hr> has the following attributes –
- <hr size = “” width = “”/width = “%” color = “” align = “left/center/right”>
- size – thickness of the line in pixels
- width – in pixels or percentage (any one)
- color – color in hex value
- align – alignment; left, right or center
Tables
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>- <table> - creates a table,
- <tr> - creates a row,
- <td> - creates column,
- <th> - creates header columns
<table> attributes –
- border="" - Thickness of outside border in pixels
- bordercolor="" - Border Colour in hex value
- cellspacing="" - Space between each cell in pixels
- cellpadding="" - Space between cell border and content
- align="" - Horizontal Alignment; left, right, center
- bgcolor="" - Background Colour hex value
- width="" - Table Width in pixels or %
- height="" - Table Height in pixels or %
<td> attributes
- colspan="" - Number of columns the cell spans across
- rowspan="" - Number of rows cell spans across
- width="" - width of cell in pixels or %
- height="" - height of cell in pixels or %
- bgcolor="" – hex value of background colour for the cell (column)
- align="" - Horizontal Align; left, center, right
- valign="" - Vertical Align; top, middle, bottom
- <colgroup> - is used to define attributes for particular columns of the table.
Example –
<colgroup>
<col span="1" style="background-color:green">
<col style="background-color:blue">
</colgroup>The first column will be highlighted as green, whereas other columns will be highlighted as blue.
Forms (HTML Cheat Sheet)
Most of the dynamic content like user inputs, submitting a page, filling a form happen inside this tag. It is a group of related inputs.
<form>
<input>
<select><option></option></select>
<textarea>
</form><form> tag attributes –
- action="url" - destination url upon form submission
- method="" - form method - get, post
- enctype="" - type of encoding; for file upload it is "multipart/form-data"
<input> tag attributes –
- type="" - Mandatory input Field Type: text, password, checkbox, submit and so on.
- name="" - Form Field Name (mandatory for form processing)
- value="" - value (entered by user) or default value
- size="" - field size
- maxlength="" - Maximum acceptable length of Input Field data
- checked - Mark selected field in checkbox (multi-select) or radio button (single-select)
<select> </select> - Select options from drop-down list <select> tag Attributes:
- name="" - Drop Down Combo-Box Name; mandatory for form processing
- size="" - size of the drop-down list
- multiple - Allow multiple selections
<option></option> - individual items of the drop-down list <option> tag Attributes:
- value="" - Option value selected or default value set
- <textarea>lot of text like description </textarea> - Large area for text inputs
<textarea> Tag Attributes:
- name="" - Text area name for form processing
- rows="" - Number of rows of text shown
- cols="" - Number of columns (characters per row)
- wrap="" - text wrapping
iframe
- <iframe src=””></iframe> - embed another document within the current document (page) in a frame.
- Attribute “src” – location of the document to be embedded
Links
HTML links, also called as hyperlinks are defined by ‘a’ tag – <a></a> Attributes –
- href = “” – the url to be visited when the link is clicked
- target = “” – specifies where to open the link - _blank (new tab/window), _self (same window/tab), _parent (in the parent frame), framename – open in a particular frame.
- title = “” – gives information about the element
- id = “” – to create bookmarks in the page that can be used as value in href attribute.
Examples –
- <a href = "https://hackr.io/">Go to hackr.io</a>
- <a href = "C:\Users\Public">Open a resource from the given location</a>
- <a href = "#divprop">Reach a div element specified by the name</a>
Styles
For styling, there are many attributes being used with various tags. The attributes are –
<style> text-align= “” – align text; left, right, center background-color = “” – background color of the element color=”” – for color of texts font-family = “” – for various fonts font-size = “” size of the font border = “” – border thickness and color for a table </style>
These styling elements are put together in a CSS.
Lists
There are two types of lists – ordered and unordered. <ol></ol> - ordered list Attributes –
- type=”” – the numbering of the list – A, a, I, 1, i
- start = “” – starting value
- <ul></ul> - unordered list
Attributes –
- type = “” – type of bullet – square, circle, disc
- <li></li> - individual value in the list
Attributes –
- <value> = “” – value of list item
- <type>=”” – type of the list item
Images
<img> - shows the image when page loads Attributes –
- src =”sourceofimage” – source of the image; url or file location; mandatory
- alt = “alternate text” – alternate text; mandatory
- align = “left/right/center” – alignment with respect to surrounding items (text)
- width = “” – in pixels or percentage
- height = “” - in pixels or percentage
- border = “” – thickness of the border in pixels
- hspace = “” – space in pixels on the sides of the image
- vspace = “” – space in pixels on top and bottom of the image
HTML5 Tags
- <aside> - content that is not part of any element, but has to be put alongside the main content
- <figure> - any illustration like photos, diagrams, code listing and so on.
- <figcaption> - caption for the <figure> element
- <header> - A section's heading (similar to that in MS word), header can have other content like navigation links, forms etc...
- <footer> - the content at the bottom of the page/section eg. copyright information, terms and conditions etc...
- <main> - the tag is an indicator of where the main content of the page starts
- <details> - box with expand/collapse functionality to allow for more text space
- <summary> - summary of content of the particular element. Can be description, caption etc...
- <mark> - highlight part of a text to give prominence
- <nav> - section with navigation links to sections on a page or to other pages
- <section> - a particular part (group) on the page, for example, about us or testimonials section of a web page
- <time> - the mentioned time in machine-readable format. It can have date, time, time-zone offset, durations etc...
- <datalist> - similar to autocomplete; defined preset options for input controls
- <keygen> - key pair (public and private) generator for forms. Public key is sent to server when form is submitted, while the private key is stored in the local keystore
- <output> - result of any calculations
- <progress> - indicates task progress through a progress bar
- <embed> - embed media from external source
- <source> - source for audio or video
- <audio> - for music content or sound
- <video> - to present a movie or video
HTML Meaning
HTML stands for Hyper Text Mark-up Language. It's used for creating web pages (documents) that are displayed on the World Wide Web (websites). The pages can be a mix of text, images, videos, and other elements. It can be created with: notepad, TextPad or any text editors.
These are saved as .html files.
Get Your Copy of the Cheat Sheet
Access HTML Cheat Sheet PDF here.
Interested in more resources? Check out our free newsletter.
