Technical reference

HTML Cheatsheet

Markup for the web

Getting Started

hello.html

Basic HTML Template

A boilerplate HTML5 document.

<!DOCTYPE html>
<html lang="en">
  <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">
    <title>HTML5 Boilerplate</title>
  </head>
  <body>
    <h1>Hello world, hello DevMarks!</h1>
  </body>
</html>

Comment

HTML Comment

<!-- this is a comment -->
<!--
  Or you can comment out a large number of lines.
-->

Paragraph

See: The Paragraph element

<p>I'm from DevMarks</p>
<p>Share quick reference cheat sheet.</p>

HTML link

See: The <a> Attributes

href	The URL that the hyperlink points to
rel	Relationship of the linked URL
target	Link target location: _self, _blank, _top, _parent

Image Tag

See: The Image Embed element

<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">

src	Required, Image location (URL \| Path)
alt	Describe of the image
width	Width of the image
height	Height of the image
loading	How the browser should load

HTML5 Tags

Document

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>DevMarks</h1>
  </main>
  <footer>
    <p>©2023 DevMarks</p>
  </footer>
</body>

Header Navigation

<header>
  <nav>
    <ul>
      <li><a href="#">Edit Page</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
    </ul>
  </nav>
</header>

HTML5 Video

↳ Preview

<video controls width="100%">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

HTML5 Audio

↳ Preview

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
  Your browser does not support the audio element.
</audio>

HTML5 Tags

article	Content that’s independent
aside	Secondary content
audio	Embeds a sound, or an audio stream
bdi	The Bidirectional Isolate element
canvas	Draw graphics via JavaScript
data	Machine readable content
datalist	A set of pre-defined options
details	Additional information
dialog	A dialog box or sub-window
embed	Embeds external application
figcaption	A caption or legend for a figure
figure	A figure illustrated
footer	Footer or least important
header	Masthead or important information
main	The main content of the document
mark	Text highlighted
meter	A scalar value within a known range
nav	A section of navigation links
output	The result of a calculation
picture	A container for multiple image sources
progress	The completion progress of a task
rp	Provides fall-back parenthesis

HTML Tables

Table Example

<table>
  <thead>
    <tr>
      <td>name</td>
      <td>age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Roberta</td>
      <td>39</td>
    </tr>
    <tr>
      <td>Oliver</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

HTML Table Tags

See: td#Attributes

<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Defines a group of columns
<col>	Defines a column within a table
<thead>	Groups the header content
<tbody>	Groups the body content
<tfoot>	Groups the footer content

<td> Attributes

See: td#Attributes

colspan	Number of columns a cell should span
headers	One or more header cells a cell is related to
rowspan	Number of rows a cell should span

<th> Attributes

See: th#Attributes

colspan	Number of columns a cell should span
headers	One or more header cells a cell is related to
rowspan	Number of rows a cell should span
abbr	Description of the cell's content
scope	The header element relates to

HTML Lists

Unordered list

Unordered List

See: The Unordered List element

<ul>
  <li>I'm an item</li>
  <li>I'm another item</li>
  <li>I'm another item</li>
</ul>

Ordered list

Ordered List

See: The Ordered List element

<ol>
  <li>I'm the first item</li>
  <li>I'm the second item</li>
  <li>I'm the third item</li>
</ol>

Definition list

Definition List

See: The Description List element

<dl>
  <dt>A Term</dt>
  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>

HTML Forms

Form tags

Form Element

The HTML <form> element is used to collect and send information to an external source.

<form method="POST" action="api/login">
  <label for="mail">Email: </label>
  <input type="email" id="mail" name="mail" />
  <br/>
  <label for="pw">Password: </label>
  <input type="password" id="pw" name="pw" />
  <br/>
  <input type="submit" value="Login" />
  <br/>
  <input type="checkbox" id="ck" name="ck" />
  <label for="ck">Remember me</label>
</form>

Form Attribute

Form Attributes

name	Name of form for scripting
action	URL of form script
method	HTTP method, POST / GET (default)
enctype	Media type, See enctype
onsubmit	Runs when the form was submit
onreset	Runs when the form was reset

Label tags

Label Tags

for in a label references an input's id attribute

<!-- Nested label -->
<label>Click me
  <input type="text" id="user" name="name"/>
</label>

<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>

Input tags

Input Text Field

See: HTML input Tags

<label for="Name">Name:</label>
<input type="text" name="Name" id="" />

Textarea tags

Textarea Tags

Textarea is a multiple-line text input control

<textarea rows="2" cols="30" name="address" id="address"></textarea>

Radio Buttons

<input type="radio" name="gender" id="m" />
<label for="m">Male</label>
<input type="radio" name="gender" id="f" />
<label for="f">Female</label>

Checkboxes

<input type="checkbox" name="s" id="soc" />
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas" />
<label for="bas">Baseball</label>

Select tags

Select Tags

<label for="city">City:</label>
<select name="city" id="city">
  <option value="1">Sydney</option>
  <option value="2">Melbourne</option>
  <option value="3">Cromwell</option>
</select>

HTML Media

Image

See: The Image element

<img src="" alt="" />

Audio

See: The Audio element

<audio src="" controls></audio>

Video

See: The Video element

<video src="" controls></video>