Introduction au HTML 5

Articles-fr / Par

De nombreux d’entre vous en on probablement entendu parlé, le HTML est un language sémantique vous permettant de visualiser une page web. La structure et le type de balises que vous utiliserez influenceront le résultat sur votre navigateur. Ces fichiers sont généralement récupérés par votre serveur, cependant, vous pouvez aussi facilement les émuler localement sur votre navigateur. Pour davantage de style et ainsi développer votre charte graphique, il se combine au CSS.

Ressources complémentaires : OpenClassrooms | CodeAcademy | Wikipédia

Pré-requis

Aucun pré-requis n’est nécessaire. Documentez-vous davantages si besoin, après un certain temps et de la pratique, le concept vous semblera familier.

Fichier HTML 5 type

Découvrez les balises types utilisés en HTML 5 ainsi que sa structure globale. Ceci est bien évidemment un fichier brut qui peut intégrer davantages de librairies (CSS, JS, jQuery, PHP, …).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Content</title>
  </head>
  <body>
    <nav></nav>
    <section>
      <article>
        <h1>Content</h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <p></p>
        <span></span>
        <ul>
          <li></li>
        </ul>
        <strong></strong>
        <a href="#"></a>
        <button></button>
        <img src="#" src="#" title="" alt=""/>
      </article>
      <div></div>
    </section>
    <footer></footer>
  <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img" rel="noopener"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody&&notification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; display: flex; justify-content: center; width: 100%; }} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {min-height: 454px; display: flex; flex-direction: column; justify-content: center; z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Go for it</button>',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #040713; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-left-color: #040713;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Black Friday Prices",h1Tag.setAttribute("style",'color: white; font-family: "Roboto", sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase;');var h2Tag=document.createElement("H2");h2Tag.innerHTML="Get 90% Off!",h2Tag.setAttribute("style",'color: white; margin: 10px 0 15px 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 700; line-height: 1;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Get Web Hosting for $0.99/month + SSL Certificate for FREE!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 15px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/bf-2020-wp-inject-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}</script></body>
</html>

Les bonnes pratiques pour votre référencement naturel

Lors de la conceptualisation et l’écriture du contenu de votre projet, pensez tout d’abord à zoner vos éléments. Ces derniers seront retranscrits par la <« nav »>, les <« sections »> et les <« articles »> Vous pourrez alors plus facilement développer vos sous parties, hiérarchiser votre contenu (<« h1″> , <« p »>, <img title= » » …) et incorporer vos lien externes (<« a » href= »# »>).

La manière dont vous souhaitez mettre en valeur visuellement for contenu graphique et textuel doit se retranscrire dans la sémantique de votre HTML. En gardant vos principaux mots clefs en tête et l’organisation du contenu, vous obtiendrez un meilleur référencement.

Les algorithmes de Google (robots) sont extrêmement complexes et sont parfois compliqué à interpréter. Cependant, en tant que partenaire de la WW3C, Google conseille ce type de structure qui vous aidera à booster votre score par rapport à d’autres compétiteurs.

Le service web Sure Oak vous permettra d’avoir une première impression sur les points de référencement indispensable à garder à l’esprit. Cité précédemment, le WW3C validator vous permettra aussi d’en savoir d’avantage. Sachez tout de même que si vous ne couvrez pas l’ensemble des critères listés, il y a fort heureusement d’autres paramètres qui influencent grandement votre score : le trafic, indexation des pages, backlinks, la vitesse du serveur, réseaux sociaux ou même un ajout « astucieux » de vos principaux mots clefs.

Related Posts