HTML & HTML5 – Documentation and Code Snippets

Jul 18, 2020 HTML markup languages

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

<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>

Tag	Element
title	page title
link	link to external source
style	CSS inside HTML page
script	Javascript code
meta	metadata
meta http-equiv=“refresh” content=“10”	auto-refresh page in 10s
base	base url for all links

Text Content

Headings

<h1>Main heading</h1>
<!-- etc -->
<h6>Level-6 heading</h6>

Tag	Element
h1	main heading
h6	least important heading

Paragraphs

<p>Paragraph.<br/>
Other line.</p>
<p>Other paragraph.</p>
<hr/>
<p>See the line above.</p>

Tag	Element
p	paragraph
br	line break
hr	horizontal line

Formatting

<em>Formatting</em> is <strong>important</strong> !
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab

Tag	Element
sub	subscript
sup	superscript
em	emphasize
strong	important
mark	highlighted
small	small
i	italic
b	bold

Quotes

<cite>This book</cite> was written by this author.
<q cite="url">quotation</q>
<blockquote cite="url">
Lorem ipsum<br/>
Lorem ipsum
</blockquote>

Tag	Element
cite	title of work
q	inline quotation
blockquote	quotation

Content

Links

<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>

Tag	Element
a	hyperlink

Images

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

Tag	Element
img	image

Blocks

<div>block</div>
<span>inline</span>

Tag	Element
div	block-level element
span	inline element

Lists

Unordered List

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

Tag	Element
ul	unordered list
li	list item

Ordered list

<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ol>

Tag	Element
ol	ordered list
li	list item

Definition list

<dl>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
</dl>

Tag	Element
dl	definition list
dt	term
dd	definition

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>

Tag	Element
table	table
tr	table row
th	table heading
td	table 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>

Tag	Element
caption	caption
colgroup	defines groups of columns
col	defines column’s properties
thead	groups headings together
tfoot	groups footers together
tbody	groups 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>

Tag	Element
form	form
label	label for input
fieldset	group inputs together
legend	legend 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
select	drop-down list
option	drop-down list item
optgroup	group of drop-down list items
datalist	autocompletion list
textarea	large 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>

Tag	Element
header	header of document or section
footer	footer of document or section
section	section
article	article, forum post, blog post, comment
aside	aside content related to surrounding content
nav	navigation 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>

Tag	Element
figure	an illustration
figcaption	caption of a figure element
details	details that can br shown or hidden
summary	visible heading of a details element
progress	progress of a task
meter	display a gauge
time	machine-readable time indication

« Bash Shell Scripting Language - Documentation and...

Go Programming Language »