Afla totul despre HTML in cateva minute

Ce este HTML

HTML, sau Hypertext Markup Language, este un limbaj de programare pentru web care definește structura paginilor web.
Este unul dintre elementele de bază ale fiecărui site web, așa că este crucial să înveți dacă vrei să ai o carieră în dezvoltarea web.

Ce este HTML ?

Pentru a înțelege „HTML” din față în spate, să ne uităm la fiecare cuvânt care alcătuiește abrevierea:

Hipertext : text (adesea cu încorporare, cum ar fi imagini, de asemenea) care este organizat pentru a conecta elementele conexe

Marcare : un ghid de stil pentru compunerea oricărui lucru care urmează să fie tipărit în format hârtie sau copiere

Limbă : un limbaj pe care un sistem informatic îl înțelege și îl folosește pentru a interpreta comenzi.

HTML determină structura paginilor web. Numai această structură nu este suficientă pentru a face o pagină web să arate bine și interactiv. Deci, veți folosi tehnologii asistate, cum ar fi CSS și JavaScript, pentru a vă face HTML frumos și, respectiv, pentru a adăuga interactivitate.

În acest caz, îmi place să defalc cele trei tehnologii – HTML, CSS și JavaScript – astfel: sunt ca un corp uman.

  • HTML este scheletul,
  • CSS este pielea,
  • iar JavaScript este sistemul circulator, digestiv și respirator care aduce la viață structura și pielea.

De asemenea, puteți privi HTML, CSS și JavaScript în acest fel: HTML este structura unei case, CSS este decorul interior și exterior, iar JavaScript este sistemul de electricitate, apă și multe alte caracteristici funcționale care fac casa locuibilă.

Despre etichetele HTML

Deoarece HTML definește marcajul pentru o anumită pagină web, veți dori ca textul, imaginile sau alte încorporare să apară în anumite moduri.

De exemplu, este posibil să doriți ca un text să fie mare, altul să fie mic, iar unele să fie aldine, cursive sau sub formă de marcatori.

HTML are „etichete” care vă permit să faceți acest lucru. Deci, există etichete pentru a crea titluri, paragrafe, cuvinte cu caractere aldine, cuvinte cu caractere italice și multe altele.

Imaginea de mai jos descrie anatomia unei etichete HTML:

Cateva elemente din limbajul HTML

Un element este format din eticheta de deschidere, un caracter, conținut și o etichetă de închidere. Unele elemente sunt goale – adică nu au o etichetă de închidere, ci au o sursă sau un link către conținut pe care doriți să îl încorporați pe pagina web.

Un exemplu de element gol este <img>, pe care îl utilizați pentru a încorpora imagini într-o pagină web.

Elementele HTML sunt adesea folosite interschimbabil cu etichetele, dar există o mică diferență între cele două. Un element este o combinație a etichetei de deschidere și de închidere și apoi a conținutului dintre ele.

Despre atributele HTML

Etichetele HTML preiau, de asemenea, ceea ce se numesc atribute. Aceste atribute sunt plasate în eticheta de deschidere și variază de la stil și id-uri până la clase. Ele preiau valori, care transmit mai multe informații despre element și vă ajută să faceți lucruri precum stilarea și manipularea cu JavaScript.

În infograficul de mai jos, eticheta de deschidere conține un class atribut cu valoarea “text”. Acesta poate fi folosit pentru a stila elementul sau pentru a-l selecta cu JavaScript pentru interactivitate.

Iată anatomia unei pagini HTML de bază:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Page content such as text and images goes in here-->
  </body>
</html>

Să ne uităm la fragmentele importante de cod aici:

<!Doctype html>: Specifică faptul că folosim HTML5 în acest cod. Înainte de introducerea HTML5, trebuia să precizați în mod explicit ce versiune de HTML codificați cu <!Doctype>eticheta. De exemplu, HTML4.0, 3.2 și așa mai departe. Dar acum nu mai avem nevoie. Când „html” este scris în cod, browserul presupune automat că codificați în HTML5.

<html></html>: rădăcina sau elementul de nivel superior al fiecărui document HTML. Fiecare alt element trebuie să fie învelit în el.

<head></head>: una dintre cele mai importante părți ale documentului HTML. Crawlerele web caută în interiorul etichetelor head pentru a obține informații importante despre pagină. Conține informații precum titlul paginii, foi de stil, meta informații pentru SEO și multe altele.

<meta />: acesta este un element gol care transmite metainformații despre pagină. Astfel de informații pot include autorul, ce tip de codificare folosește (aproape întotdeauna UTF-8), capacitatea de răspuns, compatibilitatea și multe altele. Crawlerele web se uită întotdeauna la metaeticheta pentru a obține informații despre pagina web, care va juca un rol crucial în SEO.

<title></title>: aceasta definește titlul paginii web. Este întotdeauna afișat în fila browser.

<body></body>: tot conținutul documentului HTML se află în interiorul etichetei body. Nu poate exista decât o singură <body>etichetă pe întreaga pagină.

Ce este HTML-ul semantic?

HTML semantic înseamnă că etichetele dvs. HTML transmit sensul real pentru care sunt folosite.

Semantica a fost o parte integrantă a HTML încă de la începuturile sale la începutul anilor ’90. Dar nu a câștigat o relevanță deosebită până la sfârșitul anilor 90, când CSS a început să funcționeze în majoritatea browserelor.

Cu HTML semantic, etichetele neutre din punct de vedere semantic, cum ar fi <div>și , <span>sunt descurajate, deoarece etichetele mai descriptive din punct de vedere semantic, cum ar fi <header><nav><main><section><footer>și <article> pot face același lucru pe care îl fac.

Un avantaj vizibil al utilizării etichetelor semantice este că crawlerele web pot indexa cu ușurință pagina web sau site-ul web, îmbunătățind în schimb SEO.

În plus, un site web care utilizează semantică devine mai informativ, adaptabil și accesibil celor care folosesc cititoare de ecran pentru a accesa site-uri web.

Ce fac etichetele semantice importante

Să ne uităm la unele dintre cele mai frecvent utilizate etichete HTML semantice:

<header><header>Elementul definește secțiunea introductivă a unei pagini web. Conține elemente precum sigla, navigarea, comutatorul de teme și bara de căutare.

<nav><nav>elementul specifică elementele de navigare ale paginii, cum ar fi acasă, contact, despre, întrebări frecvente și așa mai departe.

<main><main>elementul este tratat în mod convențional ca descendentul imediat al etichetei. Conține secțiunile principale ale documentului HTML, în afară de <header>și <footer>. În mod ideal, ar trebui să existe doar unul dintre acestea în întregul document HTML.

<section><section>elementul definește o anumită secțiune a paginii web. Aceasta poate fi secțiunea de prezentare, secțiunea despre, secțiunea de contact sau altele. Puteți utiliza numeroase secțiuni într-un singur document HTML.

<article><article>elementul reprezintă o anumită parte a unei pagini web care transmite anumite informații. Astfel de informații ar putea fi o combinație de text, imagini, videoclipuri și încorporare. Priviți acest element ca pe o postare de blog independentă pe o pagină care conține fragmente despre alte postări de blog.

<aside>: După cum sugerează și numele, aceasta reprezintă o bară laterală pe o pagină web. Este de obicei o parte a paginii web care nu are legătură directă cu conținutul principal.

<footer><footer>elementul găzduiește elemente precum linkuri rapide, informații despre drepturile de autor sau orice alte date legate de întregul site web sau pagină web.

Rețineți că, deoarece elementele semantice transmit semnificație reală și ceea ce face de fapt un anumit conținut (cum ar fi navpentru navigare, asidepentru o bară laterală și așa mai departe), aceste elemente nu sunt poziționate automat acolo unde ar trebui să fie. Tot trebuie să faci asta cu CSS.

Un document HTML semantic super simplu arată astfel:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

Concluzie

Sper că acest articol v-a ajutat să învățați elementele de bază ale HTML și ce face acesta. Acum puteți începe să învățați tehnologii mai avansate, cum ar fi CSS și JavaScript, apoi puteți începe să vă formați o carieră solidă în dezvoltarea web.

Stefan Mirea