HTML Cheat Sheet
This cheat sheet is a valuable resource for anyone who wants to learn HTML. It is a quick and easy way to learn about the most common HTML tags, and it can help you create web pages that are both informative and visually appealing.
HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides the structure and content of a webpage, defining the various elements and their organization. Utilizing an HTML cheat sheet lets you conveniently reference and learn about the essential HTML tags. This will enable you to construct web pages that effectively communicate information while ensuring they are visually appealing to the users.
HTML Cheat Sheet
This cheat sheet is a valuable resource for anyone who wants to learn HTML. It is a quick and easy way to learn about the most common HTML tags, and it can help you create web pages that are both informative and visually appealing.
HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides the structure and content of a webpage, defining the various elements and their organization. Utilizing an HTML cheat sheet lets you conveniently reference and learn about the essential HTML tags. This will enable you to construct web pages that effectively communicate information while ensuring they are visually appealing to the users.
HTML quick reference cheat sheet
Basic Structure:
<!DOCTYPE html>: Declares the document type as HTML5, ensuring compatibility with modern browsers.
<html>: Serves as the root element of an HTML document, enclosing all other elements.
<head>: Contains meta-information about the document, such as the document title, character encoding, and linked stylesheets or scripts.
<title>: Specifies the title of the document, which appears in the browser's title bar or tab.
<body>: Contains the visible content of the document, including text, images, links, and other elements.
Text Formatting:
<h1> to <h6>: Heading tags used for defining different levels of headings, with <h1> being the highest level and <h6> the lowest.
<p>: Defines a paragraph, separating blocks of text.
<strong>: Indicates strong importance, typically displayed in bold.
<em>: Indicates emphasis, usually displayed in italics.
<u>: Underlines text to draw attention.
<s>: Renders text with a strikethrough, often used to denote deleted or obsolete content.
Links and Images:
<a href="">: Creates a hyperlink, allowing users to navigate to another page or resource.
<img src="" alt="">: Inserts an image into the document, with the src attribute specifying the image URL and the alt attribute providing alternative text for screen readers.
<figure> and <figcaption>: Used together to group an image or illustration with a caption, making it easier to associate the two.
Lists:
<ul>: Defines an unordered (bulleted) list, used when the order of items doesn't matter.
<ol>: Defines an ordered (numbered) list, used when the order of items is significant.
<li>: Represents a list item within <ul> or <ol>, creating individual list entries.
Tables:
<table>: Creates a table with rows and columns.
<tr>: Defines a table row, enclosing table cells (<td>) or table headers (<th>).
<th>: Defines a table header cell, typically used to label columns or rows.
<td>: Defines a table data cell, containing the actual data within a table.
<thead>, <tbody>, <tfoot>: Optional elements used to group the table header, body, and footer sections, respectively, improving accessibility and structure.
Forms:
<form>: Contains form elements, allowing users to input and submit data.
<input type="">: Creates an input field, with various types such as text, password, checkbox, radio button, and more.
<label>: Provides a label for an input field, improving accessibility and user experience.
<select>: Creates a dropdown list for users to select options.
<option>: Defines an option within a dropdown list.
<textarea>: Creates a multi-line text input area for users to enter longer text.
<button>: Defines a clickable button for form submission or other actions.
Semantic Tags:
<header>: Represents the introductory content of a page or section, often containing logos, headings, or navigation menus.
<nav>: Defines a section containing navigation links.
<main>: Represents the main content of a document, providing the primary
<article>: Defines an independent, self-contained piece of content, such as a blog post, news article, or forum post.
<section>: Represents a thematic grouping of content within a document.
<footer>: Defines the footer of a document or section, typically containing information like copyright, contact details, or additional navigation links.
CSS Styling:
class="": Assigns a class name to an element, allowing targeted styling using CSS.
id="": Assigns a unique identifier to an element, often used for specific styling or JavaScript interactions.
<style>: Embeds CSS code within an HTML document, providing inline styling for the associated elements.
<link rel="stylesheet" href="">: Links an external CSS file to the HTML document, allowing for separate styling files.
Meta Tags:
<meta charset="UTF-8">: Specifies the character encoding for the document, ensuring proper display of special characters and international characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design, enabling proper scaling and layout on different devices.
Miscellaneous:
<!-- Comment -->: Inserts comments within HTML code, serving as notes for developers and not affecting the rendered output.
<!DOCTYPE html>: Declares the document type as HTML5, ensuring compatibility with modern browsers.
<div>: Defines a generic container for grouping elements, providing a flexible way to structure and style content.
Learn more HTML skills on Coursera.
HTML Courses | CSS Courses | JavaScript Courses | Web Development Courses | Web Design Courses | Front End Web Development Courses | PHP Courses | Bootstrap Courses | React JS Courses
Join a community of over 100 million learners from around the world
Learn from more than 200 leading universities and industry educators.
70% of all learners who have stated a career goal and completed a course report outcomes such as gaining confidence, improving work performance, or selecting a new career path.All courses include:
- 100% online
- Flexible schedule
- Mobile learning
- Videos and readings from professors at world-renowned universities and industry leaders
- Practice quizzes
Can’t decide what is right for you?
Try the full learning experience for most courses free for 7 days.Register to learn with Coursera’s community of 87 million learners around the world