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
Share:
waffarx cash back