HTML Essentials Cheat Sheet PDF

HTML Essentials Cheat Sheet
While HTML is easy to learn, memorizing its Images Objects and iFrames
numerous tags, attributes, and other elements can <img /> For displaying image files. <object> ... </object> Describes the embedded filetype.
seem daunting. Attributes for the <img> tag Attributes for the <object> tag
src=”url” Link to the source path of the image. height=”” The height of the object.
But don’t worry. You can get a quick refresher on The text displayed when a mouse is width=”” The width of the object.
alt=”text” hovered over the image.
them anytime with this cheatsheet! type=”” The type of media the object contains.
height=” ” Image height in pixels or percentages.
The first and last tag of an HTML An inline frame for embedding
<iframe> ... </iframe>
<html> ... </html> document. All other tags lie between width=” ” Image width in pixels or percentages. external information.
these opening and closing tags. Relative alignment of the image on name=”” The name of the iFrame.
align=” ”
Specifies the collection of metadata the page.
<head> ... </head> The source URL for the content inside
for the document. src=””
border=” ” Border thickness of the image. the frame.
Describes the title for the page and <map> ... </map> Link to a clickable map. srcdoc=”” The HTML content within the frame.
<title> ... </title> shows up in the browser’s title bar.
<map name=””> ... height=”” The height of the iFrame.
Includes all content that will be Name of the map image.
<body> ... </body> </map>
displayed on the webpage. width=” ” The width of the iFrame.
<area /> The image area of an image map. Adds extra parameters to customize
<param />
Attributes for the <area> tag the iFrame.
Document Information shape=” " Shape of the image area. <embed> ... </embed> Embeds external application or plugin.
Mentions the base URL and all relative coords=” ” Coordinates of the map image area. Attributes for the <object> tag
<base/>
links to the document.
height=” “ Sets the height of the embed.
For extra information about the page
<meta/>
like author, publish date, etc. Forms width=” “ Sets the width of the embed.
Links to external elements like style type=”” The type or format of the embed.
<link/> <form> ... </form> The parent tag for an HTML form.
sheets. src=”” The source path of the embedded file.
Attributes for the <form> tag
Contains document style information The URL where form data is
<style> ... </style> action=”url”
like CSS (Cascading Style Sheets). submitted. Tables
<script> ... </script> Contains links to external scripts. Specifies the form submission
method=” ” <table> ... </table> Defines all content for a table.
protocol (POST or GET).
Text Formatting <caption> ...
The data encoding scheme for POST A description of the table.
enctype=” ” </caption>
submissions.
<strong> ... </strong> OR Makes text bold. <thead> ... </thead> Headers for each column in the table.
<b> ... </b> Specifies if form autocomplete is on
autocomplete or off. <tbody> ... </tbody> Defines the body data for the table.
<em> ... </em> Italicizes text and makes it bold.
Specifies whether the form should be Describes the content for the table’s
Italicizes text but does not make it novalidate <tfoot> ... </tfoot>
<i> ... </i> validated before submission. footer.
bold.
Specifies character encoding for form <tr> ... </tr> Content for a single row.
<strike> ... </strike> Strikethrough text. accept-charsets submissions. <th> ... </th> The data in a single header item.
<cite> ... </cite> Cites an author of a quote. Shows where the form submission
target <td> ... </td> Content within a single table cell.
<del> ... </del> Labels a deleted portion of a text. response will be displayed.
<colgroup> ...
Shows a section that has been <fieldset> ... </fieldset> Groups related elements in the form/ Groups columns for formatting.
<ins> ... </ins> </colgroup>
inserted into the content. Specifies what the user should enter
<label> ... </label> <col> A single column of information.
<blockquote> ... For displaying quotes. Often used with in each form field.
</blockquote> the <cite> tag. <legend> ... </legend> A caption for the fieldset element.
<q> ... </q> For shorter quotes. Specifies what type of input to take HTML5 New Tags
<input />
<abbr> ... </abbr> For abbreviations and full-forms. from the user. <header> ... </header> Specifies the webpage header.
<address> ... </address> Specifies contact details. Attributes for the <input> tag <footer> ... </footer> Specifies the webpage footer.
<dfn> ... </dfn> For definitions. Determines the type of input (text,
type=”” <main>...</main> Marks main content of the webpage.
dates, password).
<code> ... </code> For code snippets. <article>...</article> Specifies an article.
name=”” Specifies the name of the input field.
<sub> ... </sub> For writing subscripts <aside> ... </aside> Specifies sidebar content of a page.
value=”” Specifies the value in the input field.
<sup> ... </sup> For writing superscripts. Specifies a particular section in the
Sets the number of characters for the <section>...</section>
size=”” webpage.
For reducing the text size and marking input field.
<small> ... </small> redundant information in HTML5. <details> ... </details> For describing extra information.
Sets the limit of input characters
maxlength=”” allowed. Used as a heading for the above tag.
<summary> ... </summary> Is always visible to the user.
required Makes an input field compulsory.
Document Structure <dialog>...</dialog> Creates a dialog box.
width=”” Sets width of the input field in pixels.
Different levels of headings. H1 is the <figure>...</figure> Used for including charts and figures.
<h1..h6> ... </h1..h6> height=”” Sets height of the input field in pixels.
largest and H6 is the smallest. <figcaption> ... </
placeholder=”” Describes expected field value. Describes a <figure> element.
<div> ... </div> For dividing content into blocks. figcaption>
Specifies a regular expression, which
Includes inline elements, like an <mark>...</mark> Highlights a specific part of the text.
pattern=”” can be used to look for patterns in the
<span> ... </span> image, icon, emoticon, without ruining
user’s text. <nav>...</nav> Set of navigation links on a webpage.
the formatting of the page.
The minimum value allowed for an <menuitem>...</menuitem> A particular item from a list or a menu.
<p> ... </p> Contains plain text. min=”” input element. <meter>...</meter> Measures data within a given range.
<br/> Creates a new line.
The maximum value allowed for an Places a progress bar and tracks
max=”” <progress>...</progress>
Draws a horizontal bar to show end of input element.
<hr/> progress.
the section.
disabled Disables the input element. Displays text that do not support Ruby
<rp>...</rp>
For capturing longer strings of data annotations.
<textarea> ... </textarea>
Lists from the user. Displays East Asia typography
<rt>...</rt>
Specifies a list of options which the character details.
<ol> ... </ol> For ordered list of items. <select> ... </select>
user can choose from. A Ruby annotation for East Asian
<ul> ... </ul> For unordered list of items. <ruby>...</ruby>
Attributes for the <select> tag typography.
<li> ... </li> For individual items in a list.
name=”” Specifies name for a dropdown list. <time>...</time> Identifies time and date.
<dl> ... </dl> List of items with definitions. size=”” Number of options given to the user. <wbr> A line break within the content.
The definition of a single term inline
<dt> ... </dt> Sets whether the user can choose
with body content. multiple HTML5 Character Objects
multiple options from the list.
<dd> ... </dd> The description for the defined term. " " Quotation Marks
Specifies whether choosing an
required option/s is necessary for form < < Lesser than sign (<)
submission.
Links > > Greater than sign (>)
Specifies that a drop-down list
<a href=””> ... </a> Anchor tag for hyperlinks. Non-breaking space
autofocus automatically comes into focus after a
<a href=”mailto:”> ... </a> Tag for linking to email addresses. page loads. © © Copyright symbol
<a href=”tel://###-###”> ... Anchor tag for listing contact <option> ... </option> Defines items in a dropdown list. û Trademark symbol
</a> numbers. value=”” Displays the text for any given option. @ Ü “at” symbol (@)
Anchor tag for linking to another part selected Sets default option that is displayed. & & Ampersand symbol (&)
<a name=”name”> ... </a> of the same page.
Tag for creating a button for form ö Small bullet
Navigates to a div section of the <button> ... </button>
<a href=”#name”> ... </a> submission.
webpage. (Variation of the above tag)
Copyright © 2019 MakeUseOf. For more cheat sheets, head over to www.makeuseof.com

HTML Essentials Cheat Sheet PDF

Uploaded by

Copyright:

Available Formats

HTML Essentials Cheat Sheet PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Essentials Cheat Sheet PDF

Uploaded by

Copyright:

Available Formats

HTML Essentials Cheat Sheet

You might also like