KEMBAR78
HTML Cheatsheet: Tags Attributes | PDF | Html Element | Web Development
Scribd
Upload
2K views4 pages

HTML Cheatsheet: Tags Attributes

This document provides a summary of HTML tags and elements organized into categories such as tags, attributes, headings, text formatting, links, images, and tables. It also includes sections on HTML page structure, color picking, and forms. The high-level sections include tags and attributes, headings, text styling, links and images, tables and lists, HTML5 page structure, and a color picker.

Uploaded by

XLR8 Up
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views4 pages

HTML Cheatsheet: Tags Attributes

This document provides a summary of HTML tags and elements organized into categories such as tags, attributes, headings, text formatting, links, images, and tables. It also includes sections on HTML page structure, color picking, and forms. The high-level sections include tags and attributes, headings, text styling, links and images, tables and lists, HTML5 page structure, and a color picker.

Uploaded by

XLR8 Up
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML CheatSheet

Tags 🏷

Attributes 💅 Div Section


<div>Block element</div>

SYNTAX Headings
<tag attributename="value" /> <h1>Page title</h1>
- lowecase attributes, quote values <h2>Subheading</h2>
<h3>Tertiary heading</h3>
Global attributes <h4>Quaternary heading</h4>
accesskey, class, contenteditable, data-*, dir, draggable,
hidden, id, lang, spellcheck, style, tabindex, title Paragraph
<div id="demo" class="big" dir="ltr" lang="en" <p style="text-align: center;">text</p>
style="color: red;" tabindex="0" title="Tooltip"
contenteditable="true" spellcheck="true" Image
data-htmlcheat="99">Hello World!</div>
<img src="/demo.jpg" alt="description" height="48"
Internationalization: dir, lang, xml:lang
Outbound Link
<html lang="en-US">
... Get your online assignment help at Copycrafter
<p dir="rtl">Right to left (Arabic)</p> professional writing service.
...
<a href="https://htmlg.com/" target="_blank" rel="
</html>

Link: download, href, hreflang, media, rel, target, type Mailto link
<a href="https://htmlg.com/" target="_blank" rel="e <a href="mailto:me@ruwix.com?Subject=Hi%20mate" ta
Link
</a> Inner anchor (jump on page)
<a href="#footer">Jump to footnote</a>
Image: src, alt, height, ismap, longdesc, src, srcset,
<br />
usemap, width <a name="footer"></a>Footnote content
<img src="/demo.jpg" alt="description"
height="48" width="100" longdesc="desc.txt" /> Bold text
<strong>Bold text</strong>
All attributes
accept Italic text
form, input
<em>Italic text</em>
accept-charset
form
accesskey Underlined text
Global attribute <span style="text-decoration: underline;">Underlin
action
form Iframe
align
applet, caption, col, colgroup, hr, iframe, ✎
<iframe src="link.html" width="200" height="200">
img, table, tbody, td, tfoot , th, thead, tr </iframe>
alt
applet, area, img, input Abbreviation
async <abbr title="Hypertext Markup Language">HTML</abbr
script
autocomplete Comment
form, input
autofocus <!-- HTML
button, input, keygen, select, textarea Comment -->
autoplay
Horizontal Line
<hr />

Head Tags 👦 Line break

<!doctype html> <br />


<html lang="en" class="no-js">
<head> Quotation
<meta charset="utf-8"> <q>Success is a journey not a destination.</q>
<meta http-equiv="x-ua-compatible" content="ie=
<meta name="viewport" content="width=device-wid <blockquote cite="https://ruwix.com/">
<link rel="canonical" href="https://htmlcheatsh The Rubik's Cube is the World’s best selling puzzl
<title>HTML CheatSheet</title> </blockquote>
<meta name="description" content="A brief page
<meta name="keywords" content="html,cheatsheet" Video
<meta property="fb:admins" content="YourFaceboo <video width="200" height="150" controls>
<meta property="og:title" content="HTML CheatSh <source src="vid.mp4" type="video/mp4">
<meta property="og:type" content="website" /> <source src="vid.ogg" type="video/ogg">
<meta property="og:url" content="https://htmlch No video support.
<meta property="og:image" content="https://html </video>
<meta property="og:description" content="A brie
<link rel="apple-touch-icon" href="apple-touch- Audio
<link rel="alternate" hreflang="es" href="https <audio controls>
<link rel="stylesheet" href="/styles.css"> <source src="sound.ogg" type="audio/ogg">
<script src="/script.js"></script> <source src="sound.mp3" type="audio/mpeg">
</head> No audio support.
</audio>

HTML5 Page Structure ⚗ Structures 🏗


header, nav, main, article, section, aside, footer, address
Table
<header>
<table><caption>Phone numbers</caption>
<div id="logo">HTML</div>
<thead>
<nav> <tr>
<ul>
<th>Name</th>
<li><a href="/">Home</a>
<th colspan="2">Phone</th>
<li><a href="/link">Page</a>
</tr>
</ul>
</thead>
</nav> <tbody>
</header>
<tr>
<main role="main">
<td>John</td>
<article> <td>577854</td>
<h2>Title 1</h2>
<td>577855</td>
<p>Content 1</p> </tr>
</article>
<tr>
<article>
<td>Jack</td>
<h2>Title 2</h2> <td>577856</td>
<p>Content 2</p>
<td>577857</td>
</article>
</tr>
</main> </tbody>
<section>
<tfoot>
A group of related content <tr>
</section>
<td>&nbsp;</td>
<aside>
<td>Personal</td>
Sidebar <td>Office</td>
</aside>
</tr>
<footer> </tfoot>
<p>&copy; HTML CheatSheet</p>
</table>
<address>
Contact <a href="mailto:me@htmlg.com">me</a Unordered list
</address>
<ul>
</footer>
<li>First</li>
Free HTML Templates <li>Second</li>
<li>Third</li>
</ul>

Color Picker 🚦 Definition list


<dl>
CE5937 <dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
1 <dd>Cascading Style Sheets </dd>
color: #CE5937; </dl>
Text color

background-color:#CE5937; Background Form


<form action="/action.php" method="post">
border: 3px solid #CE5937; Box border Name: <input name="name" type="text" /> <br />
text-shadow: 1px 2px 2px #CE Text shadow Age: <input max="99" min="1" name="age" step="
<select name="gender">
box-shadow: 2px 2px 7px 1px Box shadow <option selected="selected" value="male">M
<option value="female">Female</option>
</select><br />
<input checked="checked" name="newsletter" typ
<textarea cols="20" name="comments" rows="5">C
<label><input name="terms" type="checkbox" val
<input type="submit" value="Submit" />
</form>
Characters 🈚
Gibberish text 🈹
á à â ä ã å &
Lorem ipsum Cupcake ipsum
< > " ' ‹ › « » Random English Chinese

☞ $ ¢ £ ¥ € ₹ ₽ Spanish

元 © ® ☔☕⛹ ⛄ ☠ Create iframe 🖼


☢ ♠ ♣ ♥ ♦ ▲△ ◯ URL: https://

◼ § ¶ ☎☐ ☑ ☒ ✔ Width: 100
%
Height: 100
px
✘ ☺☻♪ ♫ ⚐ ✉✎ Scrolling: Hidden Border: No

☀ ✰ ★ ❝ ❞ ❤† ➤ Generate iframe

➧ ←↑ →↓ ↖ ↗ ↘
Create Table ▦
↙ ™@✓ ℃℉ + ×
3 3
÷ = ≠ ¼ ½ ¾ ⅓ ⅔ Cols:
0
Rows:

Border: Border Not specified


! ? – —⅀ Ω ℹ № Width: 0
Collapse:
0
Cellpadding:

⚪ 🙂😀😊😔🌦 🌜 🌻 %

Generate table Div Tables


🍩🍻🍔🎭🏊🏕 🐵🐺
🐾👀👍👎👦👪👫💀 Create Link 🔗
💔💩💪💰 💾📁📌🔑 URL: https://

🔫🚧🛠 🛒
Text:
Title:
Create Image 📸
All Characters
Target: Same tab

Source: https://
Generate link
Description:
Style:
Width:
%
Height:
px
Create List 📜
Float: None
List Unordered list
type:
Generate image disc
Unordered: Ordered: 1. 2. 3.

Generate list

Blank Page 💭
htaccess ⚙
.htaccess ⚙
<!DOCTYPE html>
<html lang="en">
<head> Force HTTPS
<meta charset="utf-8"> RewriteEngine on
<title>Page Title</title> RewriteCond %{HTTPS} !on
<meta name="description" content="Roughly 155 c RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI
<link rel="stylesheet" type="text/css" href="my
<script src="https://ajax.googleapis.com/ajax/l Force www
<script src="script.js"></script> RewriteEngine on
</head> RewriteCond %{HTTP_HOST} ^htmlg\.com [NC]
<body> RewriteRule ^(.*)$ http://www.htmlg.com/$1 [L,R=30
<!-- Content -->
</body> Force non-www
</html> RewriteEngine on
Download Package RewriteCond %{HTTP_HOST} ^www\.htmlg\.com [NC]
RewriteRule ^(.*)$ http://htmlg.com/$1 [L,R=301]
Robots.txt 🤖 Custom Error Pages
ErrorDocument 500 "Sorry, something went wrong!"
Example ErrorDocument 401 https://htmlg.com/404/
User-agent: * ErrorDocument 404 404error.html
Disallow: /dont-index-this-folder/
Sitemap: https://htmlcheatsheet.com/sitemap.xml Redirect Entire Site
Redirect 301 / https://htmlg.com/
Ban all robots
User-agent: * Permanent Page Redirect
Disallow: /
Redirect 301 /oldlink.html https://htmlg.com/help/
Redirect 301 /oldlink https://htmlg.com/about/

Open Graph 📉 Alias Directory


RewriteEngine On
<!doctype html> RewriteRule ^source_directory/(.*) target_director
<html xmlns:og="http://ogp.me/ns#">
Remove .php Extension
<head>
<title>The Rock (1996)</title> RewriteEngine On
<meta property="og:title" content="Cheat Sheet" /> RewriteCond %{SCRIPT_FILENAME} !-d
<meta property="og:type" content="website" /> RewriteRule ^([^.]+)$ $1.php [NC,L]
<meta property="og:url" content="https://htmlcheats
Block IP Address
<meta property="og:image" content="https://htmlchea
Order deny,allow
Optional Allow from all
<meta property="og:audio" content="https://htmlchea Deny from 123.123.123.123
<meta property="og:description" content="A brief de Deny from 123.123.123.123
<meta property="og:determiner" content="the" />
Allow Access From Only One IP
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES # Require all denied
<meta property="og:site_name" content="HTML CheatSh # Require ip 123.123.123.123
<meta property="og:video" content="https://htmlchea

Useful Links 💡
RGB color codes
Word doc to HTML Div tables
HTML cleaner HTML blog
HTML editor Basic concepts
HTML validator W3 schools
Can I use?

HTML Cheat Sheet is using cookies to collect anonymous visitor analytics. | Terms and Conditions, Privacy Policy | Mobile view
©2020 HTMLCheatSheet.com

You might also like