HTML cheatsheet for syntax and common tasks
While usingHTML 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 extendedHTML reference documentation as well as a deep instructionalset of HTML guides. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheat sheet, to give you some quick accurate ready to use code snippets for common usages.
Note:HTML tags must be used for their semantic value, not their appearance. It's always possible to totally change the look and feel of a given tag usingCSS 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 placed within the<body> element.
| Usage | Element | Example |
|---|---|---|
| A link | <a> | html |
| An image | <img> | html |
| An inline container | <span> | html |
| Emphasize text | <em> | html |
| Italic text | <i> | html |
| Bold text | <b> | html |
| Important text | <strong> | html |
| Highlight text | <mark> | html |
| Strikethrough text | <s> | html |
| Subscript | <sub> | html |
| Small text | <small> | html |
| Address | <address> | html |
| Textual citation | <cite> | html |
| Superscript | <sup> | html |
| Inline quotation | <q> | html |
| A line break | <br> | html |
| A possible line break | <wbr> | html |
| Date | <time> | html |
| Code format | <code> | html |
| Audio | <audio> | html |
| Video | <video> | html |
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.
Note:Because this cheat sheet is limited to a few elements representing specific structures or having special semantics, thediv element is intentionally not included — because thediv element doesn't represent anything and doesn't have any special semantics.
| Usage | Element | Example |
|---|---|---|
| A simple paragraph | <p> | html |
| An extended quotation | <blockquote> | html |
| Additional information | <details> | html |
| An unordered list | <ul> | html |
| An ordered list | <ol> | html |
| A definition list | <dl> | html |
| A horizontal rule | <hr> | html |
| Text Heading | <h1>-<h6> | html |