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 extended HTML reference documentation as well as a deep instructional set of HTML guides. However, in many cases we just need some quick hints as we go. That's the whole purpose of this cheat sheet—to give you some quick, accurate, ready-to-use code snippets for common usages.
Inline Elements
An "element" is a single part of a webpage. 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.
Inline elements: usage and examples
| Usage | Element | Example |
|---|---|---|
| Anchor / Link | <a> | <a href="https://site.com">Link</a> |
| Bold (Semantic) | <strong> | <strong>Important Text</strong> |
| Emphasis | <em> | <em>Italicized Text</em> |
| Image | <img> | <img src="pic.jpg" alt="Desc"> |
| Span (Container) | <span> | <span class="highlight">Text</span> |
| Line Break | <br> | Line 1<br>Line 2 |
| Input Field | <input> | <input type="text" name="user"> |
| Button | <button> | <button>Click Me</button> |
Block Elements
Unlike inline elements, "block-level elements" always start on a new line and take up the full width available (stretching out to the left and right as far as they can). They form the main structure of your page.
Block elements: usage and examples
| Usage | Element | Example |
|---|---|---|
| Paragraph | <p> | <p>This is a paragraph.</p> |
| Division | <div> | <div>Content block</div> |
| Headings | <h1>-<h6> | <h1>Main Title</h1> |
| Unordered List | <ul> | <ul><li>Item</li></ul> |
| Form | <form> | <form action="/submit">...</form> |