HTML

"HTML is the foundation of the digital world, where structure begets meaning and content shapes the experience.”

Page Structure


<header>
  <div id="logo">HTML</div>
  <nav>  
    <ul>
      <li><a href="/">Home</a>
      <li><a href="/link">Page</a>
    </ul>
  </nav>
</header>
<main role="main">
  <article>
    <h2>Title 1</h2>
    <p>Content 1</p>
  </article>
  <article>
    <h2>Title 2</h2>
    <p>Content 2</p>
  </article>
</main>
<section>
  A group of related content
</section>
<aside>
  Sidebar
</aside>
<footer>
  <p>&copy; HTML CheatSheet</p>
  <address>
    Contact <a href="mailto:me@htmlg.com">me</a>
  </address>
</footer>

Image


<img src="/demo.jpg" alt="description" 
height="48" width="100" longdesc="desc.txt" />

accept: Specifies the types of files that can be submitted through a file input.

accept-charset: Defines the character encodings the server can accept.

accesskey: Provides a keyboard shortcut for an element.

action: Specifies the URL where the form data will be sent when submitted.

align: Aligns elements such as applet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot, th, thead, tr.

alt: Specifies alternative text for applet, area, img, and input elements.

async: Indicates that a script should be executed asynchronously.

autocomplete: Controls whether a form or input field should have autocomplete suggestions.

autofocus: Focuses on an element automatically when a page loads.

autoplay: Allows audio or video elements to start playing automatically.

autosave: Specifies the name of a data set for input elements.

bgcolor: Defines the background color for various elements.

buffered: Provides information about the time ranges of audio or video.

challenge: Specifies a cryptographic challenge for keygen.

charset: Specifies the character encoding for meta and script elements.

checked: Indicates that a radio button or checkbox should be pre-selected.

cite: Specifies a URL to the source of a quote in blockquote, del, ins, and q.

class: Defines a class name for an element.

code: Specifies the URL of an applet's codebase.

codebase: Specifies the base URL for applet resources.

color: Defines the text color for basefont, font, and hr elements.

cols: Specifies the number of columns in a textarea.

colspan: Specifies the number of columns a cell should span in a table.

content: Provides the value associated with a meta tag.

contenteditable: Makes an element's content editable by the user.

contextmenu: Specifies a context menu for an element.

controls: Adds audio or video playback controls.

coords: Defines the coordinates of an area in an image map.

data: Allows you to store custom data private to the page.

datetime: Represents the date and time for del, ins, and time elements.

Head


<!doctype html>
<html lang="en" class="no-js">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="canonical" href="https://htmlcheatsheet.com/" />
  <title>HTML CheatSheet</title>
  <meta name="description" content="A brief page description">
  <meta name="keywords" content="html,cheatsheet" />
  <meta property="fb:admins" content="YourFacebookUsername" />
  <meta property="og:title" content="HTML CheatSheet" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://htmlcheatsheet.com/" />
  <meta property="og:image" content="https://htmlcheatsheet.com/images/html-cheatsheet.jpg" />
  <meta property="og:description" content="A brief page description" />
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="alternate" hreflang="es" href="https://htmlcheatsheet.com/spanish/" />
  <link rel="stylesheet" href="/styles.css">
  <script src="/script.js"></script>
 </head>

OG (Open Graph)


<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="Cheat Sheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://htmlcheatsheet.com/" />
<meta property="og:image" content="https://htmlcheatsheet.com/demo.jpg" />

<!-- Optional -->

<meta property="og:audio" content="https://htmlcheatsheet.com/track.mp3" />
<meta property="og:description" content="A brief description" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="HTML CheatSheet" />
<meta property="og:video" content="https://htmlcheatsheet.com/video.swf" />

Tables


<table><caption>Phone numbers</caption>
 <thead>
   <tr>
	<th>Name</th>
	<th colspan="2">Phone</th>
   </tr>
 </thead>
 <tbody>
   <tr>
	<td>John</td>
	<td>577854</td>
	<td>577855</td>
   </tr>
   <tr>
	<td>Jack</td>
	<td>577856</td>
	<td>577857</td>
   </tr>
 </tbody>
 <tfoot>
   <tr>
	<td>&nbsp;</td>
	<td>Personal</td>
	<td>Office</td>
   </tr>
 </tfoot>
</table>

List


<!-- Unordered List -->
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

<!-- Defined List -->
<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets </dd>
</dl>

Video


<video width="200" height="150" controls>
  <source src="vid.mp4" type="video/mp4">
  <source src="vid.ogg" type="video/ogg">
  No video support.
</video>

Audio


<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  No audio support.
</audio>

iframe



<body>
    <h1>Embedding an External Web Page</h1>
    <iframe src="https://www.example.com" width="800" height="600"></iframe>
    
    <h1>Embedding a YouTube Video</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
    
    <h1>Embedding a Google Map</h1>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.162356280805!2dLONGITUDE!3dLATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zLONGITUDE!5e0!3m2!1sen!2sus!4vTIMESTAMP" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>

Attributes Supported:

src: Specifies the URL of the content to be embedded.

width and height: Define the dimensions of the iframe.

frameborder: Controls the border around the iframe (deprecated in HTML5, use CSS for styling).

allowfullscreen: Enables or disables fullscreen mode for embedded content.

style: Allows inline CSS styling for the iframe.

Other attributes like name, sandbox, seamless, and more for specific use cases.

Form


<form action="url" method="post">
    <fieldset>
        <legend>Who are you ?</legend>
        <label>Login :<input type="text" name="login" /></label><br/>
        <label for="pswd">Password :</label><input type="password" name="password" id="pswd" /><br/>
        <input type="radio" name="sex" value="male" />Male<br/>
        <input type="radio" name="sex" value="female" />Female<br/>
    </fieldset>
    
    <label>Your favorite color : <select name="color">
        <option>red</option>
        <option>green</option>
        <option>blue</option>
    </select></label>
    
    <input type="checkbox" name="available" value="monday" />Monday<br/>
    <input type="checkbox" name="available" value="tuesday" />Tuesday<br/>
    
    <textarea name="comments" rows="10" cols="30" placeholder="Write your comments here"><textarea/>
    
    <input type="submit" value="Button text">
</form>

Input

Attribute	Description	Possible values
`name`	Name of the form control, to be paired with its value.	Text (no spaces).
`type`	The type of form control.	• `text`: Text field — text without line breaks. (default) • `password`: Text field with obscured input. • `checkbox`: Check box / tick box. • `radio`: Radio button — allows one control to be selected in a group of these sharing the same `name` attribute value. • `submit`: Submit button — submits the form. • `reset`: Reset button — resets the controls in a form to their initial default values. • `hidden`: A hidden control that can not be accessed directly by the user but the value of which is submitted with the rest of the form data. • `image`: An image that, when clicked or otherwise selected, will submit the form. The coordinates of the pixel point that the image is clicked on will become the control’s value. • `file`: File upload — allows a local file to be selected for submission. • `button`: Button with no default behaviour. • `search`: Text field for search strings. • `tel`: Text field for telephone numbers. • `url`: Text field for absolute URLs. • `email`: Text field for email addresses. • `date`: Date selection control. • `time`: Time selection control. • `number`: Text field or spinner for numerical values. • `range`: Slider, or similar, for selecting a numerical value from a potentially imprecise range. • `color`: Color well, with an 8-bit sRGB value.
`value`	An initial value.	Dependent on type.
`checked`	Sets a `checkbox` or `radio` type to be checked by default.	None.
`maxlength`	The maximum number of permissible characters in a value.	Number.
`minlength`	The minimum number of permissible characters in a value.	Number.
`src`	Used, and required, when type is `image`. The location of the image file to be used.	URL.
`alt`	Used, and required, when type is `image`. Alternative text that will replace the image if the image specified by `src` isn’t available.	Text.
`width`	Used when type is `image`. Pixel width of the image.	Number.
`height`	Used when type is `image`. Pixel height of the image.	Number.
`accept`	Used when type is `file`. Indicates what file types are accepted.	A single instance or comma-separated list of: • `audio/`: Audio files. • `video/`: Video files. • `image/*`: Image files. • MIME type, such as `application/pdf`. • Specific file extensions, such as `.pdf`.
`disabled`	Disables the form control.	None.
`readonly`	Makes the form control unalterable by the user.	None.
`autocomplete`	If a browser should implement autocomplete on the control or not.	• `on` (default) • `off`
`autofocus`	Indicates that the form control should have focus on page load. Should only be used on one form control in a page.	None.
`dirname`	Adds an additional field to be sent containing the directionality of the form control’s value.	Text (no spaces). `dirname="this.dir"` will append `this.dir=ltr` (left-to-right) or `this.dir=rtl` (right-to-left) to submitted data, for example.
`form`	Explicitly associates the control to a `form` element, which it may or may not be nested within. If absent, the control will be associated to its `form` ancestor.	Text matching the value of a `form` element’s `id` attribute.
`formaction`	Used when type is `submit` or `image`. The address to which submitted form data should be sent to. Will override a `form` element’s `action` attribute.	URL.
`formmethod`	Used when type is `submit` or `image`. The HTTP method by which submitted form data should be sent. Will override a `form` element’s `method` attribute.	• `get`: Bolts the form values onto the URL that the form is submitted to. Used for simple data sending, such as search queries, for example. • `post`: Invisibly sends the form data in the body of the submitted HTTP request. Used for more detailed or secure data sending, such as contact forms, for example.
`formenctype`	Used when type is `submit` or `image`. The MIME type used to encode the form data. Will override a `form` element’s `enctype` attribute.	• `application/x-www-form-urlencoded`: Default. • `multipart/form-data`: For when a file `input` element is used in the form. • `text/plain`: Basic text.
`formnovalidate`	Used when type is `submit` or `image`. Indicates that the form should not be validated before it is submitted. Will override a `form` element’s `novalidate` attribute.	None.
`formtarget`	Used when type is `submit` or `image`. The browsing context in which the submitted form’s destination URL should open. Will override a `form` element’s `target` attribute.	• `_self`: Opens in current window / tab. • `_blank`: Opens in a new window / tab.
`list`	Associates the form control with a list of options to suggest to the user.	Text matching the value of a `datalist` element’s `id` attribute.
`max`	Used when type is `date`, `time`, `number` or `range`. The maximum value.	Number.
`min`	Used when type is `date`, `time`, `number` or `range`. The minimum value.	Number.
`step`	Used when type is `date`, `time`, `number` or `range`. The increments in which a value can be increased or decreased.	Number or `any`.
`multiple`	Used when type is `email` or `file`. Indicates that the user can enter more than one value.	None.
`pattern`	A regular expression against which a value can be checked.	Regular expression.
`placeholder`	A visible hint as to what kind of data the user should input.	Text.
`required`	Indicates that the form field must be completed.	None.
`size`	The number of characters in a text-type control that a user should be expected to see whilst editing.	Number.