Podstawowe znaczniki HTML – poradnik 2023

Podstawowe znaczniki HTML – poradnik 2023


  • Udostępnij na Pinterest

Co to jest język HTML?

HTML to język znaczników używany do tworzenia stron internetowych. Znaczniki HTML pozwalają na strukturyzację i formatowanie treści, takich jak tekst, obrazy i linki, oraz dodawanie interaktywnych elementów, takich jak formularze. Przeglądarki internetowe interpretują kod HTML i wyświetlają stronę internetową zgodnie z określonymi przez nie regułami.

Co to jest znacznik HTML lub tag HTML?

Znacznik HTML to element składniowy języka HTML, który umożliwia definiowanie i formatowanie zawartości strony internetowej. Każdy znacznik HTML zaczyna się od znaku „<” i kończy znakiem „>”. Znacznik zamykający ma dodatkowo ukośnik przed nazwą, np. „</nazwa_znacznika>”. Pomiędzy znacznikami umieszcza się zawartość, która ma być wyświetlana na stronie internetowej. Na przykład, znacznik <p> oznacza akapit, a zawartość umieszczona między znacznikami <p> i </p> będzie wyświetlana jako tekst w akapicie. Istnieje wiele różnych znaczników HTML, które pozwalają na definiowanie tekstu, obrazów, linków, formularzy i innych elementów strony internetowej.

Atrybuty znaczników HTML

Atrybuty znaczników HTML to parametry, które określają dodatkowe informacje o danym elemencie HTML. Atrybuty zawsze umieszcza się wewnątrz znacznika i zaczyna się od nazwy atrybutu, po której następuje znak równości „=” oraz wartość atrybutu umieszczona w cudzysłowie. Przykładowo, atrybut „src” w znaczniku <img> określa źródło obrazka, a atrybut „href” w znaczniku <a> określa adres URL, do którego ma prowadzić link. Atrybuty mogą również służyć do określania stylów CSS dla danego elementu, np. atrybut „style” w znaczniku <p> pozwala na zdefiniowanie stylu tekstu w akapicie. Atrybuty znaczników HTML są ważnym elementem pozwalającym na precyzyjne określanie wyglądu i funkcjonalności elementów strony internetowej.

Znaczniki HTML w sekcji META

Znaczniki w sekcji META strony HTML służą do przekazywania dodatkowych informacji o stronie internetowej dla przeglądarek internetowych i wyszukiwarek. Te informacje są niewidoczne dla użytkowników, ale mają wpływ na sposób, w jaki strona jest interpretowana i wyświetlana w wyszukiwarkach, a także na interakcje między użytkownikami a stroną.

W sekcji META można umieścić różne atrybuty i wartości, które przekazują informacje o stronie internetowej, takie jak:

  • Opis strony (atrybut „description”) – krótki opis strony, który pojawia się w wynikach wyszukiwania.
  • Słowa kluczowe (atrybut „keywords”) – słowa kluczowe związane z tematem strony, które pomagają w wyszukiwaniu.
  • Autor (atrybut „author”) – nazwa autora lub twórcy strony.
  • Kodowanie znaków (atrybut „charset”) – określa, w jakim kodowaniu znaków jest napisana strona.
  • Wygasające (atrybut „expires”) – określa datę, po której strona przestaje być aktualna i powinna być odświeżona.
  • Roboty (atrybut „robots”) – określa, czy wyszukiwarki mogą indeksować stronę i jakie działania powinny podjąć w odniesieniu do niej.

Wszystkie te informacje pomagają przeglądarce internetowej i wyszukiwarkom w skuteczniejszym analizowaniu i wyświetlaniu strony internetowej, co z kolei może zwiększyć jej widoczność i dostępność dla użytkowników.

Oto lista 30 podstawowych znaczników HTML:

  1. <html> – Określa początek i koniec dokumentu HTML.
  2. <head> – Określa sekcję nagłówka dokumentu, która zawiera informacje o dokumencie.
  3. <title> – Określa tytuł dokumentu, który wyświetla się w pasku tytułu przeglądarki.
  4. <body> – Określa sekcję zawartości dokumentu.
  5. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Określają nagłówek sekcji, gdzie <h1> jest najważniejszy, a <h6> najmniej ważny.
  6. <p> – Określa akapit tekstu.
  7. <a> – Określa link do innej strony lub pliku.
  8. <img> – Określa obrazek.
  9. <ul> – Określa listę punktowaną.
  10. <ol> – Określa listę numerowaną.
  11. <li> – Określa element listy.
  12. <div> – Określa sekcję strony lub kontener dla innych elementów.
  13. <span> – Określa część tekstu lub kontener dla innych elementów.
  14. <form> – Określa formularz, który zbiera dane od użytkownika.
  15. <input> – Określa element formularza, w którym użytkownik może wprowadzać dane.
  16. <label> – Określa etykietę dla elementu formularza.
  17. <select> – Określa listę rozwijaną, w której użytkownik może wybierać jedną z kilku opcji.
  18. <option> – Określa opcję w elemencie <select>.
  19. <textarea> – Określa pole tekstowe, w którym użytkownik może wprowadzać dłuższy tekst.
  20. <button> – Określa przycisk, który może być kliknięty przez użytkownika.
  21. <table> – Określa tabelę.
  22. <tr> – Określa wiersz w tabeli.
  23. <th> – Określa nagłówek kolumny lub wiersza w tabeli.
  24. <td> – Określa komórkę tabeli.
  25. <thead> – Określa sekcję nagłówka w tabeli.
  26. <tbody> – Określa sekcję treści w tabeli.
  27. <tfoot> – Określa sekcję stopki w tabeli.
  28. <style> – Określa styl dla dokumentu HTML.
  29. <script> – Określa skrypt JavaScript.
  30. <meta> – Określa dodatkowe informacje o dokumencie, takie jak opis strony, słowa kluczowe, kodowanie znaków.

Znaczniki HTML podzielone według działania

Znaczniki HTML można podzielić na różne grupy w zależności od ich funkcji. Oto kilka przykładowych grup znaczników:

  1. Znaczniki strukturalne:
    • <html>
    • <head>
    • <title>
    • <body>
    • <div>
    • <span>
    • <header>
    • <footer>
    • <nav>
    • <section>
    • <article>
    • <aside>
    • <main>
    • <figure>
    • <figcaption>
  2. Znaczniki tekstu:
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    • <p>
    • <b>, <strong>
    • <i>, <em>
    • <u>, <ins>
    • <s>, <del>
    • <sup>, <sub>
    • <br>
    • <hr>
    • <blockquote>
    • <q>
  3. Znaczniki linków:
    • <a>
  4. Znaczniki obrazów i multimediów:
    • <img>
    • <video>
    • <audio>
    • <source>
    • <track>
  5. Znaczniki list:
    • <ul>
    • <ol>
    • <li>
  6. Znaczniki tabel:
    • <table>
    • <tr>
    • <th>
    • <td>
    • <thead>
    • <tbody>
    • <tfoot>
  7. Znaczniki formularzy:
    • <form>
    • <input>
    • <label>
    • <select>
    • <option>
    • <textarea>
    • <button>
    • <fieldset>
    • <legend>
    • <optgroup>

Znaczniki HTML podzielone ze względu na występowanie w <body> lub </head>

Znaczniki HTML można podzielić ze względu na ich występowanie w sekcji <head> lub <body> dokumentu. Oto przykładowe znaczniki z każdej grupy:

Znaczniki występujące w sekcji <head>:

  • <title>
  • <meta>
  • <link>
  • <style>
  • <script>
  • <base>

Znaczniki występujące w sekcji <body>:

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <a>
  • <img>
  • <ul>, <ol>, <li>
  • <table>, <tr>, <th>, <td>
  • <form>, <input>, <label>, <select>, <option>, <textarea>, <button>

W sekcji <head> umieszcza się informacje o dokumencie, takie jak tytuł, opis, słowa kluczowe, a także odwołania do plików stylów CSS i skryptów JavaScript. W sekcji <body> umieszcza się zawartość właściwą dokumentu, taką jak tekst, obrazy, linki, formularze i tabele. Podział na sekcje <head> i <body> umożliwia oddzielenie informacji o dokumencie od jego zawartości, co pozwala na łatwiejsze zarządzanie i modyfikowanie stron internetowych.

<body>