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