Learning HTML is hard enough, without having to memorize dozens of tags & attributes. That’s why we’ve put together this handy HTML cheat sheet for you to print out & keep by your side as you learn to code HTML, CSS & javascript. It makes the process of learning to code & building your first website much easier. Download The PDF Now. See the text formatting example, and select 'view source' in your browser to see the html code. (.) Important Note: Tags marked with (.) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements. WebsiteSetup.org - Beginner’s HTML Cheat Sheet 6 The HTML element displays its contents styled in a fashion intended to indicate that the. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks. However, HTML is a broad language and there is a lot to memorize. That’s why the following cheat sheet has been provided, providing easy reference to the most common and useful HTML codes. Basic HTML Page. These are the basic beginnings of an HTML page.
This cheat sheet - or HTML code quick reference - lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.
What is html
? What are tags
? - Perhaps check out where to start or what is html first :-)
| Basic HTML Structure | Help | Top |
|---|
| Common Tags for Blogs | Help | Top |
|---|
| <h?> heading </h?> | Heading (h1 for largest to h6 for smallest) |
| <p> paragraph </p> | Paragraph of Text |
| <b> bold </b> | Make text between tags bold |
| <i> italic </i> | Make text between tags italic |
| <a href='url'> link name </a> | Create a link to another page or website |
| <div> ... </div> | Divide up page content into sections, and applying styles |
| <img src='filename.jpg'> | Show an image |
| <ul> <li> list </li> </ul> | Unordered, bullet-point list |
| <br> | Line Break (force a new line) |
| <span> red </span> | Use CSS style to change text colour |
| Text Formatting | Help | Top |
|---|
| <h?> ... </h?> | Heading (?= 1 for largest to 6 for smallest, eg h1) |
| <b> ... </b> | Bold Text |
| <i> ... </i> | Italic Text |
| <u> ... </u> | Underline Text |
| <strike> ... </strike> | Strikeout |
| <sup> ... </sup> | Superscript - Smaller text placed below normal text |
| <sub> ... </sub> | Subscript - Smaller text placed below normal text |
| <small> ... </small> | Small - Fineprint size text |
| <tt> ... </tt> | Typewriter Text |
| <pre> ... </pre> | Pre-formatted Text |
| <blockquote> ... </blockquote> | Text Block Quote |
| <strong> ... </strong> | Strong - Shown as Bold in most browsers |
| <em> ... </em> | Emphasis - Shown as Italics in most browsers |
| <font> ... </font> | Font tag obsolete, use CSS. (*) |
| Section Divisions | Help | Top |
|---|
| <div> ... </div> | Division or Section of Page Content |
| <span> ... </span> | Section of text within other content |
| <p> ... </p> | Paragraph of Text |
| <br> | Line Break |
| <hr> | Basic Horizontal Line |
| <hr> Tag Attributes: |
| size='?' | Line Thickness in pixels |
| width='?' | Line Width in pixels |
| width='??%' | Line Width as a percentage |
| color='#??????' | Line Colour(*) |
| align='?' | Horizontal Alignment: left, center, right(*) |
| noshade | No 3D cut-out |
| <nobr> ... </nobr> | Line Break |
| Images | Help | Top |
|---|
| <img src='url' alt='text'> | Basic Image |
| <img> Tag Attributes: |
| src='url' | URL or filename of image (required!) |
| alt='text' | Alternate Text (required!) |
| align='?' | Image alignment within surrounding text (*) |
| width='??' | Image width (in pixels or %) |
| height='??' | Image height (in pixels or %) |
| border='??' | Border thickness (in pixels) (*) |
| vspace='??' | Space above and below image (in pixels) (*) |
| hspace='??' | Space on either side of image (in pixels) (*) |
| Linking Tags | Help | Top |
|---|
| <a href='url'> link text </a> | Basic Link |
| <a> Tag Attributes: |
| href='url' | Location (url) of page to link to. |
| name='??' | Name of link (name of anchor, or name of bookmark) |
| target='?' | Link target location: _self, _blank, _top, _parent. |
| href='url#bookmark' | Link to a bookmark (defined with name attribute). |
| href='mailto:email' | Link which initiates an email (dependant on user's email client). |
| Lists | Help | Top |
|---|
| <ol> ... </ol> | Ordered List |
| <ul> ... </ul> | Un-ordered List |
| <li> ... </li> | List Item (within ordered or unordered) |
| <ol type='?'> | Ordered list type: A, a, I, i, 1 |
| <ol start='??'> | Ordered list starting value |
| <ul type='?'> | Unordered list bullet type: disc, circle, square |
| <li value='??'> | List Item Value (changes current and subsequent items) |
| <li type='??'> | List Item Type (changes only current item) |
| <dl> ... </dl> | Definition List |
| <dt> ... </dt> | Term or phrase being defined |
| <dd> ... </dd> | Detailed Definition of term |
| Tables | Help | Top |
|---|
| <table> ... </table> | Define a Table |
| <table> Tag Attributes: |
| border='?' | Thickness of outside border |
| bordercolor='#??????' | Border Colour |
| cellspacing='?' | Space between cells (pixels) |
| cellpadding='?' | Space between cell wall and content |
| align='??' | Horizontal Alignment: left, center, right(*) |
| bgcolor='#??????' | Background Colour (*) |
| width='??' | Table Width (pixels or %) (*) |
| height='??' | Table Height (pixels or %) (*) |
| <tr> ... </tr> | Table Row within table |
| <th> ... </th> | Header Cell within table row |
| <td> ... </td> | Table Cell within table row |
| <td> Tag Attributes: |
| colspan='?' | Number of columns the cell spans across (cell merge) |
| rowspan='?' | Number of row a cell spans across (cell merge) |
| width='??' | Cell Width (pixels or %) (*) |
| height='??' | Cell Height (pixels or %) (*) |
| bgcolor='#??????' | Background Colour (*) |
| align='??' | Horizontal Alignment: left, center, right(*) |
| valign='??' | Vertical Alignment: top, middle, bottom(*) |
| nowrap | Force no line breaks in a particular cell |
| Frames | Help | Top |
|---|
| <frameset> ... </frameset> | Define the set of Frames |
| <frameset> Tag Attributes: |
| rows='??,??, ...' | Define row sizes & number of rows (size in pixels or %) |
| cols='??,??, ...' | Define column sizes & number of columns (size in pixels or %) |
| noresize='noresize' | User cannot resize any frames in frameset |
| <frame> ... </frame> | Define a frame within the frameset |
| <frame> Tag Attributes: |
| src='url' | Location of HTML File for a frame |
| name='***' | Unique name of frame window |
| marginwidth='?' | Horizontal margin spacing inside frame (pixels) |
| marginheight='?' | Vertical margin spacing inside frame (pixels) |
| noresize='noresize' | Declare all frameset sizes as fixed |
| scrolling='***' | Can the user scroll inside the frame: yes, no, auto |
| frameborder='?' | Frame Border: (1=yes, 2=no) |
| bordercolor='#??????' | Border Colour (*) |
| <noframes> ... </noframes> | Unframed content (for browsers not supporting frames) |
| Forms | Help | Top |
|---|
| <form> ... </form> | Form input group decleration |
| <form> Tag Attributes: |
| action='url' | URL of Form Script |
| method='***' | Method of Form: get, post |
| enctype='***' | For File Upload: enctype='multipart/form-data' |
| <input> ... </input> | Input field within form |
| <input> Tag Attributes: |
| type='***' | Input Field Type: text, password, checkbox, submit etc. |
| name='***' | Form Field Name (for form processing script) |
| value='***' | Value of Input Field |
| size='***' | Field Size |
| maxlength='?' | Maximum Length of Input Field Data |
| checked | Mark selected field in radio button group or checkbox |
| <select> ... </select> | Select options from drop down list |
| <select> Tag Attributes: |
| name='***' | Drop Down Combo-Box Name (for form processing script) |
| size='?' | Number of selectable options |
| multiple | Allow multiple selections |
| <option> ... </option> | Option (item) within drop down list |
| <option> Tag Attributes: |
| value='***' | Option Value |
| selected | Set option as default selected option |
| <textarea> ... </textarea> | Large area for text input |
| <textarea> Tag Attributes: |
| name='***' | Text Area Name (for form processing script) |
| rows='?' | Number of rows of text shown |
| cols='?' | Number of columns (characters per rows) |
| wrap='***' | Word Wrapping: off, hard, soft |
Html Formatting Code Cheat Sheet
| Special Characters | Help | Top |
|---|
| < | < - Less-Than Symbol |
| > | > - Greater-Than Symbol |
| & | & - Ampersand, or 'and' sign |
| " | ' - Quotation Mark |
| © | © - Copyright Symbol |
| ™ | ™ - Trademark Symbol |
| | - A space (non-breaking space) |
| &#??; | ISO 8859-1 character - replace ?? with the iso code |
| Miscellaneous Tags | Help | Top |
|---|
| <!-- ... --> | Comment within HTML source code |
| <!DOCTYPE html ... > | Document Type Definition (wiki) |
| <meta> ... </meta> | META information tag |
| <meta> Tag Attributes: |
| name='***' | Meta name: description, keywords, author |
| http-equiv='***' | HTTP Equivalent Info: title, etc. |
| content='***' | Information content |
| <link> | LINK content relationship tag |
| <link> Tag Attributes: |
| rel='***' | Type of forward relationship |
| http='url' | Location (URL) of object or file being linked |
| type='***' | Type of object or file, eg: text/css |
| title='***' | Link title (optional) |
| Body Background & Colours | Help | Top |
|---|
| <body> Tag Attributes: |
| background='url' | Background Image (*) |
| bgcolor='#??????' | Background Colour(*) |
| text='#??????' | Document Text Colour (*) |
| link='#??????' | Link Colour (*) |
| vlink='#??????' | Visited Link Colour (*) |
| alink='#??????' | Active Link Colour (*) |
| bgproperties='fixed' | Background Properties - 'Fixed' = non-scrolling watermark (*) |
| leftmargin='?' | Side Margin Size in Pixels (Internet Explorer) (*) |
| topmargin='?' | Top Margin Size in Pixels (Internet Explorer) (*) |
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.
Prev | Top | Next
The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of the web page, however, too much variety in the text formatting can also look displeasing.
- Header -
<h?> </h?> - There are 6 levels of headings available, from
h1 for the largest and most important heading, down to h6 for the smallest heading. - Bold -
<b> </b> - The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.
- Italic -
<i> </i> - Also working the same way as a word processor, italics displays the text at a slight angle.
- Underline -
<u> </u> - Again, the same as underline in a word processor. Note that html links are already underlined and don't need the extra tag.
- Strike-out -
<strike> </strike> - Puts a line right through the centre of the text, crossing it out. Often used to show that text is old and no longer relevant. Also works by using
<s> </s> instead. - Preformatted Text -
<pre> </pre> - Any text between the
pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces) - Source Code -
<code> </code> - Text is displayed in a fixed-width font, commonly used when showing source code. I have used it on this site, along with stylesheets, to show all tags.
- Typewriter Text -
<tt> </tt> - The text appears to have been typed by a typewriter, in a fixed-width font. (*)
- Block Quote -
<blockquote> </blockquote> - Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.
- Small -
<small> </small> - Instead of having to set a font size, you can use the
small tag to render text slightly smaller than the text around it. Useful for displaying the 'fine-print'. - Font Colour -
<font color='#??????'> </font>(*) - Change the colour of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colours and codes for some samples. (*)
- Font Size -
<font size='?'> </font> - Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest. (*)
- Font Size Change -
<font size='+/-?'> </font> - For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify. Eg:
<font size='-1'>Some Text</font>(*) - Change Font Face -
<font face='?'> </font> - To show text in a particular font, use the font name such 'Helvetica' or 'Arial' or 'Courier'. Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them. (*)
- Centre -
<center> </center> - A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page). (*)
- Emphasis -
<em> </em> - Used to emphasize text, which usually appears in italics, but can vary according to your browser.
- Strong Emphasis -
<strong> </strong> - Used to emphasize text more, which usually appears in bold, but can vary according to your browser.
Example:
See the text formatting example, and select 'view source' in your browser to see the html code.
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.
Html Formatting Cheat Sheet Free
Prev | Top | Next