HTML Cheat Sheet for Beginners

Trying to remember every HTML element is like trying to remember all of your personal information, credit card, bank account numbers and your password for social media, email and ATM card. It is not only impossible but a waste of valuable time.

Launching a Google search will yield a result for at least 30 different browser tabs which will make the process of learning HTML tedious and inefficient.

If you want to learn HTML web development, your best option would be to use an HTML cheat sheet. You won’t be alone; even experienced web developers find themselves using an HTML cheat sheet once in a while.

We have prepared an HTML which you can use as your immediate resource when you are studying HTML or other programming languages such as CSS, JavaScript, and PHP.

    html-cheat-sheet-beginners

    Document Summary

    <html> … </html>

    This tag appears at the root element or the beginning and end of an HTML document. When you see this tag, it means the webpage is in HTML format. All of the other page markups will be featured between the beginning and ending tags.

    <head> … </head>

    Includes information such as specific page, title tags, metadata, plus links to scripts and style sheets.

    <title> … </title>

    The title tag identifies the title of the page. Search engines use the title tag to scan and index. Users also use the title tag when identifying the main topic of each page.

    <body> … </body>

    Body tags guide users on the types of content they will see and read.

    HTML Example

    <html>
    <head>
    <title>Your Website or Page Title</title>
    </head>
    <body>

     

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

     

    </body>
    </html>

    Download .PDF

    Document Information

    <base/>

    This is called the Base URL. An example of a Base URL is www.YourWebsite.com. You need this to identify all the relative links in your document. The Base URL is especially valuable if you use many internal links.

    <meta/>

    Metadata details key information about the page. This includes a description of the page’s content, the author, the published data, keywords, and information that are usually hidden.

    <link/>

    This is used if you want to establish relationships with external pages, documents, and style sheets.

    <style> … </style>

    This HTML element details information on the document style and typically defaults to CSS.

    <script> … </script>

    This particular HTML element contains all scripting information, including links to external scripts. You can also use this element in the body in order to generate great content.

    HTML Example

    <html>

    <head>

    <meta charset=”utf-8″>

    <base href=”http://yourWebsite.com” target=”_blank” />

    <title>YourWebsite</title>

    <link rel=”stylesheet” href=”/css/main.css”>

     

    <script type=”text/javascript”>

    varMyVar = 0;

    </script>

    </head>

    <body>

     

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

     

    </body>

    </html>

    Download .PDF

    Document Structure

    <h1..h6> … </h1..h6>

    These tags represent the first six headings of a page. H1 is the most important and consequently, H6 is the least important. These elements describe the contents on a page.

    <div> … </div>

    This element is called a generic container. It is used to identify a page section or a specific block.

    <span> … </span>

    This HTML element represents the inline section which is sometimes referred to as the block container. It is used to group styling elements.

    <p> … </p>

    A foundational tag which organizes paragraphs of text.

    <br/>

    Establishes a line break similar to the carriage-return of the typewriter. You can use this to segment texts that have to be placed in different lines. Think of a section whereby personal information is entered one on top of another line.

    <hr/>

    If you want to create a change of topic on a page, you will need this element.

    HTML Example

    <div>

    <h1>Ways to eat healthily</h1>

    <p>You have <span style=”color: #33cccc;”>health conditions</span> and you want to be as healthy as possible.</p>

    <hr/>

    <h2>Remove all the junk foods in your house.</h2>

    <p>The right diet is <span style=”color: #33cccc;”>extremely</span> important for your health.<br/>Obesity is a common source of problems among young adults.</p>

    </div>

    How it Looks

    Ways to eat healthily

    You have health conditions and you want to be as healthy as possible.

    Remove all the junk foods in your house.

    The right diet is extremely important for your health.
    Obesity is a common source of problems among young adults.

    Download .PDF

    Text (+ Formatting)

    <strong> … </strong>

    Use this element to emphasize strong points on your content.

    <b> … </b>

    This is another option to emphasize key points in your content; ideal for driving attention to important words.

    <em> … </em>

    These are called emphasis tags and as the term implies is used to emphasize text and phrases that could be presented in the italicized format in some browsers.

    <i> … </i>

    You can use this element to use italics without adding other forms of emphasis such as bold tags. This element is used to emphasize names and terms.

    <tt> … </tt>

    This tag is no longer supported in HTML5. It was used to display text identical with those of a typewriter’s.

    <strike> … </strike>

    Another tag that is no longer supported in HTML5; it was used to strike through text or phrases.

    <cite> … </cite>

    If you want to cite references in your content, use these tags.

    <pre> … </pre>

    This tag creates mono-space or text written with whitespace inside the element.

    <del> … </del>

    Use this tag to identify a section of text that was just deleted.

    <ins> … </ins>

    Identifies a section that was inserted within a document.

    <blockquote> … </blockquote>

    This tag is used to group long paragraphs and quotations that were cited.

    <q> … </q>

    If you have shorter quotations, use this tag instead.

    <abbr> … </abbr>

    Create abbreviations while making its full content available.

    <acronym> … </acronym>

    Not supported by HTML5. This tag was used to create abbreviations with the addition of acronyms.

    <address> … </address>

    Authors and writers need this tag to display their contact information.

    <dfn> … </dfn>

    This tag is used to introduce an inline definition within the body of the text.

    <code> … </code>

    Referred to as the code text, it displays code snippets.

    <font> … </font>

    No longer supported by HTML5, this tag was used to color fonts the traditional way.

    <sub> … </sub>

    If you want to subscript text such as shrinking it and setting it a half-line lower than the previous text, this is the HTML tag that you should.

    <sup> … </sup>

    This is the superscript text where you want to place the text a half line higher than the previous text.

    <small> … </small>

    Tag stands for small size text. It is used in HTML5 to reduce the size of the text. It may also be used to identify information that may no longer be valid, accurate, or relevant.

    <bdo> … </bdo>

    This tag is called bi-directional and identifies which text should be read opposite to the previous text.

    HTML Example

    <p><strong>Keep yourself healthy.</strong> You can catch a <em>variety of illnesses</em> outside and inside the house. It is important to get a medical check up at least <strike>one</strike> two times a year for a check-up.</p>

     

    <blockquote>

    You should be examined to prevent serious illnesses and from acquiring deadly viruses.

    <cite>– Dr. Neil Harris Medical Doctor</cite>

    </blockquote>

     

    <pre>

    This is a preformatted text which is a block type element.

    </pre>

     

    <p>While this line has a <code>code tag</code> in it, codes that can be embedded inline.</p>

    How it looks

    Keep yourself healthy. You can catch a variety of illnesses outside and inside the house. It is important to get a medical check up at least one two times a year for a check-up.

    You should be examined to prevent serious illnesses and from acquiring deadly viruses.

    – Dr. Neil Harris Medical Doctor

    This is a preformatted text which is a block type element.

    While this line has a code tag in it, codes that can be embedded inline.

    Download .PDF

    Links (+ Formatting)

    <a href=””> … </a>
    Used as an anchor text for a hyperlink.

    <a href=”mailto:”> … </a>
    You can use this link to retrieve an outgoing message for a specific email address.

    <a href=”tel://###-###”> … </a>
    If you want a link to a phone number clickable, use this tag.

    <a name=”name”> … </a>
    This tag is an anchor that can bring users to identified document elements.

    <a href=”#name”> … </a>
    Use this anchor link to bring users to a specific div element.

    Images (+ Formatting)

    <img/>
    Use this image tag to add and display image files.

    src=”URL”
    This tag is used to display the URL of the image that you want to display.

    alt=”text”
    You need this alternative text tag to help explain the content of the image to search engines and site users.

    height=””
    Provide details on specific image height in terms of pixels or percentages.

    width=””
    Give information on specific width in pixels or percentages.

    align=””
    Represents the alignment of the image relative to the text elements you can find on the page.

    border=””
    Identifies border thickness.

    vspace=””
    Identifies spacing that is found on the top and the bottom of the image.

    hspace=””
    Represents spacing on top or the bottom of the image.

    <map> … </map>
    Advises your users that you have an interactive image with areas they can click unto.

    <map name=””> … </map>
    Identifies the name of the map that is linked to the image and the map.

    <area />
    Identifies the area of the image map.

    HTML Example

    <img src=”planets.gif” width=”145″ height=”126″ alt=“Planets”
    usemap=”#planetmap”>

     

    <map name=”planetmap”>

    <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
    <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
    <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>

    </map>

    Download .PDF

    Lists (+ Formatting)

    <ol> … </ol>

    Use this tag to create numbered or lists that are shown in a sequential order, preference or priority.

    <ul> … </ul>

    This tag is used to create a bullet list without having to place emphasis on order of importance.

    <li> … </li>

    Identifies each item on the list that has to be presented in bullet or number format.

    <dl> … </dl>

    This tag is used specifically for list items definitions.

    <dt> … </dt>

    Use this tag to define a single term within the body’s content.

    <dd> … </dd>

    This tag is used to describe the defined term.

    HTML Example

    <ol>

    <li>Uno</li>

    <li>Dos</li>

    <li>Tres</li>

    </ol>

     

    <ul>

    <li>340g Chicken</li>

    <li>56g onion, sliced</li>

    <li>115g grape tomatoes</li>

    </ul>

     

    <dl>

    <dt>Vegetarian </dt>

    <dd>Summer Pasta</dd>

    <dd>Cheesy Bean Enchiladas</dd>

    <dt>Quick Dinner</dt>

    <dd>Special Burger</dd>

    </dl>

    How it looks

    1. Uno
    2. Dos
    3. Tres
    • 340g Chicken
    • 56g onion, sliced
    • 115g grape tomatoes
    Vegetarian
    Summer Pasta
    Cheesy Bean Enchiladas
    Quick Dinner
    Special Burger
    Download .PDF

    Forms (Formatting and Attributes)

    <form> … </form>
    This tag is called the form element. It creates a form which details how it will run based on attributes.

    action=”URL”
    Referred to as the form action URL, it shows where the data will be sent whenever a user submits a form.

    method=””
    The method attribute describes the HTTP method (Get, Post) which instructs how to send the form.

    enctype=””
    This specific attribute shows how the form data will be encoded when information is sent back to the web server (for method=”post” only).

    autocomplete
    Indicates whether a form should include autocompleting on or off.

    novalidate
    Indicates whether the form should not be validated when it is submitted.

    accept-charsets
    Whenever a form is submitted, this element identified its character encodings.

    target
    Shows where to display the form response once it is submitted. It is usually one of the following _blank, _self,_parent,_top

    <fieldset> … </fieldset>
    Shows the group of all fields found on the form.

    <label> … </label>
    This field label shows the user what information to enter in a specific field.

    <legend> … </legend>
    This tag is called the form legend. It functions as a caption for the fieldset element.

    <input />
    This tag is called the form input attribute and identifies the type of field information that will be received from the user.

    Input Type Attributes

    type=””
    Shows the field input type; usually including text, password, date-time, checkbox, password submit among others.

    name=””
    Identifies the name of the form.

    value=””
    Identifies the value or input field information.

    size=””
    Indicates the input element width with the use of characters.

    maxlength=””
    Indicates the allowed number of maximum input element characters.

    required
    This tag makes sure the <input> element is properly filled out before the user submits the form.

    step=””
    Indicates the legal number of intervals for an input field.

    width=””
    Indicates the width in pixels of an <input> element.

    height=””
    Indicates the height in pixels, of an <input> element.

    placeholder=””
    Tells the user what the <input? Element value should be.

    pattern=””
    Shows the regular expression which the <input> element gets checked against to make sure the user entered the correct information.

    min=””
    Indicates the minimum value allowed per <input> element.

    max=””
    Indicates the maximum value allowed per <input> element.

    autofocus
    Tells you if the <input> element comes into focus once the page loads.

    disabled
    Disables the <input> element found on the form.

    <textarea> … </textarea>
    Indicates a large input of text for longer messages.

    Select Attributes

    name=””
    Refers to the name for a drop-down combination box.

    size=””
    Indicates the number of available options in a drop-down box.

    multiple
    Enables user to make multiple selections.

    required
    Informs user that a value has to be selected before a form can be submitted.

    autofocus
    Informs user that a drop-down list will come into focus once a page loads.

    <optgroup> … </optgroup>
    Indicates the complete grouping of available options.

    <option> … </option>
    Identifies one of the options available in the drop-down box.

    Option Attributes

    value=””
    Informs the user of the value of the option that is available for selection.

    <button> … </button>
    Identifies the default selected option for users.

    selected
    Identifies the button users can use to submit options.

    HTML Example

    <form action=”action_page.php” method=”post”>

    <fieldset>

    <legend>Customer  information:</legend>

    First name:<br>

    <input type=”text” name=”firstname” value=”John” placeholder=”First Name”><br>

    Last name:<br>

    <input type=”text” name=”lastname” value=”Doe” placeholder=”Last Name”><br><br>

    Favorite Guitar:<br>

    <select>

    <option value=”peavey”>Peavey</option>

    <option value=”fender”>Fender</option>

    <option value=”gibson”>Gibson</option>

    <option value=”ibanez”>Ibanez</option>

    </select>

    Notes:<br>

    <textarea name=”description”></textarea>

    <input type=”submit” value=”Submit”>

    </fieldset>

    </form>

    Download .PDF

    How it looks

    Customer information:

    First name:

    Last name:

    Favorite Guitar:

    Notes:

    Tables (+ Formatting)

    <table> … </table>
    This is called the table tag and shows all table related content

    <caption> … </caption>
    The caption tag describes what the table is and what it contains.

    <thead> … </thead>
    The table headers tag shows the user the type of information indicated in each column below it.

    <tbody> … </tbody>
    The table body tag shows the table’s data or information.

    <tfoot> … </tfoot>
    Table footers tag tells user all about footer content.

    <tr> … </tr>
    Presents all the information that is included in a single row of the table.

    <th> … </th>
    Shows the actual information contained in a single header item.

    <td> … </td>
    Shows the actual information contained in a single table cell.

    <colgroup> … </colgroup>
    Organizes a single or multiple columns for easy formatting.

    <col />
    Identifies a single column of information located inside a table.

    HTML Example

    <table>

    <colgroup>

    <col span=”3″ style=”background-color:#f1f1f1″>

    </colgroup>

    <tr>

    <th>Name</th>

    <th>Age</th>

    <th>Gender</th>

    </tr>

    <tr>

    <td>Jack</td>

    <td>38</td>

    <td>Male</td>

    </tr>

    <tr>

    <td>Jill</td>

    <td>32</td>

    <td>Female</td>

    </tr>

    </table>

    How it Looks

    Name Age Gender
    Jack 38 Male
    Jill 32 Female
    Download .PDF

    Objects and iFrames

    <object> … </object>

    Referred to as the object tag, it describes a type of file that has been embedded. This may be an audio or video file, PDF, and additional pages among others.

    height=””

    Indicates the height of the object in pixels.

    width=””

    Indicates the width of the object in pixels.

    type=””
    Indicates the type of media contained in the data.

    usemap=””
    Identifies the name of the client-side image map within <object>

    <iframe> … </iframe>
    This tag includes an inline frame which will enable you to embed external information into a current document.

    iFrame Attributes

    name=””
    Identifies the name of the <iframe>.

    src=””
    This refers to the URL source of the original document that is embedded inside the <iframe>.

    srcdoc=””
    This element contains the actual HTML content that is displayed in the <iframe> of the current page.

    width=””
    Identifies the width of your <iframe>.

    <param/>
    Adding extra parameters will help you customize the content of the <iframe>.

    <embed> … </embed>
    This is called the embed tag. It functions as a container for another application or plug-in.

    Embed Attributes

    height=””
    Identifies the height of the embedded content.

    width=””
    Identifies the width of the embedded content.

    src=””
    Identifies the source URL of the embedded external file.

    type=””
    Identifies the type of media file of the embedded content.

    HTML Example

    <object width=”400″ height=”400″></object>
    <iframe src=”sample_iframe.htm” width=”200″ height=”200″></iframe>
    <embed src=”file.swf” width=”200″ height=“200″></embed>

    Download .PDF

    HTML5 New Tags

    <header> … </header>
    Identifies the header block for an individual section or a document.

    <footer> … </footer>
    Shows the footer block for the individual section or document.

    <main> … </main>
    Details the main content of a document.

    <article> … </article>
    Indicates an article inside a document.

    <aside> … </aside>
    Defines the content that is contained in a document sidebar.

    <section> … </section>
    Defines the section block in a document.

    <details> … </details>
    Details additional facts or information the user can either view or hide.

    <dialog> … </dialog>
    Refers to a dialog box or window.

    <figcaption> … </figcaption>
    This <figure> element is a caption that details the figure.

    <figure> … </figure>
    This tag represents an independent content block that includes diagrams, photos, illustrations, and more.

    <mark> … </mark>
    Shows the highlighted portion of text within the content of the page.

    <nav> … </nav>
    Refers to navigation links that can be used in the document.

    <menuitem> … </menuitem>
    Identifies the specific menu item that a user can get from a pop-up menu.

    <meter> … </meter>
    Details the scalar measurement of a known array.

    <progress> … </progress>
    Shows the progress of a task that is usually presented in a progress bar.

    <rp> … </rp>
    Shows the text within browsers that do not support ruby annotations.

    <rt> … </rt>
    Shows details of East Asian typography characters.

    <ruby> … </ruby>
    Details a ruby annotation for East Asian typography.

    <summary> … </summary>
    Includes a visible heading for a <details> element.

    <bdi> … </bdi>
    Allows you to format part of the text in a different direction from other text.

    <time> … </time>
    Shows the time and date.

    <wbr>
    Shows a line-break within the content.

    Download .PDF

    Collective Character Objects

    &#34; &quot;          Quotation Marks – ”

    &#38; &amp;          Ampersand, or ‘and’ sign – &

    &#60; &lt;                Less than symbol – <

    &#62; &gt;               Greater than symbol – >

    &#160; &nbsp;       A space (non-breaking space)

    &#169; &copy;       Copyright symbol – ©

    &#64; &Uuml;            @ Symbol

    &#149; &ouml;          Small bullet – •

    &#153; &ucirc;           Trademark symbol – ™

    &reg; &#174;              Registered Trademark symbol –  ®

    &phone; &#9742;     Black Phone – ☎

    Download .PDF