HTML Cheatsheet | Codeblox

Setup | Intro

Boiler Plate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.png"/>
    <title> Page Title </title>
    <meta name="description" content="Text to add a description">
    <meta name="author" content="Author Name">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
      <h1>Welcome to My Website</h1>
    </main>
    <script src="index.js"></script>
</body>
</html>

Use this code as a starting point for HTML pages.

Social Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title Here">
<meta property="og:description" content="describe website here">
<meta property="og:image" content="public/metapic.jpg">
    
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com">
<meta property="twitter:title" content="Title Here">
<meta property="twitter:description" content="describe website here"> 
<meta property="twitter:image" content="public/metapic.jpg">

Use this code to give a different appearance for when your website is posted on social platforms.

Classes and Ids

<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

<section id="single" ></section>

Use classes to target multiple elements, ids to target only one.

Style

<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>

Add CSS Styling inside within HTML Pages.

Comments

<!-- Comment Here -->

Code will be ignored. Useful to comment out code.

Semantic Elements:

Header | Nav

<header id="header">
    <h1> Home Logo </h1> 
    <nav id="nav">
      <ul>
        <li><a href="#home"> Home </a></li>
        <li><a href="#posts"> Posts </a></li>
        <li><a href="#contact"> Contact </a></li>
      </ul>
    </nav>
</header>

To define a header for a page or section, which usually holds logo, navigation links, introduction. Can't be placed within a <footer>, <address>, or another <header>.

Article

<article>
  <h2>Article Title</h2>
  <p>Article Content</p>
</article>

Defines an independent, self-contained content in a document. Which is intended to be independently distributable or reusable.

Details | Summary

<details>
  <summary> Click Here </summary>
  Closing and Opening Information
</details>

Defines additional details that a user can open and close on demand. Summary used as a title.

Main

<main>
  Main Content goes Here
</main>

Every page must have one main. Defines the main content of that page. Can't be a child of <article>, <aside>, <footer>, <header>, or <nav> element.

Figure | Figcaption

<figure>
   <img src="picture.jpg" alt="Info">
   <figcaption> Info </figcaption>
</figure>

To describe the content of elements or an element inside <figure> using <figcaption>.

Aside

<aside>
    <h2>Sidebar</h2>
    <p>This is some content in the sidebar</p>
</aside>

Defines content not related to the main content. Side bars are a good example.

Headings

<h1> Describe Page Content </h1>

Use base on importance and organization:
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Headings provide sections level of importance. Only use one <h1> per page describing the content of the page. And the rest to provide descriptions for other content on the page, based on level of importance.

Section

<section>
  Define a Section Here
</section>

Defines a section within a page, could be about anything. Chapters, information, and etc, seperated into sections.

Footer

<footer>
    <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    </ul>
</footer>

Defines a footer, content at the bottom. Authorship, copyright, contact, back to top links, related documents are some content used in a footer.

Links:

Anchor Tags

<a href="url" target="_self">Link Text</a>

An HTML link is displayed differently. Been visited, is unvisited, or is active. In CSS: 
a:link - styling for an unvisited link
a:visited - styling for a visited link 
a:hover - styling for when a link is hovered 
a:active - styling for when a link is being clicked on

To link to other sources.

Lists:

Ordered Lists

<ol type="1, A, a, I, i" start=" 1, any #">
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

Typically rendered as a numbered list. Can change that using type attribute, can also add a starting number.

List Style Type

list-style-type: disc;
list-style-type: circle;
list-style-type: square;

To change the style of list markers.

Unordered Lists

<ul type="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Represented as bullet pointed lists. Can change the marker shape using the type attribute.

Description Lists

<dl>
<dt> Topic 1 </dt>
  <dd> List item 1 </dd>
<dt> Topic 2 </dt>
  <dd> List item 2 </dd>
</dl>

To define lists for a specific topic, under titles.

Images:

Image

<img src="image.jpg" alt="description">

To add an image. Use alt to provide text and SEO.

Image Map

<img src="imagemap.jpg" alt="" usemap="#workmap">
    <map name="workmap">
    <area shape="rect" coords="" alt="" href="example.com"> 
</map>

To add links inside an image at certain areas. Can use a image map generator.

Picture

<picture>
    <source media="(min-width: 0px)" srcset="img.jpg">
    <source media="(min-width: 768px)" srcset="img2.jpg"> 
    <img src="img3.jpg">
</picture>

Use different images based on different screen sizes.

Iframes | Content:

Iframes

<iframe src="url" title="description"> </iframe>

An HTML iframe is used to display a web page within a web page.

Audio

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Used to add audio.

Iframes - Link/Target

<iframe src="url" name="iframe_a" title=""> </iframe>

<a href="example.com" target="iframe_a"> Show in iframe </a>

To change an iframe's content using links to different sources. Connected using target and name.

Meter

<label for="fuel">Fuel level:</label>
<meter id="fuel"
    min="0" max="100"
    low="33" high="66" optimum="80"
    value="50">
    at 50/100
</meter>

Represents either a scalar value within a known range or a fractional value.

Video

<video controls autoplay muted>
    <source src=”video.file” type=”video/mp4”>
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support video tag.
</video>

Used to add a video.

Text Formatting:

Text Formatting

<b> Bold Text </b>
<strong> Important Text </strong>
<i> Italic Text </i>
<em> Emphasized text </em>
<mark> Marked Highlighted Text </mark>
<small> Small Text </small>
<del> Deleted Text </del>
<ins> Inserted Text </ins>
<sub> _{Subscript Text} </sub>
<sup> ^{Superscript Text} </sup>

Text formatting is used to define text with special meaning, also changes the way text looks.

Computer Code

<code> Code </code>
<kbd> Keyboard Code </kbd>
<var> Variables </var>
<samp> Sample Output </samp>

To define code in text.

Preformatted Text

<pre> Code and Text 
Made Here Keeps Spaces 
and Line Breaks </pre>

To keep spaces and line breaks as shown in code.

Quotations

<blockquote cite="link to site"> Quote</blockquote>

<q> A short quotation <q>

<abbr title=”word”>  An abbreviation or an acronym  </abbr>

<address> Contact information, email, URL, address, phone, social media </address>

<cite> Defines title of a creative work (poem, song, movie, painting) </cite>  

<bdo dir="rtl">  Current text direction  </bdo>

To define quotations.

Entities:

HTML Entities

& nbsp ; - non-breaking space 
& lt ; - less than sign - <
& gt ; - greater than sign - >
& amp ; - ampersand - &
& quot ; - double quote - "
& apos ; - single quote - '
& copy ; - copyright - ©

Some characters are reserved for coding. Entities provide a way to use those characters.

Tables:

Tables

<table>
<tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Price</th>
</tr>
<tr>
    <td>Shoes</td>
    <td>1233</td>
    <td>$100</td>
</tr>
<tr>
    <td>Shirts</td>
    <td>3456</td>
    <td>$40</td>
</tr>
</table>

A simple HTML table.
<table>...</table> - to define a table
<th> Title </th> - represents a table heading
<tr> </tr> - to define a row in a table
<td> Content </td> - to define a table cell

colspan | rowspan

<td colspan="2"> spans over 2 columns </td>

<td rowspan="2"> spans over 2 rows </td>

<td rowspan="2" colspan="2"> spans over 2 rows and columns </td>

Attributes to make a table cell or table header take over multiple columns or rows in a table.

Caption

<table>
    <caption>Title For Table</caption>
    ...
</table>

To give a table a caption.

thead | tbody | tfoot

<table>
    <thead>
        <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Title</th>
            <td>Row Info</td>
        </tr>
        <tr>
            <th>Row Title</th>
            <td>Row Info</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Footer Title</th>
            <td>Footer Info</td>
        </tr>
    </tfoot>
</table>

<thead> - defines a header section of columns of a table
<tbody> - defines the body section of a table
<tfoot> - defines the footer section for a table

Colgroup | Col

<table>
    <colgroup>
    <col>
    <col span="2" class="group1">
    <col span="2" class="group2">
    </colgroup>
</table>

To define a group of columns in a table. Useful for specifying and styling.

Forms:

Form

<form action="" method="get">
    <fieldset>
        <legend>Caption for Fieldset</legend>

        <label for="subject">Enter Info:</label>
        <input type="" name="" id="subject" value="">
        
        <textarea name="" id="" cols="30" rows="10"></textarea>  

        <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        </select>

    </fieldset>
</form>

A simple form showing elements used for forms. A name attribute must be included for each value. To send data to external sources as name:value pairs.

Form Attributes

action="url of where to send data to"

method="get post" - use post if sending sensitive information

target="_blank, _self, _parent, _top" determines where response should be displayed 

enctype=" data encoding scheme to be used, only for post"

autocomplete="on off" - determines if the form has autocomplete enabled

novalidate - determines whether the form should be validated before submission

accept-charsets - determines character encodings when form is submitted

Attributes to be used on the <form> element.

fieldset | legend

<fieldset>
  <legend> Caption </legend>
    <input name="">
    <input name="">
</fieldset>

Used to group and define related inputs and labels.

Label

<label for="match"> Describe Input </label>
<input type="checkbox" name="" id="match">

To give an input a label, same id and for attributes. Useful for screen readers.

Form Inputs:

Radio

<div>
    <input type="radio" id="1" name="same" value="1" checked> 
    <label for="1"></label>
</div>

<div>
    <input type="radio" id="2" name="same" value="2">
    <label for="2">2</label>
</div>

<div>
    <input type="radio" id="3" name="same" value="3">
    <label for="3">3</label>
</div>

Choose One:
 Dogs  Cats

Use the same value for name attributes to group radio buttons. Can only select one.

Select

<label for="select">Choose an Option:</label>
<select name="select" id="select">
    <option value="">--Please choose an option--</option>  
    <option value="chocolate">chocolate</option>
    <option value="vanilla">vanilla</option>
    <option value="strawberry">strawberry</option>
</select>

Choose a flavor:

Represents a control that provides a menu of options.
Attributes:
multiple - able select mulitple by highlighting
size="2, 3, ..." - number of options displayed
selected - use on an option, predefined selected choice

Text Area

<textarea rols="" cols=""></textarea> 

Use this CSS to make it non-resizable:
textarea {
    resize: none;
  }

To add a multiline text input field.

Output

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">  
    <input type="range" id="b" name="b" value="50" /> +
    <input type="number" id="a" name="a" value="10" /> =
    <output name="result" for="a b">60
</form>

 +
 =
60

Inject the results of a calculation or the outcome of a user action.

Checkbox

<div>
    <input type="checkbox" id="1" name="">
    <label for="1">1</label>
</div>
  
<div>
    <input type="checkbox" id="2" name="">
    <label for="2">2</label>
</div>

Choose Multiple:
 Coding  Sleeping  Gaming

Use the same value for name attributes to group checkboxes. Can select multiple.

Datalist

<input list="datalist" id="" name="">

<datalist id="datalist">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="4">
    <option value="5">
</datalist>

Choose Favorite Hero:

Defines a list of predefined option values for an input. Match a list attribute to id.

Optgroup

<label for="cars">Choose a car:</label>
    <select  name="cars" id="cars">
        <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
    
Choose a car:

Defines a group of related options in a drop-down list.

Input Attributes

Input Restrictions and Attributes:
checked  - predefined selected
disabled  - disable input 
max=""  - maximum value
min=""  - minimum value
maxlength=""  - maximum amount of characters
minlength=""  - minimum amount of characters 
pattern="{regex}"  - provide a regex to control input values 
readonly  - makes input not editable
required  - input needs a value
size=""  - defines width and height of input
step=""  - set stepping interval
value=""  - value to be used
multiple  - can accept one or more values
placeholder=""  - add input text
autofocus  - should be focused on page load
autocomplete=""  - automated assistance

Input Form Attributes:
form="" - connect input to a form, must match id with forms
formaction="" - specifies the URL of the form that will process the input, overrides action attribute of form  
formenctype="" - specifies how form-data should be encoded before sending it to a server  
formmethod="post" - defines HTTP method, overrides method attribute of form 
formtarget="_blank" - specifies a name or keyword where to display the response  
formnovalidate="formnovalidate" - should not be validated when submitted, overrides novalidate (submit)

Attributes to use for inputs.

Input Types

<input type="radio"> 
<input type="button" value="submit"> 
<input type="checkbox"> 
<input type="color"> 
<input type="date"> 
<input type="datetime-local"> 
<input type="email"> 
<input type="file”> 
<input type="hidden"> 
<input type="image"> 
<input type="month"> 
<input type="number"> 
<input type="password"> 
<input type="range"> 
<input type="reset"> 
<input type="search"> 
<input type="submit"> 
<input type="tel"> 
<input type="text”> 
<input type="time"> 
<input type="url"> 
<input type="week">

All the different types of inputs.

Progress

<label for="progress">File progress:</label>

<progress id="progress" max="100" value="70"> 70% </progress>

Used to add a progress bar. Use Javascript to change the value using other values.

SEO:

Title

<title> Page Title </title>
<meta name="title" content="Page Title">

Shows up as the first clickable link in search engine results page and browser tab titles.

Alt

<img src="image.jpg" alt="description">

Alt helps SEO in image search results.

No Follow Links

<a href="http://example.com/" rel="nofollow"> Text </a>

When adding links to external sources. Tells search engines to ignore those sources promoting only your content.

Description

<meta name="description" content="Description shown for web page.">

Provides a description for a web page. Shows up in search engine results pages underneath title link.

Social Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title Here">
<meta property="og:description" content="describe website here">
<meta property="og:image" content="public/metapic.jpg">
    
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com">
<meta property="twitter:title" content="Title Here">
<meta property="twitter:description" content="describe website here"> 
<meta property="twitter:image" content="public/metapic.jpg">

Changes appearance of links to website on social platforms. Full list of Open Graph Tags

Headings

<h1> Describe Page Content </h1>

Use base on importance and organization:
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

In terms of SEO, header tags are also what search engines use to help determine segments of content and create featured rich snippets.

Robots Tag

<meta name="robots" content="noindex, nofollow">

Prevents a page from being indexed by search engines. Good for page not found, and error pages.

Canonical Tags

<link rel="canonical" href="https://website.com/">

A canonical URL is the primary URL of the page. Search engines use this URL to identify the primary page.

Google SEO Guide

Google SEO Guide

Link to google's SEO guide.

Accessibility:

Accessibility

Click on Title Link to Learn More

More to come soon...

Global Attributes:

Global Attributes

accesskey="key"     - generate a keyboard shortcut for current element  
autocapitalize="on" - text input is automatically capitalized 
autofocus           - element should be focused on page load
class=""            - allows to select elements for CSS and Javacript
id=""               - select a unique element
contenteditable     - makes an element editable
data-*=""           - allows customized information to be stored in elements
role=""             - to give elements more accessibility
spellcheck="true"   - checks for spelling mistakes
style=""            - add css styling
tabindex="0"        - allows elements to be tabbed through in order
title=""            - gives an element advisory information

Attributes to be used on most HTML elements.

Global Event Attributes

onclick
onmouseover
onload
onchange
onfocus

Event Atttributes for HTML elements. Click title link to see all events.