HTML (HyperText Markup Language) serves as the foundational framework for web pages, structuring content like text, images, and videos. HTML forms the backbone of every web page, defining its structure, content, and interactions. Its enduring relevance lies in its universal adoption across web development, ensuring that regardless of the framework or language used, content ultimately renders in HTML.
This HTML Cheat Sheet for Beginners contains helpful code examples and is designed as a quick reference for those familiar with these languages. From semantic elements to mobile optimization, we covered all topics. Whether you’re building a personal blog, an e-commerce site, or a cutting-edge web app, this cheat sheet has you covered.
An HTML Cheat Sheet is a reference document summarizing key HTML elements, attributes, and syntax. It serves as a quick guide for web developers, offering easy access to commonly used tags and their respective functionalities.
Table of Content
The element represents the root (top-level element) of an HTML document also called the document element. All other elements must be descendants of this element.
HTML heading tags ( to ) are used to define headings and subheadings on your webpage.
The tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.
| Heading Tags | Description | Syntax |
| Used for title generally once per page and has a font size of 2em. | …. | |
| Used for medium sized titles and has a font size of 1.5em. | …. | |
| Used for subsections and has a font size of 1.17em. | …. | |
| Used for highlighting text with font size of 1em. | …. | |
| Fifth level heading with font size of .83em. | …. | |
| Displays least significant details and has a font size of .67em | …. |
Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:
| Tags | Description | Syntax |
| Block element that defines a division in HTML document. | … | |
| Inline element used to mark up a part of a text or document. | … | |
| Used to represent a paragraph. | … | |
| Represents pre-formatted text to present exactly as written in the HTML file. | … | |
| Used to represent source codes | … |
This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.
| Tags | Description | Syntax |
| Container for metadata which is data about data. | … | |
| Used to link external style sheets or documents. | ||
| Defines metadata about HTML document. | ||
| Defines the document’s title | ||
| Used to define style information (CSS) for a document. |
Semantic Element in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.
| Tags | Description | Syntax |
| Used to give introductory content about the document. | ||
| Represents the main dominant content of a document. | ||
| Structural HTML element used to group together related elements. | ||
| Represents a section of a page to provide navigation links | ||
| Represents a self-contained composition which is independently distributable or reusable. | ||
| Defines some content aside from the content it is placed in. | ||
| Represents a footer for its sectioning root element | ||
| Provides contact information for a person, people, or an organization. | .. |
Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized, or monospaced. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
| Tags | Description | Syntax |
| Used to put stress on some text or show some degree of emphasis. | … | |
| Indicates that the content has strong importance. | … | |
| Writes the text as subscript. | … | |
| Writes the text as superscript. | … | |
| Represents an abbreviation or acronym. | … | |
| Highlights important text for reference or notation purposes. | … | |
| Describes the title of a creative work. | … | |
| Used to represent a specific period of time. |
An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.
Generally, Form tags in HTML, like , , , and , are used to create forms for user input.
| Tags | Description | Syntax |
| Represents a section containing controls for submitting information. | ||
| Creates interactive controls for forms to accept data. | … | |
| Create a multi-line plain-text editing control | ||
| Represents a control that provides a menu of options to select from. | ||
| Defines an option in a select list. | ||
| Creates a grouping of options within a | ||
| Displays an indicator showing the degree of completion of a task. | ||
| Used to give predefined options for an element and adds an autocomplete feature to it. | ||
| Represents a clickable button. | ||
| Specifies a label for an element. |
Multimedia tags in HTML, such as , , and , are used to embed multimedia content like images, audio files, and videos into your webpage.
| Tags | Description | Syntax |
| Used to link images to web pages. | ||
| Used to include sound content in documents. | ||
| Embeds a media player which supports video files in the document. | ||
| Groups various diagrams, images, illustrations, and code snippets into the document. | ||
| Used to provide the caption of the content. | ||
| Embeds multimedia on a Web page | ||
| Includes objects, such as images, audio, videos, and Portable Document Format (PDF) on a Web page. |
Special characters and symbols in HTML, like &; for an ampersand or <; for a less-than sign, are used to display characters that have special meaning in HTML. Some of the most commonly used ones are:
| Symbol | Description | Entity Name | Number Code |
| © | Copyright | © | © |
| & | Ampersand | & | & |
| > | Greater than | > | > |
| Less than | < | < | |
| $ | Dollar | $ | $ |
| “ | Quotation mark | " | " |
| ‘ | Apostrophe | ' | ' |
Attributes in HTML are used to provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name=”value”. The name is the property you want to set and the value is the desired value of the attribute.
| Attributes | Description | Syntax |
| alt | Used in the image tag to specify the alternative text of the image | |
| href | Used to define a hyperlink. | |
| src | Specifies URL of the image to be used. | |
| width | Specifies the width of the image in pixels. | |
| height | Specifies the height of the image in pixels. | |
| style | Helps to change the look and feel of the document. | |
| id | Unique identifier used to specify an area of a webpage. | |
| class | Specifies one or more class names for an element. | |
| title | Specifies extra information about an element. | |
| Placeholder | Specifies a short hint that describes the expected value of an input field/text area |
An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps your site show up in search results, and lets you build web pages that everyone can use and enjoy.
Here are some key benefits of HTML Cheat Sheet:
Remember, using an HTML Cheat Sheet can greatly enhance your web development process, making it a must-have tool for every web developer.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
We have a similar cheat sheet to help you with CSS concepts as well. Check it out here CSS Cheat Sheet
An HTML Cheat Sheet is a reference document summarizing key HTML elements, attributes, and syntax. It serves as a quick guide for web developers, offering easy access to commonly used tags and their respective functionalities.
HTML tags should be used for their semantic purpose, not just for visual styling. You can always change the appearance using CSS. So, prioritize understanding the meaning and structure of tags over their visual representation.
