Discover essential HTML elements with this comprehensive HTML Cheat Sheet for website design. Quickly reference tags, links, formatting, forms, and more with clear examples
Hypertext Markup Language (HTML) is the fundamental language for creating webpages and web applications. It structures content on the web and serves as the foundation upon which CSS and JavaScript build to make webpages interactive and visually appealing. This HTML cheat sheet quickly references essential HTML elements, helping you design and structure your web pages efficiently.
Element | Description | Example Snippet |
---|---|---|
<html></html> | Defines the root of an HTML document | <html> ... </html> |
<head></head> | Contains meta-information about the document | <head> ... </head> |
<body></body> | Contains the content of an HTML document | <body> ... </body> |
<title></title> | Sets the title of the webpage, shown in the browser tab | <title>Bookshop Home</title> |
Element | Description | Example Snippet |
---|---|---|
<pre></pre> | Preformatted text | <pre>New Arrivals\nSpecial Offers\nBestsellers</pre> |
<h1></h1> | Defines HTML headings (h1 to h6) | <h1>Welcome to Book Haven</h1> |
<strong></strong> | Bold text | <strong>Exclusive Sale</strong> |
<em></em> | Emphasized text (italic) | <em>Must-read Classics</em> |
<tt></tt> | Monospaced teletype text | <tt>ISBN: 978-3-16-148410-0</tt> |
<code></code> | Computer code text | <code>alert("Welcome to our bookstore!");</code> |
<cite></cite> | Cited work | <cite>by Jane Austen</cite> |
<address></address> | Contact information | <address>123 Book St., Bibliopolis, BK 12345</address> |
Element | Description | Example Snippet |
---|---|---|
<a href="URL">clickable text</a> | Hyperlink to a URL | <a href="https://bookhaven.com">Visit Our Store</a> |
<a href="mailto:EMAIL_ADDRESS">clickable text</a> | Email link | <a href="mailto:info@bookhaven.com">Contact Us</a> |
<a name="NAME"></a> | Anchor in the page | <a name="section1"></a> |
<a href="#NAME">clickable text</a> | Link to an anchor | <a href="#section1">Learn More</a> |
Element | Description | Example Snippet |
---|---|---|
<p></p> | Paragraph | <p>Welcome to our online bookshop where you can find a wide selection of books.</p> |
<br> | Line break | Line 1<br>Line 2 |
<blockquote></blockquote> | Block quotation | <blockquote>"Reading is to the mind what exercise is to the body." - Joseph Addison</blockquote> |
<div></div> | Division or section in an HTML document | <div class="bestsellers">Our Bestsellers</div> |
<span></span> | Inline container for text | <span class="highlight">Special Offer</span> |
Element | Description | Example Snippet |
---|---|---|
<ul></ul> | Unordered list | <ul><li>Fiction</li><li>Non-Fiction</li><li>Children's Books</li></ul> |
<ol start="?></ol> | Ordered list with start attribute | <ol start="2"><li>Second Item</li><li>Third Item</li></ol> |
<li></li> | List item | <li>New Release</li> |
<dl></dl> | Description list | <dl><dt>Author</dt><dd>J.K. Rowling</dd></dl> |
Element | Description | Example Snippet |
---|---|---|
<hr> | Horizontal rule | <hr> |
<hr size=?> | Horizontal rule with size attribute | <hr size="5"> |
<hr width=?> | Horizontal rule with width attribute | <hr width="50%"> |
<hr noshade> | Horizontal rule without shading | <hr noshade> |
<img src="URL" /> | Embeds an image with a source URL | <img src="cover.jpg"> |
<img src="URL" align=?> | Aligns the image relatively | <img src="cover.jpg" align="left"> |
<img src="URL" border=?> | Sets border width around the image | <img src="cover.jpg" border="1"> |
<img src="URL" height=?> | Sets height of the image | <img src="cover.jpg" height="200"> |
<img src="URL" width=?> | Sets width of the image | <img src="cover.jpg" width="150"> |
<img src="URL" alt=?> | Provides alternative text for the image | <img src="cover.jpg" alt="Book Cover"> |
Element | Description | Example Snippet |
---|---|---|
<form></form> | Form element | <form action="/submit_form">...</form> |
<select multiple name=? size=?></select> | Dropdown list with multiple selections | <select multiple name="genres" size="5">...</select> |
<select name=?></select> | Dropdown list | <select name="genre">...</select> |
<option> | Option within a dropdown list | <option>Fiction</option> |
<textarea name=? cols="x" rows="y"></textarea> | Multiline text input | <textarea name="review" cols="30" rows="10"></textarea> |
<input type="checkbox" name=? value=?> | Checkbox input | <input type="checkbox" name="newsletter" value="subscribe"> |
<input type="checkbox" name=? value=? checked> | Pre-checked checkbox | <input type="checkbox" name="newsletter" value="subscribe" checked> |
<input type="text" name=? size=?> | Single-line text input | <input type="text" name="name" size="20"> |
<input type="submit" value=?> | Submit button | <input type="submit" value="Submit Review"> |
<input type="reset"> | Reset button | <input type="reset"> |
Element | Description | Example Snippet |
---|---|---|
<table></table> | Table element | <table>...</table> |
<tr></tr> | Table row | <tr>...</tr> |
<td></td> | Table data cell | <td>Price</td> |
<th></th> | Table header cell | <th>Book Title</th> |
Element | Description | Example Snippet |
---|---|---|
<video></video> | Video embedding | <video controls> <source src="promo.mp4" type="video/mp4"> </video> |
<source> | Media source | <source src="promo.mp4" type="video/mp4"> |
<track> | Text tracks for video | <track kind="subtitles" src="subtitles.vtt" srclang="en"> |
Use this HTML cheat sheet as a quick reference guide to make your web development process more efficient and effective. Keep this cheat sheet handy as you continue to explore and master HTML.
course
This course is designed to build your skills in web development and design, no matter how little experience or technical knowledge you currently have. You ...
4.7
(3,677 ratings)
248,977 already enrolled
Beginner level
Average time: 10 hour(s)
Learn at your own pace
specialization
Learn to Design and Create Websites. Build a responsive and accessible web portfolio using HTML5, CSS3, and JavaScript
4.8
(25,476 ratings)
325,014 already enrolled
Beginner level
Average time: 2 month(s)
Learn at your own pace
Skills you'll build:
Responsive Web Design, Html5, Web Development, JavaScript, Cascading Style Sheets (CSS), Web Design, Web Accessibility, HTML, Bootstrap (Front-End Framework), Document Object Model (DOM), Style Sheets
course
Want to take the first steps to become a Web Developer? This course will help you discover the languages, frameworks, and tools that you will need to create ...
4.6
(2,254 ratings)
166,759 already enrolled
Beginner level
Average time: 14 hour(s)
Learn at your own pace
Skills you'll build:
Web Development
Writer
Coursera is the global online learning platform that offers anyone, anywhere access to online course...
This content has been made available for informational purposes only. Learners are advised to conduct additional research to ensure that courses and other credentials pursued meet their personal, professional, and financial goals.