HTML & HTML5 – Documentation and Code Snippets

· 754 words · 4 minute read

HTML stands for HyperText Markup Language. HTML5 is the fifth version of HTML. HTML is the markup language of the browser. It is the main pillar in the web technology. It structures all the webpages. So it is IMPORTANT!

Minimal Page 🔗

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- content here -->
    </body>
</html>

<head>
    <title>Title</title>
    <base href="base-url" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /* CSS code */
    </style>
    <script src="script.js"></script>
    <script>
        // Javascript code
    </script>
    <meta charset="UTF-8">
    <meta name="keywords" content="keywords">
    <meta name="description" content="description">
    <meta name="author" content="name">
    <meta http-equiv="refresh" content="10">
</head>
TagElement
titlepage title
linklink to external source
styleCSS inside HTML page
scriptJavascript code
metametadata
meta http-equiv=“refresh” content=“10”auto-refresh page in 10s
basebase url for all links

Text Content 🔗

Headings 🔗

<h1>Main heading</h1>
<!-- etc -->
<h6>Level-6 heading</h6>
TagElement
h1main heading
h6least important heading

Paragraphs 🔗

<p>Paragraph.<br/>
Other line.</p>
<p>Other paragraph.</p>
<hr/>
<p>See the line above.</p>
TagElement
pparagraph
brline break
hrhorizontal line

Formatting 🔗

<em>Formatting</em> is <strong>important</strong> !
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab
TagElement
subsubscript
supsuperscript
ememphasize
strongimportant
markhighlighted
smallsmall
iitalic
bbold

Quotes 🔗

<cite>This book</cite> was written by this author.
<q cite="url">quotation</q>
<blockquote cite="url">
Lorem ipsum<br/>
Lorem ipsum
</blockquote>
TagElement
citetitle of work
qinline quotation
blockquotequotation

Content 🔗

<a href="url">link</a>
<a href="url" target=_blank>open in a new window</a>

<a href="#comments">watch comments</a>
<h2 id="comments">comments</h2>
TagElement
ahyperlink

Images 🔗

<img src="image.png" alt="description" width="300" height="200" />
TagElement
imgimage

Blocks 🔗

<div>block</div>
<span>inline</span>
TagElement
divblock-level element
spaninline element

Lists 🔗

Unordered List 🔗

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
TagElement
ulunordered list
lilist item

Ordered list 🔗

<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ol>
TagElement
olordered list
lilist item

Definition list 🔗

<dl>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
</dl>
TagElement
dldefinition list
dtterm
dddefinition

Tables 🔗

Basic Table 🔗

<table>
<tr>
    <th>heading 1</th>
    <th>heading 2</th>
</tr>
<tr>
    <td>line 1, column 1</td>
    <td>line 1, column 2</td>
</tr>
<tr>
    <td>line 2, column 1</td>
    <td>line 2, column 2</td>
</tr>
</table>
TagElement
tabletable
trtable row
thtable heading
tdtable cell / table data

Advanced Table 🔗

<table>
<caption>caption</caption>
<colgroup>
    <col span="2" style="..." />
    <col style="..." />
</colgroup>
<thead>
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
        <th>heading 3</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>footer 1</th>
        <th>footer 2</th>
        <th>footer 3</th>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>line 1, column 1</td>
        <td>line 1, column 2</td>
        <td>line 1, column 3</td>
    </tr>
    <tr>
        <td>line 2, column 1</td>
        <td>line 2, column 2</td>
        <td>line 2, column 3</td>
    </tr>
</tbody>
</table>
TagElement
captioncaption
colgroupdefines groups of columns
coldefines column’s properties
theadgroups headings together
tfootgroups footers together
tbodygroups other rows

Forms 🔗

<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>
TagElement
formform
labellabel for input
fieldsetgroup inputs together
legendlegend for fieldset
input type=“text”text input
input type=“password”password input
input type=“radio”radio button
input type=“checkbox”checkbox
input type=“submit”send form
selectdrop-down list
optiondrop-down list item
optgroupgroup of drop-down list items
datalistautocompletion list
textarealarge text input

HTML5 Semantic 🔗

Page Layout 🔗

<header>My website</header>
<nav>
    <a href="page1">Page 1</a>
    <a href="page2">Page 2</a>
    <a href="page3">Page 3</a>
</nav>

<section>
    Hello everybody, Welcome to my website !
</section>

<article>
    <header>
        <h2>Title</h2>
    </header>
    <p>
        My article
    </p>
</article>

<aside>
    Writen by me
</aside>

<section id="comments">
    <article>Comment 1</article>
    <article>Comment 2</article>
</section>

<footer>
Copyright notice
</footer>
TagElement
headerheader of document or section
footerfooter of document or section
sectionsection
articlearticle, forum post, blog post, comment
asideaside content related to surrounding content
navnavigation links

New Elements 🔗

<figure>
    <img src="image.png" alt="figure 1" />
    <figcaption>Figure 1</figcaption>
</figure>

<details>
    <summary>Declaration of M. X on <time datetime="2013-12-25">Christmas day</time></summary>
    <p>M. X said...</p>
</details>

Downloading progress : <progress value="53" max="100"></progress>
Disk space : <meter value="62" min="10" max="350"></meter>
TagElement
figurean illustration
figcaptioncaption of a figure element
detailsdetails that can br shown or hidden
summaryvisible heading of a details element
progressprogress of a task
meterdisplay a gauge
timemachine-readable time indication
Tags: programming
Share:

See Also

Go Programming Language
Shell Scripting Crash Course - Cheatsheet for beginners
all Run Commands in Windows 7, 10 and 11
Chrome Keyboard Shortcuts
waffarx cash back