MediaWiki : Différence entre versions
De SLM - MediaWiki
(→test) |
|||
| Ligne 104 : | Ligne 104 : | ||
==test== | ==test== | ||
<syntaxhighlight lang="html" line='line'> | <syntaxhighlight lang="html" line='line'> | ||
| − | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="fr"> | <html lang="fr"> | ||
Version du 10 avril 2020 à 07:36
Bienvenue sur MediaWiki.
Sommaire
Créer un utilisateur
Pour créer un utilisateur, se rendre sur la page
https://wiki.slemoal.fr/index.php/Sp%C3%A9cial:Cr%C3%A9er_un_compte
Changer le theme par defaut
Dans les thèmes pré installé, seul le skin "Timeless est web responsive
Éditer le fichier:
nano /var/www/mediawiki/LocalSettings.php
Modifier la variable comme ci-dessous
$wgDefaultSkin = "timeless";
Barre de gauche
Pour modifier le menu de la barre de gauche, se rendre sur la page
https://wiki.slemoal.fr/index.php/MediaWiki:Sidebar
Modifier logo
Se rendre avec winscp sur
/var/www/mediawiki/resources/assets
Ajouter le logo sous un autre nom que wiki.png sinon il sera supprimé lors de mise à jours.
modifier le fichier:
nano /var/www/mediawiki/LocalSettings.php
Remplacer wgLogo = "$wgResourceBasePath/resources/assets/wiki.png";
Par
$wgLogo = "$wgResourceBasePath/resources/assets/SLM-MediaWikixcf.png";
Empêcher l'accès
De base, l'acces à mediawiki est ouvert a tout le monde.
Autant en lecture, modification, creation de compte.
Pour restreindre cela il faut modifier le fichier:
nano /var/www/mediawiki/LocalSettings.php
Ajouter à la fin du fichier
# Disable reading by anonymous users $wgGroupPermissions['*']['read'] = true; # Disable anonymous editing $wgGroupPermissions['*']['edit'] = false; # Prevent new user registrations except by sysops $wgGroupPermissions['*']['createaccount'] = false;
Mise à jour
Mettre a jour php
source
https://dev.to/pushkaranand/upgrading-to-php-7-4-26dg
- Mettre à jour les depots
apt install apt-transport-https lsb-release apt-transport-https wget -O /etc/apt/trusted.gpg.d/php.gpg https://packages.sury.org/php/apt.gpg # Download the signing key sh -c 'echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list' # Add Ondrej's repo to sources list. apt update apt upgrade apt install libapache2-mod-php7.4 a2enmod php7.4
- Desinstaller les ancienne version
apt purge php7.3 libapache2-mod-php7.3 # For removing PHP 7.3 apt purge php7.2 libapache2-mod-php7.2 # For removing PHP 7.2 apt purge php7.1 libapache2-mod-php7.1 # For removing PHP 7.1 apt purge php7.0 libapache2-mod-php7.0 # For removing PHP 7.0
- On redemarre
service apache2 restart
- Verifier la nouvelle version
php -v
Mettre a jour mediawiki
1 cd /var/www/
2 wget https://releases.wikimedia.org/mediawiki/1.34/mediawiki-1.34.1.tar.gz
3 tar -xvzf mediawiki-1.34.1.tar.gz
4 cp mediawiki-1.34.1/* mediawiki/ -r
5 rm mediawiki-1.34.1.tar.gz
6 rm mediawiki-1.34.1 -r
Exécuter le script de mise à jour
cd mediawiki/maintenance php update.php
test
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Liste complète des balises HTML5 et définitions simples</title>
<meta name="viewport" content="user-scalable=no, user-scalable=no, initial-scale=1.0, maximum-scale=1, width=device-width">
<meta name="format-detection" content="telephone=no">
<meta name="google-site-verification" content="E5TcfsR-qIjNOTiyc8TWSflPa33JkUcdDUcmGVes5bQ" />
<link rel="stylesheet" href="https://jaetheme.com/wp-content/themes/paris/dist/css/bootstrap-b24.css">
<link rel="apple-touch-icon" sizes="180x180" href="https://jaetheme.com/wp-content/themes/paris/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://jaetheme.com/wp-content/themes/paris/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://jaetheme.com/wp-content/themes/paris/favicon-16x16.png">
<!-- This site is optimized with the Yoast SEO plugin v12.4 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Liste et définitions des balises HTML5, le tableau fait office de fiche mémoire. Indispensable !"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<link rel="canonical" href="https://jaetheme.com/balises-html5/" />
<script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'>{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://jaetheme.com/#organization","name":"Jaetheme","url":"https://jaetheme.com/","sameAs":["https://fr.linkedin.com/in/jaetheme"],"logo":{"@type":"ImageObject","@id":"https://jaetheme.com/#logo","url":"https://jaetheme.com/wp-content/uploads/logo_276x276.png","width":276,"height":276,"caption":"Jaetheme"},"image":{"@id":"https://jaetheme.com/#logo"}},{"@type":"WebSite","@id":"https://jaetheme.com/#website","url":"https://jaetheme.com/","name":"UI designer et Illustrateur","publisher":{"@id":"https://jaetheme.com/#organization"},"potentialAction":{"@type":"SearchAction","target":"https://jaetheme.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://jaetheme.com/balises-html5/#webpage","url":"https://jaetheme.com/balises-html5/","inLanguage":"fr-FR","name":"Liste compl\u00e8te des balises HTML5 et d\u00e9finitions simples","isPartOf":{"@id":"https://jaetheme.com/#website"},"datePublished":"2011-06-05T09:58:23+00:00","dateModified":"2016-08-30T08:46:15+00:00","description":"Liste et d\u00e9finitions des balises HTML5, le tableau fait office de fiche m\u00e9moire. Indispensable !"}]}</script>
<!-- / Yoast SEO plugin. -->
<link rel='stylesheet' id='wp-block-library-css' href='https://jaetheme.com/wp-includes/css/dist/block-library/style.min.css?ver=63875b80f2068cfe9dde8a68f921999d' type='text/css' media='all' />
<script src="https://jaetheme.com/wp-content/themes/paris/js/bootstrap-2.js"></script>
</head>
<body data-rsssl=1 class="page-template page-template-page-referentiels-html5 page-template-page-referentiels-html5-php page page-id-520">
<header id="hd">
<div class="container-fluid hd">
<div class="row">
<div class="col-sm-3">
<p class="logo"><a href="https://jaetheme.com/" rel="home"><img src="https://jaetheme.com/wp-content/themes/paris/dist/img/jae-theme.svg" width="166" height="42" alt="UI UX designer freelance et intégrateur Web à Nantes et Paris"/></a> </p>
</div>
<div class="col-sm-9">
<ul id="list-main-menu" class="menu-outils not-for-smartphone">
<li class="item-blog"><a href="https://jaetheme.com/blog/mon-blog/" class="btn-blog">Mon blog</a> </li>
<li> - </li>
<li class="item-blog"><a href="https://jaetheme.com/" class="btn-blog">FR</a> </li>
<li> - </li>
<li class="item-blog"><a href="https://jaetheme.com/en/" class="btn-blog">EN</a> </li>
</ul>
</div>
</div>
</div>
<!-- nav -->
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#jaemenu" aria-expanded="false"> <i class="fa fa-bars"></i></button>
<a class="navbar-brand" href="https://jaetheme.com/" title="Retour à la page d'accueil" rel="home"> <img src="https://jaetheme.com/wp-content/themes/paris/dist/img/jae-theme.svg" width="166" height="42" alt="Jaetheme - UI UX designer freelance"/></a> </div>
<!-- nav links -->
<div class="collapse navbar-collapse" id="jaemenu">
<nav id="ulnav" class="menu-menu-container"><ul id="main-nav" class="nav navbar-nav"><li id="menu-item-1232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1232"><a href="https://jaetheme.com/services-web/ux-ui-designer-freelance/">UI design</a></li>
<li id="menu-item-1621" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1621"><a href="https://jaetheme.com/services-web/graphiste-freelance/">Graphisme, illustrations</a></li>
<li id="menu-item-1267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1267"><a href="https://jaetheme.com/references/">Quelques travaux…</a></li>
<li id="menu-item-1612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1612"><a href="https://jaetheme.com/jacques-martinet/">Contact</a></li>
</ul></nav> </div>
</div>
</nav>
<!-- / nav -->
</header>
<!-- BODY -->
<div id="bd" class="tpl-blog">
<!-- start COL LEFT -->
<aside class="tpl-col-left">
<div class="inside">
<!-- nav links -->
<nav id="blog-sub-nav" class="menu-menu-blog-container"><ul id="bloginav" class="skin-list-menu"><li id="menu-item-1645" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-1645"><a href="#null">Les articles</a>
<ul class="sub-menu">
<li id="menu-item-1750" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1750"><a href="https://jaetheme.com/blog/mon-blog/">Mon blog</a></li>
<li id="menu-item-1333" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-520 current_page_item menu-item-1333"><a href="https://jaetheme.com/balises-html5/" aria-current="page">Liste des balises HTML5</a></li>
<li id="menu-item-1684" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1684"><a href="https://jaetheme.com/blog/flexbox/">Flexbox – aide mémoire</a></li>
<li id="menu-item-1629" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1629"><a href="https://jaetheme.com/blog/application-web-apps/">Une application Web ou une App ?</a></li>
<li id="menu-item-1353" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1353"><a href="https://jaetheme.com/blog/structure-html5/">Structure d’un document HTML5</a></li>
<li id="menu-item-1635" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1635"><a href="https://jaetheme.com/blog/ce-que-google-attend-dun-site-mobile/">Ce que Google attend d’un site mobile</a></li>
<li id="menu-item-1668" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1668"><a href="https://jaetheme.com/blog/wireframe-zoning-et-storyboard/">Zoning VS Wireframe</a></li>
<li id="menu-item-1669" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1669"><a href="https://jaetheme.com/blog/definition-des-microdata/">Définition des Microdata</a></li>
<li id="menu-item-1336" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1336"><a href="https://jaetheme.com/integration-html-seo/">Intégration HTML5 et SEO</a></li>
<li id="menu-item-1675" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1675"><a href="https://jaetheme.com/blog/valider-site-w3c/">Valider son site aux standards du Web</a></li>
</ul>
</li>
<li id="menu-item-1329" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1329"><a href="#null">Divers</a>
<ul class="sub-menu">
<li id="menu-item-1674" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1674"><a href="https://jaetheme.com/blog/accessibilite-discours/">Accessibilité : Changeons notre discours</a></li>
<li id="menu-item-1670" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1670"><a href="https://jaetheme.com/blog/definition-des-wai-aria/">Définition des WAI-ARIA</a></li>
<li id="menu-item-1673" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1673"><a href="https://jaetheme.com/blog/labels-accessibilite/">Les labels d’accessibilité</a></li>
<li id="menu-item-1340" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1340"><a href="https://jaetheme.com/blog/accessibilite-level-a/">Premier niveau d’accessibilité</a></li>
<li id="menu-item-1354" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1354"><a href="https://jaetheme.com/blog/w3c-referencement/">Validation W3C et SEO</a></li>
</ul>
</li>
</ul></nav> </div>
</aside>
<!-- end COL LEFT -->
<!-- start COL CENTER -->
<article class="tpl-col-center">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="inside post-blog">
<header>
<h1>
Liste des balises HTML5 </h1>
</header>
<div class="html5taginside">
<p><img src="https://jaetheme.com/wp-content/themes/paris/dist/img/liste-balises-html5.jpg" width="1463" height="440" alt="Liste des balises HTML"></p>
<!-- row -->
<div class="row">
<div class="col-sm-12">
<p class="html-right"><span><img src="https://jaetheme.com/wp-content/themes/paris/dist/img/hachure.jpg" width="46" height="28" alt="" class="align-left" > <em>Les balises avec des hachures sont obsolètes</em></span></p>
</div>
</div>
<!-- / row -->
<!-- row -->
<div class="row">
<div class="col-sm-12">
<ul id="liste-balises-html5" class="skin-balises list-unstyled">
<li><a href="#comment"><code class="language-html"><!--...--></code></a></li>
<li><a href="#doctype" rel="bookmark"><code class="language-html">!DOCTYPE</code></a></li>
<li class="list-row"><span>a</span></li>
<li><a href="#a" rel="bookmark"><code class="language-html">a</code></a></li>
<li><a href="#abbr" rel="bookmark"><code class="language-html">abbr</code></a></li>
<li><del><a href="#ac" rel="bookmark"><code class="language-html">acronym</code></a></del></li>
<li><a href="#address" rel="bookmark"><code class="language-html">address</code></a></li>
<li><del><a href="#ap" rel="bookmark"><code class="language-html">applet</code></a></del></li>
<li><a href="#area" rel="bookmark"><code class="language-html">area</code></a></li>
<li><a href="#article" rel="bookmark"><code class="language-html">article</code></a></li>
<li><a href="#aside" rel="bookmark"><code class="language-html">aside</code></a></li>
<li><a href="#audio" rel="bookmark"><code class="language-html">audio</code></a></li>
<li class="list-row"><span class="correction">b</span></li>
<li><a href="#b" rel="bookmark"><code class="language-html">b</code></a></li>
<li><a href="#base" rel="bookmark"><code class="language-html">base</code></a></li>
<li><del><a href="#bs" rel="bookmark"><code class="language-html">basefont</code></a></del></li>
<li><a href="#bdo" rel="bookmark"><code class="language-html">bdo</code></a></li>
<li><a href="#bdi" rel="bookmark"><code class="language-html">bdi</code></a></li>
<li><del><a href="#big" rel="bookmark"><code class="language-html">big</code></a></del></li>
<li><a href="#blockquote" rel="bookmark"><code class="language-html">blockquote</code></a></li>
<li><a href="#body" rel="bookmark"><code class="language-html">body</code></a></li>
<li><a href="#br" rel="bookmark"><code class="language-html">br</code></a></li>
<li><a href="#button" rel="bookmark"><code class="language-html">button</code></a></li>
<li class="list-row"><span>c</span></li>
<li><a href="#canvas" rel="bookmark"><code class="language-html">canvas</code></a></li>
<li><a href="#caption" rel="bookmark"><code class="language-html">caption</code></a></li>
<li><del><a href="#center" rel="bookmark"><code class="language-html">center</code></a></del></li>
<li><a href="#cite" rel="bookmark"><code class="language-html">cite</code></a></li>
<li><a href="#code" rel="bookmark"><code class="language-html">code</code></a></li>
<li><a href="#col" rel="bookmark"><code class="language-html">col</code></a></li>
<li><a href="#colgroup" rel="bookmark"><code class="language-html">colgroup</code></a></li>
<li><a href="#command" rel="bookmark"><code class="language-html">command</code></a></li>
<li class="list-row"><span class="correction">d</span></li>
<li><a href="#datalist" rel="bookmark"><code class="language-html">datalist</code></a></li>
<li><a href="#dd" rel="bookmark"><code class="language-html">dd</code></a></li>
<li><a href="#del" rel="bookmark"><code class="language-html">del</code></a></li>
<li><a href="#details" rel="bookmark"><code class="language-html">details</code></a></li>
<li><a href="#dfn" rel="bookmark"><code class="language-html">dfn</code></a></li>
<li><del><a href="#dir" rel="bookmark"><code class="language-html">dir</code></a></del></li>
<li><a href="#div" rel="bookmark"><code class="language-html">div</code></a></li>
<li><a href="#dl" rel="bookmark"><code class="language-html">dl</code></a></li>
<li><a href="#dt" rel="bookmark"><code class="language-html">dt</code></a></li>
<li class="list-row"><span>e</span></li>
<li><a href="#em" rel="bookmark"><code class="language-html">em</code></a></li>
<li><a href="#embed" rel="bookmark"><code class="language-html">embed</code></a></li>
<li class="list-row"><span>f</span></li>
<li><a href="#fieldset" rel="bookmark"><code class="language-html">fieldset</code></a></li>
<li><a href="#figcaption" rel="bookmark"><code class="language-html">figcaption</code></a></li>
<li><a href="#figure" rel="bookmark"><code class="language-html">figure</code></a></li>
<li><del><a href="#font" rel="bookmark"><code class="language-html">font</code></a></del></li>
<li><a href="#footer" rel="bookmark"><code class="language-html">footer</code></a></li>
<li><a href="#form" rel="bookmark"><code class="language-html">form</code></a></li>
<li><del><a href="#frame" rel="bookmark"><code class="language-html">frame</code></a></del></li>
<li><del><a href="#frameset" rel="bookmark"><code class="language-html">frameset</code></a></del></li>
<li class="list-row"><span>h</span></li>
<li><a href="#hn" rel="bookmark"><code class="language-html">h1 à h6</code></a></li>
<li><a href="#head" rel="bookmark"><code class="language-html">head</code></a></li>
<li><a href="#header" rel="bookmark"><code class="language-html">header</code></a></li>
<li><del><a href="#hgroup" rel="bookmark"><code class="language-html">hgroup</code></a></del></li>
<li><a href="#hr" rel="bookmark"><code class="language-html">hr</code></a></li>
<li><a href="#html" rel="bookmark"><code class="language-html">html</code></a></li>
<li class="list-row"><span class="correction">i</span></li>
<li><a href="#i" rel="bookmark"><code class="language-html">i</code></a></li>
<li><a href="#iframe" rel="bookmark"><code class="language-html">iframe</code></a></li>
<li><a href="#img" rel="bookmark"><code class="language-html">img</code></a></li>
<li><a href="#input" rel="bookmark"><code class="language-html">input</code></a></li>
<li><a href="#ins" rel="bookmark"><code class="language-html">ins</code></a></li>
<li class="list-row"><span>k</span></li>
<li><a href="#keygen" rel="bookmark"><code class="language-html">keygen</code></a></li>
<li><a href="#kbd" rel="bookmark"><code class="language-html">kbd</code></a></li>
<li class="list-row"><span class="correction">l</span></li>
<li><a href="#label" rel="bookmark"><code class="language-html">label</code></a></li>
<li><a href="#legend" rel="bookmark"><code class="language-html">legend</code></a></li>
<li><a href="#li" rel="bookmark"><code class="language-html">li</code></a></li>
<li><a href="#link" rel="bookmark"><code class="language-html">link</code></a></li>
<li class="list-row"><span>m</span></li>
<li><a href="#main" rel="bookmark"><code class="language-html">main</code></a></li>
<li><a href="#map" rel="bookmark"><code class="language-html">map</code></a></li>
<li><a href="#mark" rel="bookmark"><code class="language-html">mark</code></a></li>
<li><a href="#menu" rel="bookmark"><code class="language-html">menu</code></a></li>
<li><a href="#meta" rel="bookmark"><code class="language-html">meta</code></a></li>
<li><a href="#meter" rel="bookmark"><code class="language-html">meter</code></a></li>
<li class="list-row"><span>n</span></li>
<li><a href="#nav" rel="bookmark"><code class="language-html">nav</code></a></li>
<li><del><a href="#noframes" rel="bookmark"><code class="language-html">noframes</code></a></del></li>
<li><a href="#noscript" rel="bookmark"><code class="language-html">noscript</code></a></li>
<li class="list-row"><span>o</span></li>
<li><a href="#object" rel="bookmark"><code class="language-html">object</code></a></li>
<li><a href="#ol" rel="bookmark"><code class="language-html">ol</code></a></li>
<li><a href="#optgroup" rel="bookmark"><code class="language-html">optgroup</code></a></li>
<li><a href="#option" rel="bookmark"><code class="language-html">option</code></a></li>
<li><a href="#output" rel="bookmark"><code class="language-html">output</code></a></li>
<li class="list-row"><span>p</span></li>
<li><a href="#p" rel="bookmark"><code class="language-html">p</code></a></li>
<li><a href="#param" rel="bookmark"><code class="language-html">param</code></a></li>
<li><a href="#pre" rel="bookmark"><code class="language-html">pre</code></a></li>
<li><a href="#progress" rel="bookmark"><code class="language-html">progress</code></a></li>
<li class="list-row"><span>q</span></li>
<li><a href="#q" rel="bookmark"><code class="language-html">q</code></a></li>
<li class="list-row"><span class="correction">r</span></li>
<li><a href="#rp" rel="bookmark"><code class="language-html">rp</code></a></li>
<li><a href="#rt" rel="bookmark"><code class="language-html">rt</code></a></li>
<li><a href="#ruby" rel="bookmark"><code class="language-html">ruby</code></a></li>
<li class="list-row"><span>s</span></li>
<li><a href="#s" rel="bookmark"><code class="language-html">s</code></a></li>
<li><a href="#samp" rel="bookmark"><code class="language-html">samp</code></a></li>
<li><a href="#script" rel="bookmark"><code class="language-html">script</code></a></li>
<li><a href="#section" rel="bookmark"><code class="language-html">section</code></a></li>
<li><a href="#select" rel="bookmark"><code class="language-html">select</code></a></li>
<li><a href="#small" rel="bookmark"><code class="language-html">small</code></a></li>
<li><a href="#source" rel="bookmark"><code class="language-html">source</code></a></li>
<li><a href="#span" rel="bookmark"><code class="language-html">span</code></a></li>
<li><del><a href="#strike" rel="bookmark"><code class="language-html">strike</code></a></del></li>
<li><a href="#strong" rel="bookmark"><code class="language-html">strong</code></a></li>
<li><a href="#style" rel="bookmark"><code class="language-html">style</code></a></li>
<li><a href="#sub" rel="bookmark"><code class="language-html">sub</code></a></li>
<li><a href="#summary" rel="bookmark"><code class="language-html">summary</code></a></li>
<li><a href="#sup" rel="bookmark"><code class="language-html">sup</code></a></li>
<li class="list-row"><span class="correction">t</span></li>
<li><a href="#table" rel="bookmark"><code class="language-html">table</code></a></li>
<li><a href="#tbody" rel="bookmark"><code class="language-html">tbody</code></a></li>
<li><a href="#td" rel="bookmark"><code class="language-html">td</code></a></li>
<li><a href="#textarea" rel="bookmark"><code class="language-html">textarea</code></a></li>
<li><a href="#tfoot" rel="bookmark"><code class="language-html">tfoot</code></a></li>
<li><a href="#th" rel="bookmark"><code class="language-html">th</code></a></li>
<li><a href="#thead" rel="bookmark"><code class="language-html">thead</code></a></li>
<li><a href="#time" rel="bookmark"><code class="language-html">time</code></a></li>
<li><a href="#title" rel="bookmark"><code class="language-html">title</code></a></li>
<li><a href="#tr" rel="bookmark"><code class="language-html">tr</code></a></li>
<li><a href="#track" rel="bookmark"><code class="language-html">track</code></a></li>
<li><del><a href="#tt" rel="bookmark"><code class="language-html">tt</code></a></del></li>
<li class="list-row"><span>u</span></li>
<li><del><a href="#u" rel="bookmark"><code class="language-html">u</code></a></del></li>
<li><a href="#ul" rel="bookmark"><code class="language-html">ul</code></a></li>
<li class="list-row"><span>v</span></li>
<li><a href="#var" rel="bookmark"><code class="language-html">var</code></a></li>
<li><a href="#video" rel="bookmark"><code class="language-html">video</code></a></li>
<li class="list-row"><span>w</span></li>
<li><a href="#wbr" rel="bookmark"><code class="language-html">wbr</code></a></li>
<li><del><a href="#xmp" rel="bookmark"><code class="language-html">xmp</code></a></del></li>
</ul>
</div>
</div>
<!-- row -->
<div class="row skin-row-dashed">
<div class="col-sm-12">
<h2> Définition des balises HTML5</h2>
<div class="block-table">
<div class="table-responsive">
<table id="table-list-html5" class="table">
<thead>
<tr>
<th id="balise">Balise</th>
<th id="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th id="comment"><!--...--></th>
<td>Pour un commentaire</td>
</tr>
<tr>
<th id="doctype"><!DOCTYPE></th>
<td>L'inclusion du DOCTYPE dans un document HTML assure que le navigateur interprétera la version HTML ainsi déclarée. <br>
En HTML5 le doctype à déclarer est : <!DOCTYPE html>.</td>
</tr>
<tr >
<th id="a"><code class="language-html5"><a></code></th>
<td>Utilisée pour les hyperliens. <strong>Attention :</strong> l'attribut "name" n'existe plus pour les liens.
<div class="details">
<div class="summary"><a href="#l-a" rel="bookmark"><span>Sequential link types (déclaration : "rel")</span></a></div>
<div id="l-a" class="pannel">
<ul class="list-unstyled">
<li><a href="http://www.w3.org/TR/html5/links.html#link-type-next" rel="external" target="_blank">rel="next"</a></li>
<li><a href="http://www.w3.org/TR/html5/links.html#link-type-prev" rel="external" target="_blank">rel="prev"</a></li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#t-a" rel="bookmark" target="_blank"><span>Link types</span></a></div>
<div id="t-a" class="pannel">
<ul class="list-unstyled">
<li>"alternate"</li>
<li>"author"</li>
<li>"bookmark"</li>
<li>"external"</li>
<li>"help"</li>
<li>"icon"</li>
<li>"license"</li>
<li>"nofollow"</li>
<li>"noreferrer" est implémenté dans Webkit mais non utilisé par Safari et Chrome.</li>
<li>"pingback"</li>
<li>"prefetch"</li>
<li>"search"</li>
<li>"sidebar"</li>
<li>"stylesheet"</li>
<li>"tag" Confusion possible : Ne doit pas être utilisé dans un tagcloud.</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#a-a" rel="bookmark"><span>attributs</span></a></div>
<div id="a-a" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>href</li>
<li>target</li>
<li>rel</li>
<li>media</li>
<li>hreflang</li>
<li>type</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="abbr"><code class="language-html5"><abbr></code></th>
<td>Pour une abréviation. Son attribut "title" ne doit être utilisé que pour l'extension de l'abréviation et rien d'autre.
<div class="details">
<div class="summary"><a href="#a-abbr" rel="bookmark"><span>attributs</span></a></div>
<div id="a-abbr" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-abbr" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-abbr" class="pannel">
<pre>Une nouvelle version d'<abbr title="Hypertext Markup Language">HTML</abbr> est sortie des fourneaux.</pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="ac"><code class="language-html5"><acronym></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="address"><code class="language-html5"><address></code></th>
<td>Généralement utilisée dans le conteneur <footer>, cette balise est utilisée à la place de la balise <p>, les informations nécessaires pour contacter la ou les auteurs du document cité. Cela peut-être son nom ou un label suivi de son adresse email par-exemple ou adresse postale. Confusion possible : on utilisera la balise <p> pour donner l'adresse postale d'une entreprise sans relation avec l'auteur du document s'y rapportant.
<div class="details">
<div class="summary"><a href="#a-address" rel="bookmark"><span>attributs</span></a></div>
<div id="a-address" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-address" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-address" class="pannel">
<pre><address>
Ecrit par Jacques :
<a href="mailto:jmartinet@domaine.com">contactez-moi</a>
</address></pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="ap"><code class="language-html5"><applet></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="area"><code class="language-html5"><area></code></th>
<td>Définie une zone ou plusieurs zones pour une carte image. Cette balise s'utilise toujours avec la balise <map>.
<div class="details">
<div class="summary"><a href="#arer" rel="bookmark"><span>attributs</span></a></div>
<div id="addr" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>alt</li>
<li>coords</li>
<li>shape</li>
<li>href</li>
<li>target</li>
<li>rel</li>
<li>media</li>
<li>hreflang</li>
<li>type</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="article"><code class="language-html5"><article></code></th>
<td>Utilisé pour du contenu ayant son propre sens <strong>indépendamment du reste des autres éléments de la page</strong>, ce contenu est distribuable et réutilisable. Cela peut-être un billet de forum, un article de journal, un gadget, un commentaire d'utilisateur... La balise <article> peut avoir son propre header et footer. Confusion possible avec la balise <section> qui regroupe des éléments de thématique identique.
<div class="details">
<div class="summary"><a href="#a-article" rel="bookmark"><span>attributs</span></a></div>
<div id="a-article" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-ert" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-ert" class="pannel">
<pre><article>
La conférence sur l'utilisation des standards du Web a prouvé que (...)
</article> </pre>
<strong>ou</strong>
<pre><article>
<p>La conférence sur l'utilisation des standards du Web a prouvé que (...)</p>
</article> </pre>
</div>
</div></td>
</tr>
<tr>
<th id="aside"><code class="language-html5"><aside></code></th>
<td>Balise de structure supposant avoir un titre de type <h1>. Cette balise permet de regrouper des informations non essentielles relatives au site Web. Lorsque la balise <aside> se trouve dans un article, son contenu se réfère à l'article lui même et non au site Web (par exemple des notes de pages, un glossaire ou tout élément relatifs à l'article).<br>
Confusion : La sidebar d'une page n'a pas pour obligation d'être dans une balise <aside>.
<div class="details">
<div class="summary"><a href="#a-aside" rel="bookmark"><span>attributs</span></a></div>
<div id="a-aside" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="audio"><code class="language-html5"><audio></code></th>
<td>Pour lire un fichier audio.
<div class="details">
<div class="summary"><a href="#a-audio" rel="bookmark"><span>attributs</span></a></div>
<div id="a-audio" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>preload</li>
<li>autoplay</li>
<li>mediagroup</li>
<li>loop</li>
<li>muted</li>
<li>controls</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-audio" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-audio" class="pannel">
<pre>
<audio controls="controls">
<source src="concerto_mozart.ogg" type="audio/ogg" />
<source src="concerto_mozart.mp3" type="audio/mp3" />
Votre navigateur ne supporte pas la balise audio.
</audio>
</pre>
</div>
</div></td>
</tr>
<tr>
<th id="b"><code class="language-html5"><b></code></th>
<td>Utilisé dans un paragraphe pour une partie de texte en gras, sémantiquement faible, on lui préférera la balise <strong> pour donner de l'importance au texte.
<div class="details">
<div class="summary"><a href="#a-b" rel="bookmark"><span>attributs</span></a></div>
<div id="a-b" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="base"><code class="language-html5"><base></code></th>
<td>Cette balise permet de définir l'URL de base (l'utilisation de cette balise est parfois controversée).
<div class="details">
<div class="summary"><a href="#a-base" rel="bookmark"><span>attributs</span></a></div>
<div id="a-base" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>href</li>
<li>target</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="bs"><code class="language-html5"><basefont></code></th>
<td>Non utilisé . (On peut tout de même encore la trouver dans l'intégration HTML4 de newsletters pour déclarer des polices.)</td>
</tr>
<tr>
<th id="bdo"><code class="language-html5"><bdo></code></th>
<td>Utilisé pour la direction d'un texte. Attention, l'attribut "dir" à une valeur sémantique différente pour cette balise.
<div class="details">
<div class="summary"><a href="#a-bdo" rel="bookmark"><span>attributs</span></a></div>
<div id="a-bdo" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="bdi"><code class="language-html5"><bdi></code></th>
<td>Utilisé pour la direction d'un texte.Attention, l'attribut "dir" à une valeur sémantique différente pour cette balise.
<div class="details">
<div class="summary"><a href="#a-bdi" rel="bookmark"><span>attributs</span></a></div>
<div id="a-bdi" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr class="strip">
<th id="big"><code class="language-html5"><big></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="blockquote"><code class="language-html5"><blockquote></code></th>
<td>Pour une longue citation venant d'une source externe, l'adresse de la source peut-être indiquée dans l'attribut "cite". Dans le cas d'un forum de discussion ou d'un blog, un utilisateur peut utiliser cette balise pour citer le commentaire d'un autre utilisateur. Nous n'utiliserons pas cette balise pour un dialogue. Confusion possible avec la balise <a href="#q" title="Voir la balise q"><q></a>.
<div class="details">
<div class="summary"><a href="#a-blockquote" rel="bookmark"><span>attributs</span></a></div>
<div id="a-blockquote" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s) :
<ul class="list-unstyled">
<li> <a rel="external" target="_blank">cite</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-deails" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-deails" class="pannel">
<pre><p>Victor Hugo nous dit :</p>
<blockquote cite="http://www.victor-hugo.com/x.html">
<p>L'appétit vient en mangeant et l'amour en possédant.</p>
</blockquote></pre>
</div>
</div></td>
</tr>
<tr>
<th id="body"><code class="language-html5"><body></code></th>
<td>Partie principale du document HTML.
<div class="details">
<div class="summary"> <a href="#a-bodye" rel="bookmark"><span>attributs</span></a></div>
<div id="a-body" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>onafterprint</li>
<li>onbeforeprint</li>
<li>onbeforeunload</li>
<li>onblur</li>
<li>onerror</li>
<li>onfocus</li>
<li>onhashchange</li>
<li>onload</li>
<li>onmessage</li>
<li>onoffline</li>
<li>ononline</li>
<li>onpagehide</li>
<li>onpageshow</li>
<li>onpopstate</li>
<li>onredo</li>
<li>onresize</li>
<li>onscroll</li>
<li>onstorage</li>
<li>onundo</li>
<li>onunload</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="br"><code class="language-html5"><br></code></th>
<td>Utilisée dans un paragraphe, cette balise permet de créer un saut de ligne.
<div class="details">
<div class="summary"><a href="#a-br" rel="bookmark"><span>attributs</span></a></div>
<div id="a-br" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="button"><code class="language-html5"><button></code></th>
<td>Pour un bouton. il peut être utilisé comme commande.
<div class="details">
<div class="summary"><a href="#a-button" rel="bookmark"><span>attributs</span></a></div>
<div id="a-button" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>autofocus</li>
<li>disabled</li>
<li>form</li>
<li>formaction</li>
<li>formenctype</li>
<li>formmethod</li>
<li>formnovalidate</li>
<li>formtarget</li>
<li>name</li>
<li>type</li>
<li>value</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="canvas"><code class="language-html5"><canvas></code></th>
<td>Pour créer un graphique avec la possibilité de l'animer avec du JavaScript.
<div class="details">
<div class="summary"><a href="#a-canvas" rel="bookmark"><span>attributs</span></a></div>
<div id="a-canvas" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-canvas" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-canvas" class="pannel">
<pre><canvas id="myCanvas"></canvas><br>
<script type="text/javascript"><br> var canvas=document.getElementById('myCanvas');<br> var ctx=canvas.getContext('2d');<br> ctx.fillStyle='#FF0000';<br> ctx.fillRect(0,0,80,100);<br></script></pre>
</div>
</div></td>
</tr>
<tr>
<th id="caption"><code class="language-html5"><caption></code></th>
<td>Pour le titre d'un tableau. Note : En HTML5, l'attribut "summary" de la balise "table' n'est plus valide et ne doit pas être utilisé.
<div class="details">
<div class="summary"><a href="#a-caption" rel="bookmark"><span>attributs</span></a></div>
<div id="a-caption" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-caption" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-caption" class="pannel">
<pre><table>
<caption>Monthly savings</caption> <br> <tr><br> <th>Month</th><br> <th>Savings</th><br> </tr><br> <tr><br> <td>January</td><br> <td>$100</td><br> </tr><br></table></pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="center"><code class="language-html5"><center></code></th>
<td>Non utilisé</td>
</tr>
<tr id="cite">
<th><code class="language-html5"><cite></code></th>
<td>Utilisée pour le titre d'une oeuvre, d'un document ou d'un évènement. Cette balise peut-être peut-être utilisée conjointement avec la balise <a href="#q" title="Voir le descriptif de la balise q"><q></a>. Cette balise ne peut être utilisée pour une personne.
<div class="details">
<div class="summary"><a href="#a-cite" rel="bookmark"><span>attributs</span></a></div>
<div id="a-cite" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-chye" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-chye" class="pannel">
<pre><p>Mon livre préféré est <cite>Les misérables</cite> de Vitor Hugo</p></pre>
</div>
</div></td>
</tr>
<tr>
<th id="code"><code class="language-html5"><code></code></th>
<td>Pour déclarer du code informatique. On peut l'utiliser à l'intérieur de la balise <pre> pour du texte pré formaté. On recommande d'utiliser une classe avec le nom du langage informatique cité dans cette balise. On peut ajouter un classe pour décrire le type de langage utilisé dans la balise exemple : <code class="language-javascript">. Confusion possible avec la balise <samp>.
<div class="details">
<div class="summary"><a href="#a-code" rel="bookmark"><span>attributs</span></a></div>
<div id="a-code" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-cde" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-cde" class="pannel">
<pre><code>
teardown: function() {
if ( this.removeEventListener ) { ... }
}
</code></pre>
</div>
</div></td>
</tr>
<tr>
<th id="col"><code class="language-html5"><col></code></th>
<td> Utilisé pour créer des colonnes dans un tableau.
<div class="details">
<div class="summary"><a href="#a-col" rel="bookmark"><span>attributs</span></a></div>
<div id="a-col" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>span</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="colgroup"><code class="language-html5"><colgroup></code></th>
<td> Utilisé pour créer des groupes de colonnes dans un tableau.
<div class="details">
<div class="summary"><a href="#a-colgroup" rel="bookmark"><span>attributs</span></a></div>
<div id="a-colgroup" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>span</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="command"><code class="language-html5"><command></code></th>
<td>Cette balise est utilisée comme un bouton, un radiobutton, ou un checkbox. Elle ne peut être visible qu'à l'intérieur de la balise <menu>, dans le cas contraire, elle ne sera pas visible et utilisée comme raccourcis clavier. Attention, l'attribut "title" à une valeur sémantique différente pour cette balise.
<div class="details">
<div class="summary"><a href="#a-command" rel="bookmark"><span>attributs</span></a></div>
<div id="a-command" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>type</li>
<li>label</li>
<li>icon</li>
<li>disabled</li>
<li>checked</li>
<li>radiogroup</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="datalist"><code class="language-html5"><datalist></code></th>
<td>Pour une liste déroulante.
<div class="details">
<div class="summary"><a href="#a-datalist" rel="bookmark"><span>attributs</span></a></div>
<div id="a-datalist" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="dd"><code class="language-html5"><dd></code></th>
<td>Pour la description d'une définition, s'utilise avec la balise <dl>.
<div class="details">
<div class="summary"><a href="#a-dd" rel="bookmark"><span>attributs</span></a></div>
<div id="a-dd" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="del"><code class="language-html5"><del></code></th>
<td>Utilisé pour indiquer qu'une partie de texte est supprimée, mais conservée pour en garder la trace, on la stylisera en CSS. On peut utiliser cette balise conjointement avec la balise <ins> pour indiquer le nouveau texte qui est à prendre en compte. Confusion possible avec la balise <s>qui indique qu'un texte n'est pas correct ou non pertinent.
<div class="details">
<div class="summary"><a href="#a-del" rel="bookmark"><span>attributs</span></a></div>
<div id="a-del" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>cite</li>
<li>datetime</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="details"><code class="language-html5"><details></code></th>
<td> Pour apporter des détails sur Widget, il peut être utilisé pour cacher/afficher des informations complémentaires. Il peut être le conteneur de la balise <summary>.
<div class="details">
<div class="summary"><a href="#a-details" rel="bookmark"><span>attributs</span></a></div>
<div id="a-details" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>open</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-details" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-details" class="pannel">
<pre><details>
<summary>Copyright 1999-2011.</summary>
<p>Ces images sont sous copyright (...)</p>
</details></pre>
</div>
</div></td>
</tr>
<tr>
<th id="dfn"><code class="language-html5"><dfn></code></th>
<td>Représente le terme d'une définition, on l'utilise dans un paragraphe ou une liste de définitions. On peut utiliser cette balise conjointement avec <abbr>. Dans la même section, il est possible de créer un lien pointant sur cette définition, utile pour la création d'infobulle par exemple.
<div class="details">
<div class="summary"><a href="#a-dfn" rel="bookmark"><span>attributs</span></a></div>
<div id="a-dfn" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-dfn" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-dfn" class="pannel">
<pre>
<p>Le <dfn>SEO</dfn> est un ensemble de techniques pour référencer un site Web</p>
</pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="dir"><code class="language-html5"><dir></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="div"><code class="language-html5"><div></code></th>
<td>Balise sans valeur sémantique réelle, elle sert de conteneur pour une mise en forme en CSS. Cette balise doit être utilisée en dernier recours, lorsqu'aucune autre balise ne peut convenir.
<div class="details">
<div class="summary"><a href="#a-div" rel="bookmark"><span>attributs</span></a></div>
<div id="a-div" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="dl"><code class="language-html5"><dl></code></th>
<td>Pour une liste de définitions. Confusion possible : cette balise ne peut être utilisée pour créer des dialogues, les balises <p> restant appropriées.
<div class="details">
<div class="summary"><a href="#a-dl" rel="bookmark"><span>attributs</span></a></div>
<div id="a-dl" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="dt"><code class="language-html5"><dt></code></th>
<td> Pour déclarer une définition, s'utilise avec la balise <dl>.
<div class="details">
<div class="summary"><a href="#a-dt" rel="bookmark"><span>attributs</span></a></div>
<div id="a-dt" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="em"><code class="language-html5"><em></code></th>
<td>Utilisé dans un paragraphe pour mettre une partie de texte en emphase.
<div class="details">
<div class="summary"><a href="#a-em" rel="bookmark"><span>attributs</span></a></div>
<div id="a-em" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="embed"><code class="language-html5"><embed></code></th>
<td>Utilisé pour du contenu externe et interactif ou pour un plug-in.
<div class="details">
<div class="summary"><a href="#a-embed" rel="bookmark"><span>attributs</span></a></div>
<div id="a-embed" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>type</li>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-embed" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-embed" class="pannel">
<pre><embed src="flash_jeux_des_souris.swf" /></pre>
</div>
</div></td>
</tr>
<tr>
<th id="fieldset"><code class="language-html5"><fieldset></code></th>
<td>Pour regrouper des éléments d'un formulaire.
<div class="details">
<div class="summary"><a href="#a-fieldset" rel="bookmark"><span>attributs</span></a></div>
<div id="a-fieldset" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>disabled</li>
<li>form</li>
<li>name</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="figcaption"><code class="language-html5"><figcaption></code></th>
<td>Utilisée dans le conteneur <figure>, avant ou après le contenu, cette balise permet d'écrire une légende ou une description.
<div class="details">
<div class="summary"><a href="#a-figcaption" rel="bookmark"><span>attributs</span></a></div>
<div id="a-figcaption" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-figcaption" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-figcaption" class="pannel">
<pre><figure><br> <figcaption>Jijy, le chat de Stéphanie</figcaption><br> <img src="jiji.jpg" width="304" height="228" /><br></figure></pre>
</div>
</div></td>
</tr>
<tr>
<th id="figure"><code class="language-html5"><figure></code></th>
<td>Utilisée pour regrouper un ou plusieurs médias ( illustrations, diagrammes, exemples de code, photos...) attachés au document <strong>sans pour autant en suivre le flux</strong>. Les images s'y trouvant n'ont pas obligation d'être inséré dans une balise <p> et dans le cas d'une liste d'images, on peut omettre les listes à puce. On utilisera la balise figcaption pour décrire les médias utilisés. Confusion : cette balise ne doit être utilisée dès qu'il y a une image dans un article, on peut aussi la confondre avec la balise <aside>.
<div class="details">
<div class="summary"><a href="#a-figure" rel="bookmark"><span>attributs</span></a></div>
<div id="a-figure" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-code" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-code" class="pannel">
<pre><figure>
<p>Stéphanie a un chat qui s'appelle Jiji</p>
<img src="jiji.jpg" width="304" height="228" />
</figure></pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="font"><code class="language-html5"><font></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="footer"><code class="language-html5"><footer></code></th>
<td>Regroupe des informations de bas de page dans une section ou un article. Cette balise permet d'ajouter des liens de navigation sans utilisation de la balise <nav>.
<div class="details">
<div class="summary"><a href="#a-footer" rel="bookmark"><span>attributs</span></a></div>
<div id="a-footer" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-fte" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-fte" class="pannel">
<pre><section>
<article>
<p>Voici un article....</p>
</article>
<footer>
<p>L'ensemble de la section est écrit par le Directeur des ventes</p>
</footer>
</section></pre>
</div>
</div></td>
</tr>
<tr>
<th id="form"><code class="language-html5"><form></code></th>
<td>Pour un formulaire.
<div class="details">
<div class="summary"><a href="#a-form" rel="bookmark"><span>attributs</span></a></div>
<div id="a-form" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>accept-charset</li>
<li>action</li>
<li>autocomplete</li>
<li>enctype</li>
<li>method</li>
<li>name</li>
<li>novalidate</li>
<li>target</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="frame"><code class="language-html5"><frame></code></th>
<td>Non utilisé</td>
</tr>
<tr class="strip">
<th id="frameset"><code class="language-html5"><frameset></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="hn"><h1> à <h6></th>
<td>Utilisés pour la hiérarchisation des titres.
<div class="details">
<div class="summary"><a href="#a-h" rel="bookmark"><span>attributs</span></a></div>
<div id="a-h" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="head"><code class="language-html5"><head></code></th>
<td>Pour les informations d'en tête du document HTML.
<div class="details">
<div class="summary"><a href="#a-head" rel="bookmark"><span>attributs</span></a></div>
<div id="a-head" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="header"><code class="language-html5"><header></code></th>
<td>Pour l'entête d'une section <strong>et/ou</strong> d'une page, cette balise est utile pour une introduction <strong>et/ou</strong> des éléments de navigation. Cette balise peut-être utilisée dans la balise <section> et dans la balise <article>.
<div class="details">
<div class="summary"><a href="#a-header" rel="bookmark"><span>attributs</span></a></div>
<div id="a-header" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-header" rel="bookmark"><span>exemple</span></a></div>
<div id="x-header" class="pannel">
<pre><header>
<h1>Rapport des ventes</h1>
<p>Le rapport sera présenté aux membres du groupe</p>
</header> </pre>
Autre exemple :
<pre>
<header>
<h1>Rapport des ventes</h1>
<nav>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</header> </pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="hgroup"><code class="language-html5"><hgroup></code></th>
<td>Non utilisé - (Regroupe des titres de niveau Hn dans la balise <head> à noter : cette balise a été supprimée puis réintégrée puis re-supprimée).
<div class="details">
<div class="summary"><a href="#a-hgroup" rel="bookmark"><span>attributs</span></a></div>
<div id="a-hgroup" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="hr"><code class="language-html5"><hr></code></th>
<td>Permets de créer une ligne de séparation.
<div class="details">
<div class="summary"><a href="#a-hr" rel="bookmark"><span>attributs</span></a></div>
<div id="a-hr" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="html"><code class="language-html5"><html></code></th>
<td>Déclaration du document HTML. On lui rajoutera l'attribut lang pour déclarer la langue utilisée.
<div class="details">
<div class="summary"><a href="#a-html" rel="bookmark"><span>attributs</span></a></div>
<div id="a-html" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)</li>
<li>manifest</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="i"><code class="language-html5"><i></code></th>
<td>Utilisée dans un paragraphe pour indiquer qu'une partie du texte est différent du reste. Il ne faut pas utiliser cette balise lorsque <b>, <cite>,<dfn>,<em>,<q>,<small> ou <strong> peuvent être utilisées. Note : Certains analyseurs de site nous disent que cette balise est obsolète, ce qui est totalement faux.
<div class="details">
<div class="summary"><a href="#a-i" rel="bookmark"><span>attributs</span></a></div>
<div id="a-i" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="iframe"><code class="language-html5"><iframe></code></th>
<td>Pour créer une sous-fenêtre.
<div class="details">
<div class="summary"><a href="#a-iframe" rel="bookmark"><span>attributs</span></a></div>
<div id="a-iframe" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>srcdoc</li>
<li>name</li>
<li>sandbox</li>
<li>seamless</li>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="img"><code class="language-html5"><img></code></th>
<td>Pour déclarer une image.
<div class="details">
<div class="summary"><a href="#a-img" rel="bookmark"><span>attributs</span></a></div>
<div id="a-img" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>alt</li>
<li>src</li>
<li>usemap</li>
<li>ismap</li>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="input"><code class="language-html5"><input></code></th>
<td>Pour un champ de texte.
<div class="details">
<div class="summary"><a href="#a-input" rel="bookmark"><span>attributs</span></a></div>
<div id="a-input" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>accept</li>
<li>>alt</li>
<li>autocomplete</li>
<li>autofocus</li>
<li>checked</li>
<li>dirname</li>
<li>disabled</li>
<li>form</li>
<li>formaction</li>
<li>formenctype</li>
<li>formmethod</li>
<li>formnovalidate</li>
<li>formtarget</li>
<li>height</li>
<li>list</li>
<li>max</li>
<li>maxlength</li>
<li>min</li>
<li>multiple</li>
<li>name</li>
<li>pattern</li>
<li>placeholder</li>
<li>readonly</li>
<li>required</li>
<li>size</li>
<li>src</li>
<li>step</li>
<li>type</li>
<li>value</li>
<li>width</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="ins"><code class="language-html5"><ins></code></th>
<td>Pour insérer un nouveau texte dans un document révisé. On peut utiliser cette balise avec <del> qui permet d'indiquer qu'une portion de texte n'est plus valable.
<div class="details">
<div class="summary"><a href="#a-ins" rel="bookmark"><span>attributs</span></a></div>
<div id="a-ins" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>cite</li>
<li>datetime</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="keygen"><code class="language-html5"><keygen></code></th>
<td>L'élément keygen représente un contrôle de générateur de clé stockée dans "keystore local".
<div class="details">
<div class="summary"><a href="#a-keygen" rel="bookmark"><span>attributs</span></a></div>
<div id="a-keygen" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>autofocus</li>
<li>challenge</li>
<li>disabled</li>
<li>form</li>
<li>keytype</li>
<li>name</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="kbd"><code class="language-html5"><kbd></code></th>
<td>Lorsque le texte est utilisé pour définir des actions au clavier.
<div class="details">
<div class="summary"><a href="#a-kbd" rel="bookmark"><span>attributs</span></a></div>
<div id="a-kbd" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="label"><code class="language-html5"><label></code></th>
<td>Étiquette utilisée comme titre d'une commande.
<div class="details">
<div class="summary"><a href="#a-label" rel="bookmark"><span>attributs</span></a></div>
<div id="a-label" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>form</li>
<li>for</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="legend"><code class="language-html5"><legend></code></th>
<td>Titre du fieldset auquel il se rapporte.
<div class="details">
<div class="summary"><a href="#a-lg" rel="bookmark"><span>attributs</span></a></div>
<div id="a-lg" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="li"><code class="language-html5"><li></code></th>
<td>Item d'une liste ordonnée ou à puce.
<div class="details">
<div class="summary"><a href="#a-li" rel="bookmark"><span>attributs</span></a></div>
<div id="a-li" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>reversed</li>
<li>start</li>
<li>type</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="link"><code class="language-html5"><link></code></th>
<td>Permets de lier une ressource externe à la page HTML. Attention l'attribut "title" à une valeur sémantique différente.
<div class="details">
<div class="summary"><a href="#a-link" rel="bookmark"><span>attributs</span></a></div>
<div id="a-link" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>href</li>
<li>rel</li>
<li>media</li>
<li>hreflang</li>
<li>type</li>
<li>sizes</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<th id="main"><code class="language-html5"> <main></code></th>
<td> Pour déclarer "LE" contenu important d’une page HTML, cette balise ne peut donc être utilisée qu’une fois par page -> ce qui veut dire que le header principal ainsi que le footer principal sont des parties différentes. Les balises
<article>
,
<aside>
,
<footer>
,
<header>
ou
<nav>
ne peuvent pas contenir la balise
<main>, par contre, on peut mettre ces balises à l'intérieur de <main>, là, il n'y a pas de soucis.
<div class="details">
<div class="summary"><a href="#x-nmain" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-nmain" class="pannel">
<pre><!doctype html>
<html>
<head>
<title>Exemple de la balise MAIN</title>
</header>
<body>
<header
<h1>Mon site Web</h1>
</header>
<main>
<article>
<section>....</section>
<section>...</section>
</article>
</main>
<footer>...</footer>
</body>
</html></pre>
</div>
</div></td>
</tr>
<tr>
<th id="map"><code class="language-html5"><map></code></th>
<td>Utilisée pour créer une carte d'image avec des zones réactives. L'attribut "name" est obligatoirement requis.
<div class="details">
<div class="summary"><a href="#a-map" rel="bookmark"><span>attributs</span></a></div>
<div id="a-map" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>name</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="mark"><code class="language-html5"><mark></code></th>
<td>Pour marquer du texte, par exemple surligner un résultat de recherche. On stylisera cette balise en CSS.
<div class="details">
<div class="summary"><a href="#a-mark" rel="bookmark"><span>attributs</span></a></div>
<div id="a-mark" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="menu"><code class="language-html5"><menu></code></th>
<td>Pour une liste de commande. Confusion possible avec la balise <nav>.
<div class="details">
<div class="summary"><a href="#a-menu" rel="bookmark"><span>attributs</span></a></div>
<div id="a-menu" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>type</li>
<li>label</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="meta"><code class="language-html5"><meta></code></th>
<td>Permets d'ajouter des métas à la page HTML.
<div class="details">
<div class="summary"><a href="#a-meta" rel="bookmark"><span>attributs</span></a></div>
<div id="a-meta" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>name</li>
<li>http-equiv</li>
<li>content</li>
<li>charset</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="meter"><code class="language-html5"><meter></code></th>
<td>Pour les mesures.
<div class="details">
<div class="summary"><a href="#a-meter" rel="bookmark"><span>attributs</span></a></div>
<div id="a-meter" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>value</li>
<li>min</li>
<li>max</li>
<li>low</li>
<li>high</li>
<li>optimum</li>
<li>form</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="nav"><code class="language-html5"><nav></code></th>
<td>Pour regrouper des liens qu'ils soient internes à la page ou pour des pages liées. Il est recommandé, mais non obligatoire d'utiliser les listes à puce pour lister les liens.
<div class="details">
<div class="summary"><a href="#a-nav" rel="bookmark"><span>attributs</span></a></div>
<div id="a-nav" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-nav" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-nav" class="pannel">
<pre><nav>
<a href="index.php">Accueil</a>
<a href="blog.php">Le blog de l'entreprise</a>
<a href="contact.php">Nous contacter</a>
</nav></pre>
<strong>ou</strong>
<pre><nav>
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="blog.php">Le blog de l'entreprise</a></li>
<li><a href="contact.php">Nous contacter</a></li>
</ul>
</nav>
</pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="noframes"><code class="language-html5"><noframes></code></th>
<td>Non utilisé</td>
</tr>
<tr>
<th id="noscript"><code class="language-html5"><noscript></code></th>
<td>Utilisée pour indiquer un message dans le cas où JavaScript serait désactivé.
<div class="details">
<div class="summary"><a href="#a-noscript" rel="bookmark"><span>attributs</span></a></div>
<div id="a-noscript" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="object"><code class="language-html5"><object></code></th>
<td>Pour déclarer un objet.
<div class="details">
<div class="summary"><a href="#a-object" rel="bookmark"><span>attributs</span></a></div>
<div id="a-object" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>data</li>
<li>type</li>
<li>name</li>
<li>usemap</li>
<li>form</li>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="ol"><code class="language-html5"><ol></code></th>
<td>Utilisé pour les listes ordonnées.
<div class="details">
<div class="summary"><a href="#a-ol" rel="bookmark"><span>attributs</span></a></div>
<div id="a-ol" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>reversed</li>
<li>start</li>
<li>type</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="optgroup"><code class="language-html5"><optgroup></code></th>
<td>Pour grouper des informations dans une liste déroulante.
<div class="details">
<div class="summary"><a href="#a-fs" rel="bookmark"><span>attributs</span></a></div>
<div id="a-fs" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>disabled</li>
<li>label</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="option"><code class="language-html5"><option></code></th>
<td>Pour déclarer un item dans une liste déroulante. Peut-être utilisé comme <a href="http://www.w3.org/TR/html5/commands.html#using-the-option-element-to-define-a-command" rel="external" target="_blank">"commands"</a>.
<div class="details">
<div class="summary"><a href="#a-option" rel="bookmark"><span>attributs</span></a></div>
<div id="a-option" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>disabled</li>
<li>label</li>
<li>selected</li>
<li>value</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="output"><code class="language-html5"><output></code></th>
<td>Représente le résultat d'un calcul.
<div class="details">
<div class="summary"><a href="#a-output" rel="bookmark"><span>attributs</span></a></div>
<div id="aoutput" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>for</li>
<li>form</li>
<li>name</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="p"><code class="language-html5"><p></code></th>
<td>Définis un paragraphe contenant une ou plusieurs phrases. Cette balise ne doit pas être utilisée si une autre balise est mieux indiquée.
<div class="details">
<div class="summary"><a href="#a-p" rel="bookmark"><span>attributs</span></a></div>
<div id="a-p" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="param"><code class="language-html5"><param></code></th>
<td>Pour paramétrer un objet.
<div class="details">
<div class="summary"><a href="#a-param" rel="bookmark"><span>attributs</span></a></div>
<div id="a-param" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>name</li>
<li>value</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="pre"><code class="language-html5"><pre></code></th>
<td>Ecrire un texte préformaté. L'utilisation de la balise <p> n'est pas obligatoire. Peut-être lui même le conteneur de la balise <code>.
<div class="details">
<div class="summary"><a href="#a-pre" rel="bookmark"><span>attributs</span></a></div>
<div id="a-pre" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-pre" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-pre" class="pannel">
<pre>
<pre>
Le texte dans une balise "pre" est affiché avec une largeur fixe.
Les sauts de lignes et les espaces sont respectés.
Attention à ne pas mettre l'attribut "white-space:normal" dans la CSS, sinon, les sauts de lignes ne seront pas actifs.
</pre>
</pre>
</div>
</div></td>
</tr>
<tr>
<th id="progress"><code class="language-html5"><progress></code></th>
<td>Pour une barre de progression.
<div class="details">
<div class="summary"><a href="#a-progress" rel="bookmark"><span>attributs</span></a></div>
<div id="a-progress" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>value</li>
<li>max</li>
<li>form</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="q"><code class="language-html5"><q></code></th>
<td>Utilisée pour une citation courte provenant d'une ressource externe. Si l'on connait l'URL de la source de la citation, on pourra l'indiquer grâce à l'attribut "cite". Dans tous les autres cas, on utilise les guillemets sans balise spécifique. On peut aussi utiliser la balise <cite> pour citer un auteur. Confusion possible avec la balise <a href="#blockquote" title="Voir la description de la balise Blockquote"><blockquote></a>.
<div class="details">
<div class="summary"><a href="#a-q" rel="bookmark"><span>attributs</span></a></div>
<div id="a-q" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>cite</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="details">
<div class="summary"><a href="#x-q" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-q" class="pannel">
<pre><p>Dans la page du rapport trimestriel <cite>Augmenter vos ventes</cite>,
on nous dit que <q cite="http://www.rapport-x/x.html>pour être efficace,
nous devons regrouper nos compétences</q>.</p></pre>
</div>
</div></td>
</tr>
<tr>
<th id="rp"><code class="language-html5"><rp></code></th>
<td> Utilisé en annotations ruby pour définir ce qui est à montrer aux navigateurs ne supportant les éléments ruby.
<div class="details">
<div class="summary"><a href="#a-rp" rel="bookmark"><span>attributs</span></a></div>
<div id="a-rp" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="rt"><code class="language-html5"><rt></code></th>
<td>Pour expliquer des annotations en Ruby.
<div class="details">
<div class="summary"><a href="#a-rt" rel="bookmark"><span>attributs</span></a></div>
<div id="a-rt" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="ruby"><code class="language-html5"><ruby></code></th>
<td>Utilisé pour des annotations en Ruby.
<div class="details">
<div class="summary"><a href="#a-ruby" rel="bookmark"><span>attributs</span></a></div>
<div id="a-ruby" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="s"><code class="language-html5"><s></code></th>
<td>Utilisé pour identifier une partie de texte qui n'est pas correct ou non pertinent. Confusion possible avec la balise <del>qui permet d'indiquer qu'un texte doit être remplacé ou supprimé.
<div class="details">
<div class="summary"><a href="#a-s" rel="bookmark"><span>attributs</span></a></div>
<div id="a-s" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="samp"><code class="language-html5"><samp></code></th>
<td>Utilisée dans un paragraphe pour écrire un échantillon de code. Confusion possible avec la balise <code>.
<div class="details">
<div class="summary"><a href="#a-samp" rel="bookmark"><span>attributs</span></a></div>
<div id="a-samp" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="script"><code class="language-html5"><script></code></th>
<td>Pour ajouter un script internet ou externe.
<div class="details">
<div class="summary"><a href="#a-sc" rel="bookmark"><span>attributs</span></a></div>
<div id="a-sc" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>async</li>
<li>defer</li>
<li>type</li>
<li>charset</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="section"><code class="language-html5"><section></code></th>
<td>Utilisée pour regrouper des éléments différents, mais partageant la même thématique Cette balise est le plus souvent utilisé avec un header.
<div class="details">
<div class="summary"><a href="#a-section" rel="bookmark"><span>attributs</span></a></div>
<div id="a-section" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="select"><code class="language-html5"><select></code></th>
<td>Pour une liste déroulante.
<div class="details">
<div class="summary"><a href="#a-select" rel="bookmark"><span>attributs</span></a></div>
<div id="a-select" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>autofocus</li>
<li>disabled</li>
<li>form</li>
<li>multiple</li>
<li>name</li>
<li>required</li>
<li>size</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="small"><code class="language-html5"><small></code></th>
<td><p>(Attention la balise a été redéfinie, elle ne sert plus à minimiser un texte). <br>
La balise small est utilisée comme contenu relatif mais non essentiel. On utilisera pour déclarer un copyright, des disclaimers, des mises en garde... </p>
<div class="details">
<div class="summary"><a href="#a-small" rel="bookmark"><span>attributs</span></a></div>
<div id="a-small" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="source"><code class="language-html5"><source></code></th>
<td>Utilisée dans les balises <video> et <audio> pour indiquer l'url et le type des médias.
<div class="details">
<div class="summary"><a href="#a-source" rel="bookmark"><span>attributs</span></a></div>
<div id="a-source" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>type</li>
<li>media</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="span"><code class="language-html5"><span></code></th>
<td>Utilisée pour mettre en style une portion de texte qui se différencie des autres. Cette balise ne doit pas être utilisée si une autre balise de formatage de texte convient mieux.
<div class="details">
<div class="summary"><a href="#a-span" rel="bookmark"><span>attributs</span></a></div>
<div id="a-span" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="strike" class="strip"><code class="language-html5"><strike></code></th>
<td>Non utilisé, la balise del remplace cette balise.</td>
</tr>
<tr>
<th id="strong"><code class="language-html5"><strong></code></th>
<td>Utilisé dans un paragraphe pour mettre un texte en gras.
<div class="details">
<div class="summary"><a href="#a-strong" rel="bookmark"><span>attributs</span></a></div>
<div id="a-strong" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="style"><code class="language-html5"><style></code></th>
<td>Permets de définir un style dans le document HTML. Attention, l'attribut title à une valeur sémantique différente pour cette balise.
<div class="details">
<div class="summary"><a href="#a-style" rel="bookmark"><span>attributs</span></a></div>
<div id="a-style" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>media</li>
<li>type</li>
<li>scoped</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="sub"><code class="language-html5"><sub></code></th>
<td>Déclarer un indice : Petit caractère placé en bas et à droite d'un autre caractère.
<div class="details">
<div class="summary"><a href="#a-sub" rel="bookmark"><span>attributs</span></a></div>
<div id="a-sub" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="summary"><code class="language-html5"><summary></code></th>
<td>Généralement utilisé à l'intérieur du conteneur <detail>, il permet de décrire le sommaire, la légende ou le titre d'un élément.
<div class="details">
<div class="summary"><a href="#a-summary" rel="bookmark"><span>attributs</span></a></div>
<div id="a-summary" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="sup"><code class="language-html5"><sup></code></th>
<td>Déclarer un exposant : petit caractère placé en haut et à droite d'un autre caractère.
<div class="details">
<div class="summary"><a href="#a-sup" rel="bookmark"><span>attributs</span></a></div>
<div id="a-sup" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="table"><code class="language-html5"><table></code></th>
<td>Pour un tableau. <strong>Note :</strong> En HTML5, l'attribut <strong>summary</strong> utilisé en accessibilité n'est plus valide et ne doit pas être utilisé : la balise <caption> devient indispensable.
<div class="details">
<div class="summary"><a href="#uto" rel="bookmark"><span>attributs</span></a></div>
<div id="uto" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>border</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="tbody"><code class="language-html5"><tbody></code></th>
<td>Utilisé pour le corps d'un tableau.
<div class="details">
<div class="summary"><a href="#a-tbody" rel="bookmark"><span>attributs</span></a></div>
<div id="a-tbody" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="td"><code class="language-html5"><td></code></th>
<td>Pour déclarer une cellule dans un tableau.
<div class="details">
<div class="summary"><a href="#a-td" rel="bookmark"><span>attributs</span></a></div>
<div id="a-td" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>colspan</li>
<li>rowspan</li>
<li>headers</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="textarea"><code class="language-html5"><textarea></code></th>
<td>Pour a champ de saisi.
<div class="details">
<div class="summary"><a href="#a-textarea" rel="bookmark"><span>attributs</span></a></div>
<div id="a-textarea" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>autofocus</li>
<li>cols</li>
<li>dirname</li>
<li>disabled</li>
<li>form</li>
<li>maxlength</li>
<li>name</li>
<li>placeholder</li>
<li>readonly</li>
<li>required</li>
<li>rows</li>
<li>wrap</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="tfoot"><code class="language-html5"><tfoot></code></th>
<td>Utilisé pour le pied de page d'un tableau.
<div class="details">
<div class="summary"><a href="#a-tfoot" rel="bookmark"><span>attributs</span></a></div>
<div id="a-tfoot" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="th"><code class="language-html5"><th></code></th>
<td>Pour déclarer une cellule dans l'entête d'un tableau.
<div class="details">
<div class="summary"><a href="#a-th" rel="bookmark"><span>attributs</span></a></div>
<div id="a-th" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>colspan</li>
<li>rowspan</li>
<li>headers</li>
<li>scope</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="thead"><code class="language-html5"><thead></code></th>
<td>Utilisé pour l'entête d'un tableau.
<div class="details">
<div class="summary"><a href="#a-thead" rel="bookmark"><span>attributs</span></a></div>
<div id="a-thead" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="time"><code class="language-html5"><time></code></th>
<td>Pour déclarer une date ou une heure.
<div class="details">
<div class="summary"><a href="#a-time" rel="bookmark"><span>attributs</span></a></div>
<div id="a-time" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>datetime</li>
<li>pubdate</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="title"><code class="language-html5"><title></code></th>
<td>Pour le titre de la page HTML en cours de lecture.
<div class="details">
<div class="summary"><a href="#a-title" rel="bookmark"><span>attributs</span></a></div>
<div id="a-title" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="tr"><code class="language-html5"><tr></code></th>
<td>Pour déclarer un champ dans un tableau.
<div class="details">
<div class="summary"><a href="#a-tr" rel="bookmark"><span>attributs</span></a></div>
<div id="a-tr" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="track"><code class="language-html5"><track></code></th>
<td>Barre pour indiquer une portion de temps.
<div class="details">
<div class="summary"><a href="#a-track" rel="bookmark"><span>attributs</span></a></div>
<div id="a-track" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>kind</li>
<li>src</li>
<li>srclang</li>
<li>label</li>
<li>default</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="tt"><code class="language-html5"><tt></code></th>
<td>Non utilisé</td>
</tr>
<tr class="strip">
<th id="u"><code class="language-html5"><u></code></th>
<td>Non utilisé, cette balise créée une confusion avec la balise <code class="language-html5"><a></code> au niveau des styles</td>
</tr>
<tr id="ul">
<th><code class="language-html5"><ul></code></th>
<td>Pour créer une liste à puces.
<div class="details">
<div class="summary"><a href="#a-ul" rel="bookmark"><span>attributs</span></a></div>
<div id="a-ul" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="var"><code class="language-html5"><var></code></th>
<td>Pour déclarer une variable.
<div class="details">
<div class="summary"><a href="#a-var" rel="bookmark"><span>attributs</span></a></div>
<div id="a-var" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div></td>
</tr>
<tr>
<th id="video"><code class="language-html5"><video></code></th>
<td>Pour lire une video.
<div class="details">
<div class="summary"><a href="#a-video" rel="bookmark"><span>attributs</span></a></div>
<div id="a-video" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> <ul class="list-unstyled">
<li>Attribut(s) spécifique(s)
<ul class="list-unstyled">
<li>src</li>
<li>poster</li>
<li>preload</li>
<li>autoplay</li>
<li>mediagroup</li>
<li>loop</li>
<li>muted</li>
<li>controls</li>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<th id="wbr"><code class="language-html5"><wbr></code></th>
<td>Balise <strong>non fermante</strong> à utiliser à l'intérieur d'un mot long pour forcer un retour à la ligne.
<div class="details">
<div class="summary"><a href="#a-wbr" rel="bookmark"><span>attributs</span></a></div>
<div id="a-wbr" class="pannel">
<ul class="global-attributs">
<li>accesskey</li>
<li>class</li>
<li>contenteditable</li>
<li>contextmenu</li>
<li>dir</li>
<li>draggable</li>
<li>dropzone</li>
<li>hidden</li>
<li>id</li>
<li>lang</li>
<li>spellcheck</li>
<li>style</li>
<li>tabindex</li>
<li>title</li>
<li>translate</li>
</ul> </div>
</div>
<div class="details">
<div class="summary"><a href="#x-wbr" rel="bookmark" class="exemple"><span>exemple</span></a></div>
<div id="x-wbr" class="pannel">
<pre><p><br> Yoochun a fait une faute d'orthographe sur le mot anti<wbr>trust, son ami Junsu l'a corrigé.<br></p></pre>
</div>
</div></td>
</tr>
<tr class="strip">
<th id="xmp"><code class="language-html5"><xmp></code></th>
<td>Non utilisé</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- / end COL RIGHT -->
<!-- start col right -->
<div class="tpl-col-right">
<div class="inside">
<p><a href="https://jaetheme.com/jacques-martinet/"> <img src="https://jaetheme.com/wp-content/themes/paris/dist/img/webdesigner-integrateur-freelance.jpg" width="256" height="326" alt="Webdesign + intégration HTML"/> </a> </p>
<p><a href="https://jaetheme.com/balises-html5/">
<img src="https://jaetheme.com/wp-content/themes/paris/dist/img/liste-balises-HTML5.jpg" width="256" height="97" alt="Liste complète des balises HTML5"/>
</a></p><p>
<a href="https://jaetheme.com/blog/flexbox/">
<img src="https://jaetheme.com/wp-content/themes/paris/dist/img/flexbox-aide-memoire.jpg" width="256" height="98" alt="Infographie : Flexbox Aide mémoire visuel des propriétés CSS"/></a></p></div>
</div>
<!-- end COL right -->
</div>
<!-- UI designer Freelance Jumbotron -->
<aside class="jumbotron-print text-center nomarginbottom">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>UI designer freelance<span class="hidden-xs"> & Intégrateur HTML5/CSS3</span></h2>
<ul>
<li>Wireframing</li>
<li>webdesign</li>
<li>intégration HTML5/CSS3</li>
<li>illustrations</li>
<li>infographie</li>
<li>print</li>
<li>bannières Web</li>
<li>bannières publicitaires</li>
</ul>
<p class="p-print"><a href="https://jaetheme.com/Jacques-Martinet.pdf" target="_blank" title="Télécharger mon CV au format PDF" class="btn-jumbotron"> Télécharger mon CV !</a> </p>
</div>
</div>
</div>
</aside>
<!-- UI designer Freelance Jumbotron -->
<!-- / BODY -->
<!-- FOOTER -->
<footer id="ft">
<div class="bd">
<div class="container"> <a href="#hd" id="gototop"><img src="https://jaetheme.com/wp-content/themes/paris/dist/img/top.svg" alt="" width="55" height="30" /></a>
<div class="row mod-social">
<div class="col-sm-12 col-md-4 mod-contact">
<div class="" data-anime="true" data-scroll-reveal="move 30px enter bottom over 1s">
<div class="inner">
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 mod-social text-center">
<div class="block-melinker" data-anime="true" data-scroll-reveal="enter bottom over 1s">
<div class="inner">
<h3>Suivez mon actualité...</h3>
<ul class="list-social">
<li><a href="https://www.linkedin.com/in/jaetheme" title="Retrouver mon profil sur LinkedIn [nouvelle fenêtre]" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41">
<path class="st0" d="M22.1 19.2L22.1 19.2C22.1 19.1 22.1 19.2 22.1 19.2L22.1 19.2z"/>
<path class="antracite" d="M0 0v41h41V0H0zM32.5 31.4h-5.1v-8.2c0-2.1-0.7-3.4-2.5-3.4 -1.4 0-2.2 0.9-2.6 1.8 -0.1 0.3-0.2 0.8-0.2 1.2v8.5h-5.1c0.1-13.8 0-15.3 0-15.3h5.1v2.2c0.7-1.1 1.9-2.5 4.5-2.5 3.3 0 5.8 2.2 5.8 6.9V31.4zM11.8 8.8c1.7 0 2.8 1.1 2.8 2.6 0 1.5-1.1 2.6-2.9 2.6h0c-1.7 0-2.8-1.2-2.8-2.6C8.9 10 10 8.8 11.8 8.8zM9.2 16.2h5.1v15.3H9.2V16.2z"/>
</svg>
</a> </li>
<!-- <li><a href="https://www.behance.net/jaetheme" title="Retrouver mon profil sur Behance d'Adobe [nouvelle fenêtre]" rel="publisher" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 40.5 40.5">
<path class="antracite" d="M0 0v40.5h40.5V0H0zM35.4 23.5h-9.7c0 2.2 1.1 3.4 3.3 3.4 1.1 0 2.6-0.6 2.9-1.8h3.3c-1 3.1-3.1 4.5-6.3 4.5 -4.3 0-6.9-2.9-6.9-7.1 0-4.1 2.8-7.2 6.9-7.2 4.2 0 6.6 3.3 6.6 7.3C35.4 23.1 35.4 23.3 35.4 23.5zM5.1 10.7h8.8c3.2 0 6 0.9 6 4.6 0 1.9-0.9 3.1-2.5 3.9 2.3 0.7 3.4 2.4 3.4 4.7 0 3.8-3.2 5.4-6.6 5.4H5.1V10.7z"/>
<path class="antracite" d="M15.9 16c0-1.7-1.4-2.1-2.8-2.1H9.2v4.4h4.2C14.8 18.3 15.9 17.6 15.9 16z"/>
<path class="antracite" d="M16.6 23.7c0-1.9-1.1-2.7-2.9-2.7H9.2v5.1h4.4C15.2 26.2 16.6 25.6 16.6 23.7z"/>
<path class="antracite" d="M28.7 18.3c-1.8 0-3 1.1-3.1 2.9h6C31.5 19.4 30.6 18.3 28.7 18.3z"/>
</svg>
</a> </li>-->
<li><a href="https://twitter.com/jaetheme/" title="Retrouver mon profil sur Twitter [nouvelle fenêtre]" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 40.5 40.5">
<path class="antracite" d="M0 0v40.5h40.5V0H0zM30.8 16.7c0 6.9-5.2 14.8-14.8 14.8 -2.9 0-5.7-0.9-7.9-2.3 0.4 0 0.8 0.1 1.2 0.1 2.4 0 4.7-0.8 6.4-2.2 -2.3 0-4.2-1.6-4.8-3.6 0.3 0 0.6 0.1 1 0.1 0.5 0 0.8-0.1 1.3-0.2 -2.4-0.5-4.3-2.6-4.3-5.1 0 0 0 0 0 0 0.8 0.4 1.6 0.6 2.5 0.6 -1.4-0.9-2.2-2.5-2.2-4.3 0-0.9 0.3-1.9 0.7-2.6 2.6 3.2 6.4 5.2 10.7 5.4 -0.1-0.4-0.1-0.8-0.1-1.2 0-2.9 2.3-5.2 5.2-5.2 1.5 0 2.8 0.6 3.8 1.6 1.2-0.2 2.3-0.7 3.3-1.3 -0.4 1.2-1.2 2.2-2.3 2.9 1.1-0.1 2-0.4 3-0.8 -0.7 1.1-1.6 2-2.6 2.7C30.8 16.2 30.8 16.5 30.8 16.7z"/>
</svg>
</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 mod-tel">
<div class="block-melinker" data-anime="true" data-scroll-reveal="move 30px enter bottom over 1s reset">
<div class="inner">
<div class="list-localisation text-center">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="coping text-center">
<p>© Jacques MARTINET <br class="visible-xs-block">
2019 tous droits réservés<br class="visible-xs-block">
<span> - </span>UI designer, illustrateur et graphiste Web <br class="visible-block-xs">
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- EN
<footer id="ft">
<div class="bd">
<div class="container"> <a href="#hd" id="gototop"><img src="/dist/img/top.svg" alt="" width="55" height="30" /></a>
<div class="row">
<div class="col-sm-12">
<div data-anime="true" data-scroll-reveal="move 30px enter bottom over 1s reset">
<div class="inner">
<p class="p-copy-en"> © Jacques MARTINET 2019 <span>-</span> <br class="visible-xs-block">
UI designer and illustrator
<p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
-->
<!-- / FOOTER -->
<script type='text/javascript' src='https://jaetheme.com/wp-includes/js/wp-embed.min.js?ver=63875b80f2068cfe9dde8a68f921999d'></script>
<!-- SCRIPTS -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1003485-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-1003485-1');
</script>
</body></html>Extension
WikiEditor
Télécharger l'extension
cd /home wget https://extdist.wmflabs.org/dist/extensions/WikiEditor-REL1_34-57eb9ad.tar.gz tar -xzf WikiEditor-REL1_34-57eb9ad.tar.gz -C /var/www/mediawiki/extensions rm WikiEditor-REL1_34-57eb9ad.tar.gz
Installation
nano /var/www/mediawiki/LocalSettings.php
Ajouter
wfLoadExtension( 'WikiEditor' );
SyntaxHighlight
Télécharger l'extension
cd /home wget https://extdist.wmflabs.org/dist/extensions/SyntaxHighlight_GeSHi-REL1_34-d45d04f.tar.gz tar -xzf SyntaxHighlight_GeSHi-REL1_34-d45d04f.tar.gz -C /var/www/mediawiki/extensions rm SyntaxHighlight_GeSHi-REL1_34-d45d04f.tar.gz chmod a+x /var/www/mediawiki/extensions/SyntaxHighlight_GeSHi/pygments/pygmentize
Installation
nano /var/www/mediawiki/LocalSettings.php
Ajouter
wfLoadExtension ( 'SyntaxHighlight_GeSHi' );
Syntaxe
Ajouter du code
pour ajouter du code il est possible de commencer par un espace, ou pour formater un bloc complet d'ajouter après l'espace la balise <nowiki> et d'ajouter </nowiki> à la fin de celui ci Exemple
Test avec un espace
<nowiki>La methode avec les balises nowiki</nowiki>
ce qui donne
La methode avec les balises nowiki
Ajouter une image
Télécharger l'image sur le serveur https://wiki.slemoal.fr/index.php/Spécial:Téléverser
si vous avez cet erreur:
Désolé, l’import de fichiers est désactivé.
Commencer par touver le fichier php.ini
find / -name php.ini
l'editer
nano /etc/php/7.4/apache2/php.ini
Attribuer les droits au dossier images
sudo chown -R www-data:www-data /var/www/mediawiki/images/
restreinte l’accès au public
éditer
nano /etc/apache2/sites-enabled/mediawiki.conf
Ajouter
<Directory /var/www/mediawiki/images>
Options -Indexes
</Directory>
Activer la fonction
nano /var/www/mediawiki/LocalSettings.php
$wgEnableUploads = true;
Redémarrer apache
service apache2 restart
Guide du site officiel
Consult the User's Guide
for information on using the wiki software.
Getting started
