HTML5 & CSS3 Cheat Sheet: Tags, Properties, and How to Preview HTML Pages with an Online HTML Viewer
Struggling to remember a specific HTML tag or CSS property? This guide is for you. This ultimate html cheat sheet covers the most essential HTML5 tags and CSS3 properties, complete with practical code snippets. Wondering how to preview an html page without a local server? Discover how to instantly test and visualize every example using our integrated online html viewer for a faster, more efficient workflow.
The Ultimate HTML5 Tags List: Structure Your Web Content
HTML (HyperText Markup Language) is the backbone of every webpage. HTML5 introduced semantic elements that give clearer meaning to your content, improving both accessibility and SEO. Here’s a breakdown of the tags you'll use most often.
Core Document Structure & Metadata
These tags form the skeleton of any HTML document, providing essential information to the browser and search engines.
| Tag | Description |
|---|---|
<!DOCTYPE html> | Declares the document type to be HTML5. |
<html> | The root element of an HTML page. |
<head> | Contains meta-information about the document. |
<title> | Specifies the title for the browser tab and search results. |
<meta> | Provides metadata like character set, viewport settings, and description. |
<link> | Links to external resources, most commonly CSS stylesheets. |
<script> | Embeds or links to executable JavaScript code. |
<body> | Contains the visible page content. |
Semantic Sectioning & Grouping Elements
Use these tags to structure your content logically, giving meaning to different parts of your page layout.
| Tag | Description |
|---|---|
<header> | Represents introductory content for a section or the entire page. |
<nav> | Contains navigation links. |
<main> | Specifies the main, dominant content of the document. |
<article> | Defines a self-contained composition (e.g., a blog post, forum post). |
<section> | Represents a standalone section of a document. |
<aside> | Defines content aside from the main content (e.g., a sidebar). |
<footer> | Represents the footer for a section or the entire page. |
<div> | A generic container for flow content with no semantic meaning. |
Text-Level Semantics & Hyperlinks
These tags are used to format and give meaning to text, from headings and paragraphs to links.
| Tag | Description |
|---|---|
<h1> to <h6> | Heading levels, with <h1> being the most important. |
<p> | Defines a paragraph. |
<a> | Creates a hyperlink. The href attribute specifies the URL. |
<strong> | Indicates text with strong importance (typically bold). |
<em> | Indicates emphasized text (typically italic). |
<span> | A generic inline container for phrasing content. |
<br> | Inserts a single line break. |
<blockquote> | Defines a section that is quoted from another source. |
Forms, Inputs & Interactive Elements
Forms are crucial for user interaction. These tags allow you to collect user input.
| Tag | Description |
|---|---|
<form> | A container for creating an HTML form for user input. |
<input> | The most versatile form element; type is defined by the type attribute (e.g., text, password, checkbox, submit). |
<textarea> | Defines a multi-line text input control. |
<label> | Defines a label for an <input> element. |
<button> | Defines a clickable button. |
<select> | Creates a drop-down list. |
<option> | Defines an option within a <select> list. |
Media, Embeds & External Content
Bring your pages to life with images, videos, and other embedded content.
| Tag | Description |
|---|---|
<img> | Embeds an image. Requires src (source) and alt (alternative text) attributes. |
<video> | Embeds a video player. |
<audio> | Embeds a sound content player. |
<iframe> | Specifies an inline frame to embed another document within the current HTML document. |
Lists & Tables: Organizing Data Effectively
Structure related items or tabular data clearly with lists and tables.
| Tag | Description |
|---|---|
<ul> | Defines an unordered (bulleted) list. |
<ol> | Defines an ordered (numbered) list. |
<li> | Defines a list item within a <ul> or <ol>. |
<table> | Defines a table. |
<tr> | Defines a row in a table. |
<th> | Defines a header cell in a table. |
<td> | Defines a standard data cell in a table. |
<caption> | Defines a table caption. |
Essential CSS3 Properties List: Style Your Web Pages Like a Pro
CSS (Cascading Style Sheets) brings your HTML to life, controlling the layout, colors, fonts, and overall visual appearance. This css cheat sheet covers the properties you'll need to master any design.
CSS Selectors & Specificity
Selectors target the HTML elements you want to style. Understanding them is the first step to using CSS effectively.
| Selector | Example | Description |
|---|---|---|
| Type | p | Selects all <p> elements. |
| Class | .my-class | Selects all elements with class="my-class". |
| ID | #my-id | Selects the single element with id="my-id". |
| Attribute | [href] | Selects all elements with an href attribute. |
| Descendant | article p | Selects all <p> elements inside an <article>. |
| Pseudo-class | a:hover | Selects a link when the user mouses over it. |
The Box Model & Sizing Properties
Every element on a page is a rectangular box. The box model defines how its size, padding, border, and margin work together.
| Property | Example Values | Description |
|---|---|---|
width | 100px, 50%, auto | Sets the width of an element. |
height | 100px, 50vh, auto | Sets the height of an element. |
padding | 10px, 5px 10px | Sets the space between the content and the border. |
border | 1px solid black | A shorthand to set the border width, style, and color. |
margin | 10px, 5px 10px | Sets the space outside the border, between elements. |
box-sizing | border-box | Changes how width and height are calculated, including padding and border. |
Typography & Text Styling
Control how text looks to create readable and aesthetically pleasing content.
| Property | Example Values | Description |
|---|---|---|
font-family | "Arial", sans-serif | Specifies the font for an element. |
font-size | 16px, 1.2em, 1rem | Sets the size of the text. |
font-weight | normal, bold, 700 | Sets the thickness of the font. |
color | black, #333, rgb(0,0,0) | Sets the color of the text. |
text-align | left, center, right | Aligns the text within an element. |
line-height | 1.5 | Sets the distance between lines of text. |
Flexible Layouts with Flexbox
Flexbox is a one-dimensional layout model for arranging items in rows or columns. It makes creating responsive layouts intuitive.
| Property (Container) | Example Values | Description |
|---|---|---|
display | flex | Enables the Flexbox layout model. |
flex-direction | row, column | Defines the direction of the main axis. |
justify-content | center, space-between | Aligns items along the main axis. |
align-items | center, stretch | Aligns items along the cross axis. |
flex-wrap | nowrap, wrap | Allows items to wrap onto multiple lines. |
Grid-Based Layouts with CSS Grid
CSS Grid is a powerful two-dimensional layout system, allowing you to control both columns and rows simultaneously.
| Property (Container) | Example Values | Description |
|---|---|---|
display | grid | Enables the Grid layout model. |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | Defines the columns of the grid. |
grid-template-rows | auto 100px | Defines the rows of the grid. |
gap | 10px | Sets the size of the gap between grid cells. |
Backgrounds, Borders & Shadows
Add depth and style to your elements with these decorative properties.
| Property | Example Values | Description |
|---|---|---|
background-color | lightblue, #f0f0f0 | Sets the background color of an element. |
background-image | url('image.jpg') | Sets a background image. |
border-radius | 5px, 50% | Rounds the corners of an element's border. |
box-shadow | 10px 5px 5px black | Adds a shadow effect around an element's frame. |
Transitions, Transforms & Animations
Create dynamic and interactive user interfaces with smooth visual effects.
| Property | Example Values | Description |
|---|---|---|
transition | all 0.3s ease-in-out | Enables smooth property changes over a given duration. |
transform | rotate(45deg), scale(1.2) | Applies a 2D or 3D transformation to an element. |
animation | slide-in 1s forwards | A shorthand for applying a named animation. |
Why Html Viewer is Your Go-To Online HTML Editor & Viewer
Having a great cheat sheet is one thing, but being able to instantly apply and see the results is what truly accelerates learning and development. That’s where an online html editor like Html Viewer becomes your most powerful ally.
Instant Live Preview for Rapid Experimentation
Copy any code snippet from this guide, paste it into our editor, and see it render in real-time. There's no need to save files, switch between windows, or refresh your browser. This immediate feedback loop is perfect for tweaking CSS properties to perfection or understanding how a new HTML tag structures your content. You can test these snippets right now and see the magic for yourself.
Edit, Beautify, and Minify Code Effortlessly
Our tool is more than just a viewer. It's a complete workflow solution. If you've gathered code from various sources, a single click on our "Beautify" button will format it into a clean, readable structure. When you're ready to deploy, the "Minify" function compresses your code, optimizing it for faster page loads. This all-in-one functionality streamlines your entire coding process.
Access Anywhere, Anytime: No Setup Required
Forget about installing heavy IDEs or configuring complex local environments. This online HTML editor runs entirely in your browser. Whether you're on a laptop at a coffee shop or a shared computer in a lab, your powerful HTML and CSS sandbox is always just a URL away, ready whenever inspiration strikes.
Master Web Development Faster: Your Essential HTML & CSS Cheat Sheet
Bookmark this page as your definitive guide to the fundamentals of HTML5 and CSS3. Use it to quickly find the right tag or property, understand its syntax, and build your projects with confidence. More importantly, combine this knowledge with the practical power of our tool. Every snippet here is an opportunity to experiment and learn. Head over to the HtmlViewer.cc editor to bring this cheat sheet to life and transform your coding workflow today.
Frequently Asked Questions About HTML & CSS Cheat Sheets
How do I quickly view HTML code from a website or local file?
The easiest way is to use an online html viewer. With our tool, you can paste code directly, upload an HTML file, or even enter a URL to fetch and view html source from a live website. Once loaded, you can view the code and its visual preview side-by-side, making it perfect for learning and debugging.
What is an HTML & CSS cheat sheet, and why is it useful?
An HTML & CSS cheat sheet is a concise reference guide that lists commonly used tags, properties, syntax, and concepts. It's incredibly useful for developers of all levels because it saves time, eliminates the need to memorize every detail, and serves as a quick, reliable resource for troubleshooting and building web pages efficiently.
Can I test these HTML5 & CSS3 code snippets instantly online?
Absolutely! That is precisely what our platform is designed for. You can copy any example from this guide, paste it into the editor on our homepage, and immediately see the result in the live preview panel. Experiment freely and truly grasp how different code combinations come to life.
How can I ensure my HTML and CSS are accessible and well-structured?
Start by using semantic HTML5 tags (<main>, <nav>, <article>) correctly, as they provide inherent meaning. For CSS, ensure sufficient color contrast and use responsive units like rem for font sizes. A great practice is to paste your code into our editor and use the "Beautify" feature. This formats your code with proper indentation, making it much easier to review the structure and spot potential issues.