Html Cheat Sheet
The W3C Cheat Sheet is an open source toolfreely available for Web developers. It also incorporates data from the WHATWG DOM specification. Please send bugs reports and enhancements suggestions to. Please consider making a donation to support the Cheat Sheet and other. I’ve also written this HTML Guide for Beginners and put together this HTML cheat sheet. If you’re interested in alternative ways of building a website (i.e. Using WordPress), feel free to check out my website building guide with WordPress. HTML Cheat Sheet HTML (Hypertext Markup Language) has come a long way since Tim Berners-Lee invented it in 1991. HTML5 is the latest version supported by modern web browsers. Our HTML cheat sheet has a full list of all HTML elements, including descriptions, code examples and live previews. HTML Cheat Sheet, New HTML5 Tags Included (PDF, JPG) Source. HTML5 Cheat Sheet (PNG, PDF) Source. Ultimate HTML 5 Cheat Sheet (JPG, PDF) Source. HTML 5 Mega Cheat Sheet.
While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.
Remember that HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.
Inline elements
An 'element' is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are 'nested' inside larger ones. By default, 'inline elements' appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.All inline elements can be implemented within the <body></body> tags.
| Usage | Code snippet | Result |
|---|---|---|
| A simple link | <a href='https://developer.mozilla.org'>A link to MDN</a> | A link to MDN |
| A simple image | <img src='/static/img/beast.png' width='25' /> | |
| A generic inline container | <p>p its used to <span>style and group</span> particular elements </p> | p its used to style and group particular elements |
| Another inline container | <p>span its used to differentiate a part <span>of the content</span> that we will work on differently </p> | span its used to differentiate a part of the content that we will work on differently |
| Emphasize some text | <em>I'm posh</em> | I'm posh |
| Italic text | You can mark a phrase in the text in <i>italics</i> | You can mark a phrase in the text in italics |
| Bold some text | <b>Bold a word or phrase</b>within the text | Bold a word or phrase within the text |
| Mark text as important | <strong>I'm important</strong> | I'm important |
| Highlight some text | <mark>Notice me</mark> | Notice me |
| Draw a line through irrelevant text | <s>I'm irrelevant</s> | |
| Underline a non-textual annotation | This is <u>mispelled</u> | This is mispelled |
| Text displayed lower than normal text | H<sub>2</sub>O | H2O |
| Small text | Used to represent the <small>small print </small>of a document | Used to represent the small print of a document |
| Used for an address | <address>Main street 67</address> | Main street 67 |
| Used for a textual cite | <cite>Lorem ipsum</cite> | lorem ipsum |
| Text displayed higher than normal text | x<sup>2</sup> | x2 |
| A short inline quotation | <q>The q element indicates a short inline quotation.</q> | The q element indicates a short inline quotation. |
| A line break | Line 1<br>Line 2 | Line 1 Line 2 |
| Suggesting a line break | It is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line | It is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line |
| Date in readable form | It is used to format the date legibly for the user, such as: <time datetime='2020-05-24' pubdate>published on 23-05-2020</time> | It is used to format the date legibly for the user, such as: |
| Text displayed in code format | <p>This text is in normal format.</p> <code>This text is in code format.</code> <pre>This text is in predefined format.</pre> | This text is in normal format. This text is in code format. |
| Embedded Audio | <audio controls='controls' src='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg'>Your browser does not support the HTML5 Audio element.</audio> | Your browser does not support the HTML5 Audio element. |
| Embedded Audio with alternative sources | <audio controls='controls'> <source='https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3' type='audio/mpeg'> <source='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg' type='audio/mpeg'> Your browser does not support Audio. </audio> | Your browser does not support Audio. |
| Embedded Video | <video controls src='https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4'>The <code>video</code> element is unsupported.</video> |
Block elements
'Block elements,' on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.
| Usage | Code snippet | Result |
|---|---|---|
| A simple paragraph |
| I'm a paragraph I'm another paragraph |
| An extended quotation | <blockquote>The blockquote element indicates an extended quotation.</blockquote> | The blockquote element indicates an extended quotation. |
| Additional information | <details><summary>Html Cheatsheet</summary><p>Inline elements</p><p>Block elements</p></details> | Html CheatsheetInline elements Block elements |
| An unordered list | <ul> |
|
| An ordered list | <ol> |
|
| A definition list |
|
|
| A horizontal rule | <hr> | |
| Text Heading |
| This is Heading 2This is Heading 3This is Heading 4This is Heading 5This is Heading 6 |
Your browser does not support the audio element.
Html Cheat Sheet Printer Friendly
Welcome to my HTML Guide -- I hope you find it useful :)
It covers several topics with easy to understand descriptions of HTML tags you need when learning how to make a website.
Starting with the essential tags and the basics should give you enough to write your first page.
Confused? What is html
? What are tags
? - Perhaps see where to start or what html really means.
Stylesheets (CSS)
Cascading Style Sheets (CSS) are used to set the look and feel of a website. While the HTML defines the content and how it is organised, you should use stylesheets to define things like colours, borders, size and font.
Learn by Example
Often, the best way to learn is by example. You will find many samples such as this one, which shows the basic html structure.
Try out the examples using the live demo, experiment by entering your own tags to see how they work.
Cheat Sheets
Don't miss the HTML cheat sheet for a quick reference list of HTML tags and their attributes all on one page.
There is also the CSS cheat sheet for style sheets.
Html Cheat Sheet.com
Comments, feedback and suggested improvements are welcome, please let me know what you think.
Html Cheat Sheet With Examples