Scribd
Upload
325 views

HTML Cheatsheet

The document provides a cheatsheet for basic HTML tags used for formatting text, lists, images, tables, forms, and layout. It includes tags for headings, paragraphs, line breaks, quotes, divs, spans, unordered lists, ordered lists, list items, horizontal rules, images, tables, table rows, table cells, table headers, forms, form elements like text boxes, menus, buttons and labels.

Uploaded by

Minh Trần
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
325 views

HTML Cheatsheet

The document provides a cheatsheet for basic HTML tags used for formatting text, lists, images, tables, forms, and layout. It includes tags for headings, paragraphs, line breaks, quotes, divs, spans, unordered lists, ordered lists, list items, horizontal rules, images, tables, table rows, table cells, table headers, forms, form elements like text boxes, menus, buttons and labels.

Uploaded by

Minh Trần
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML

Cheatsheet
Basic Tags Formating
<html> </html> <p> </p>
Creates an HTML document Creates a new paragraph
<head> </head> <br/>
Sets off the title & other info that isn’t Inserts a line break
displayed <blockquote> </blockquote>
<body> </body> Puts content in a quote – indents text
Sets off the visible portion of the form both sides
document <div> </div>
<title> </title> Used to format block content with CSS
Puts name of the document in the title bar <span> </span>
<!-- --> Used to format inline content with CSS
Comments HTML tags
Lists
Head Elements <ul> </ul>
<meta charset=”UTF-8”> Creates an unordered list
Sets the default character encoding for <ol start=”?”> </ol>
HTML is UTF-8 Creates an ordered list (start=xx, where xx
<link rel=”shortcut icon” href=”URL”> is a counting number)
Adds a shortcut icon to a webpage <li> </li>
<link rel=”stylesheet” type=”text/css” Encompasses each list item
href=”URL”>
Specifies an external stylesheet Graphical elements
<hr/>
Text Tags Inserts a horizontal rule
<h1> </h1> à <h6> </h6> <img src=”URL” alt=”?” />
Creates headlines – H1 = largest, H6 = Adds image; Sets the alternate text for
smallest browsers that can’t process images
<b> </b> or <strong> </strong>
Creates bold text Tables
<i> </i> or <em> </em> <table> </table>
Creates italicized text Creates a table
<tr> </tr>
Links Sets off each row in a table
<a href=”URL”>Clickable text</a> <td rowspan=”?” colspan=”?”> </td>
Creates a hyperlink to a URL Sets off each cell in a row.
<a href=”URL” target=”_blank”>Clickable text</a> Rowspan/colspan sets number of rows/columns a
Creates a link, opened in a new window cell should span (default = 1)
<a name=”NAME”> <th> </th>
Creates a target location within a document Sets off the table header (a normall cell
<a href=”#NAME”>Clickable text</a> with bold, centered text)
Creates a link to that target location

Forms
<form action=”?” method=”?” > </form>
Defines a form. Action attribute specifies where to send the form-data when a form is submitted.
The form-data can be sent as URL variables with method=”GET” or as HTTP post transaction with
method=”POST”
<form action=”?” method=”POST” enctype=”multipart/form-data”> </form>
The enctype attribute specifies how the form-data should be encoded when submitting it to the
server. The “multipart/form-data” value is required when you are using forms that have a file upload control
<select multiple name=”?” size=”?”> </select>
Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll
<select name=”?”> </select>
Creates a pulldown menu
<option value=”?”> </option>
Sets off each menu item
<optgroup label=”?”> </optgroup>
Groups related options together
<textarea name=”?” cols=”?” rows=”?” value=”?” placeholder=”?”> </textarea>
Creates a text box area. Columns set the width; rows set the height
<input type=”checkbox/radio” name=”?” value=”?”>
Creates a checkbox/radio. Multiple checkbox/radio with the same name will be group together.
<input type=”checkbox/radio” name=”?” value=”?” checked>
Creates a checkbox/radio which is pre-checked. Checkboxes/radios with the same name will be
grouped together.
<input type=”text” name=”?” size=”?” value=”?” placeholder=”?”>
Creates an one-line text area. Size sets length, in characters
<input type=”file” name=”?”>
Defines a file-select field “Browse…” button for file upload
<input type=”submit” value=”?”>
Creates a submit button. Value sets the text in the submit button
<input type=”reset” value=”?”>
Creates a reset button which resets all form values to default values
<input type=”image” src=”URL” alt=”?”>
Creates an image as a submit button
<input type=”hidden” value=”?”>
Creates a hidden input field (not visible to a user). A hidden field often stores a default value for
server/client script processing
<label for=”input_id”> </label>
Defines a label for an <input> element. It provides a usability improvement for mouse users, because
if the user clicks on the text within the <label> element, it toggles the control.
<fieldset> </fieldset>
Groups related elements in a form by drawing a box around them
<legend> </legend>
Defines a caption for the <fieldset> element

HTML5 input tag attributes


(not all browsers support; visit http://caniuse.com for details)
<input placeholder=”?”>
Placeholder attribute specifies a short hint that describes the expected value of an input field (The
short hint is displayed in the input field before the user enters a value)
<input type=”email” name=”?” value=”?”>
Sets a single-line textbox for email addresses
<input type=”password” name=”?” value=”?”>
Sets a single-line textbox for password. The characters in a password field are masked
<input type=”url” name=”?” value=”?”>
Sets a single-line textbox for URLs
<input type=”number” name=”?” value=”?” min=”?” max=”?”>
Sets a single-line textbox for a entering a number. You can set restrictions on what numbers are
accepted with the min, max attributes
<input type=”range” name=”?” value=”?” min=”?” max=”?” step=”?”>
Defines a control for entering a range of number. Default range is 0 to 100. You can set restrictions
on what numbers are accepted with the min, max, and step attributes
<input type=”date/month/week/time/datetime-local” name=”?” value=”?”>
Sets a single-line textbox with a calendar showing the date/month/week/time/datetime-local
<input type=”search” name=”?” value=”?”>
Sets a single-line textbox for searching
<input type=”color” name=”?” value=”?”>
Sets a single-line textbox for picking a color
HTML5 Layout Tags

You might also like