HTML CheatSheet for Beginners(With HTML5)

HTML stands for Hyper Text Markup Language. It is the basic language that is used to create web pages and websites. It defines the basic structure of the webpage and tells the browser where to keep those particular elements like Images, Videos, and text on the screen. It is one of the most useful language in today’s world. 

 

As there are so many tags in HTML and it’s very important to use proper tags to make the best structure of the website because the wrong structure of your website may break and will also make it difficult for google to search. So we need a HTML cheatsheet in which all the tags are available and it also makes developer work easier.

HTML Cheatsheet for Beginners

HTML Cheatsheet

Basic Tags

 <html>…….. </html>

         – Creates an HTML document.

 <head>………</head> 

         – Sets off the title & other info that isn’t displayed.

 <body>……….</body>

         – Sets off the visible portion of the document.

 <title>………….</title>

          – Puts the name of the document in the title bar; when bookmarking pages, this is what is bookmarked.

Document Information

 <base>

         – Used to specify the base URL of your site. 

 <meta>

         – This is the metadata tag for the web page.

 <link>

         – This is used to link to scripts external to the webpage.

 <style>……… </style>

         – The style tag can be used as an alternative to an external style sheet. 

 <script>………</script>

          – Used to add code snippets, typically in javascript, to make the web page dynamic.

Formating

 <p>…….</p>

    – Creates a new paragraph.

 <br>

    – Inserts a line break. 

 <blockquote>…… </blockquote>

    – Puts content in a quote. 

 <div>……..</div>

    – Used to format block content in CSS.

 <span>……..</span>

    – Used to format inline content with CSS.

List

 <ul>…….</ul>

     – Create an unordered list. 

 <ol>………</ol>

     – Creates an ordered list.

 <li>……….</li>

     – Encompasses each list item.

 <dl>………..</dl>

     – Creates a definition list.

 <dt>

     – Precedes each definition term.

 <dd>

     – Precedes each definition.

 

Links

 <a href=”URL”>Text</a>

     – Creates a link to the URL.

 <a href=”mailto:email-address”>Text</a>

     – Creates a link to the email address.

 <a name=”NAME”>

     – Creates a target location within a document.

 <a href=”#Name”>Text</a>

    – Creates a link to that target location.

Table

 <table>……</table>

     – Creates a table.

 <td>…..</td>

     – Define a standard data cell in a table.

 <tr>……</tr>

     – Sets off each row of the table.

 <th>……</th>

     – Sets off the heading of the cell.

Table Attributes

 <table border= >

     – Sets the width of the border around table cells.

 <table cellspacing= >

     – Sets the amount of space between table cells.

 <table cellpadding= >

     – Sets the amount of space between a cell’s border and its contents.

 <table Width= >

     – Sets the width of the table in pixels or as a percentage.

 <tr align= >

     – Sets alignment for cells within the row (left/center/right).

 <td align= >

     – Sets alignment for cells (left/center/right). 

 <tr valign= >

     – Sets vertical alignment for cells within the row (top/middle/bottom).

 <td valign= >

     – Sets vertical alignment for cell (top/middle/bottom).

 <td rowspan= >

     – Sets the number of rows a cell should span (default=1).

 <td colspan= >

     – Sets the number of columns a cell should span.

 <td nowrap>

     – Prevents lines within a cell from being broken to fit.

Body Attributes

 

 <body bgcolor= >

        – Sets background color, using a name or hex value.

 <body text= >

        – Sets text color, using a name or hex value.

 <body link= >

         – Sets a color of a link, using a name or hex value.

 <body vlink= >

          – Sets the color of visited links, using a name or hex value.

 <body alink= >

           – Sets the color of active links (while mouse-clicking). 

Text Tags

 <pre>……</pre>

      – Create preformatted text.

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

      – Create headlines .. H1- Largest, H6-Smallest .

 <b>……..</b>

       – Creates bold text.

 <strong>……</strong>

        – Works the same as bold tag <b>.

 <i>…….</i>

        – Creates italicized text. 

 <em>…….</em>

        – Works the same as italic tag <i>.

 <tt>……</tt>

       – Create typewriter-style text.

 <code>……</code>

     – Used to define source code.

 <cite>…….</cite>

     – Creates address section, usually processed in italics.

 <address>………</address>

     – Creates address section, usually processed in italics.

 <font size= >……..</font>

      – Sets the size of the font.

 <font face= >……….</font>

    – Defines the font used. 

 <strike>………..</strike>

    – This is used to draw a line in the center of the text.

 <del>……….</del>

     – pre-formatted, monospace text laid out with whitespace inside the element intact. 

 <q>………..</q>

     – Similar to the backquote tag but for shorter quotes. 

 <acronym>………</acronym>

    – Tag for acronyms. NO HTML 5 support. 

 <abbr>……..</abbr>

     – Denotes abbreviation, along with the full forms. 

 <dfn>………</dfn>

    – Tag dedicated to the definition. 

Forms

 <form>…..</form>

     – Defines a form.

 <select name= >…..</select>

     – Creates a pulldown menu.

 <option>

     – Sets off each menu item. 

 <select multiple name= size= >……</select>

     – Creates a scrolling menu. Size sets the number of menu items visible before the user scrolls. 

 <textarea  name= cols=  rows= >…..</textarea>

     – Creates a text box area. Columns set the width; rows set the height.

 <input type=”checkbox” name= value= >

     – Creates a checkbox. 

 <input type=”checkbox” name= value=  checked>

     – Creates a pre-checked checkbox.

 <input type=”radio” name= value= >

      – Creates a radio button.

 <input type=”radio” name= value= >

     – Creates a radio button.

 <input type=”radio” name= value=  checked>

     – Creates a radio button that is pre-checked.

 <input type=”text” name= size= >

     – Creates a one-line text area. Size sets length, in characters.

 <input type=”submit” value= >

     – Creates a submit button. Value sets the text in the submit button.

 <input type=”image” name= src= border= alt= >

     – Creates a submit button using an image. 

 <input type=” reset”>

     – Creates a reset button.

 <input type=” email” name= >

     – Sets a single-line textbox for email addresses.

 <input type=” URL” name= >

     – Sets a single-line textbox for URLs.

 <input type=” number” name= >

      – Sets a single-line textbox for a number.

 <input type=” Range” name= >

     – Sets a single-line text box for a range of numbers. 

 <input type=” date/month/time/week” name= >

     – Sets a single-line text box with a calendar showing the date/month/week/time. 

 <input type=” search” name= >

     – Sets a single-line text box for searching.

 <input type=” color” name= >

     – Sets a single-line text box for picking a color.

HTML Cheatsheet

Hope this HTML Cheatsheet was helpful to you and you have got an answer to your question. Check out more posts to get solutions to more questions.
Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *