Znaczniki HTML są podstawowymi budulcami każdej strony internetowej. To właśnie dzięki nim przeglądarka wie, jak wyświetlić tekst, obrazy i inne elementy na stronie. Bez odpowiedniego zrozumienia znaczników trudno jest stworzyć poprawny i dobrze zorganizowany dokument HTML. W tym artykule przeanalizujemy podstawowe znaczniki html, takie jak <div>, <span>, <p>, oraz inne elementy, które są fundamentem każdej strony internetowej.
Wprowadzenie do znaczników HTML
Znaczniki HTML to podstawowe elementy języka HTML, które umożliwiają tworzenie struktury i zawartości strony internetowej. Znaczniki języka HTML są interpretowane przez przeglądarki, dzięki czemu wyświetlają one treść w określony sposób.
Podstawowa struktura dokumentu
Każdy dokument HTML powinien zaczynać się od deklaracji typu dokumentu i zawierać podstawowe znaczniki.
Deklaracja typu dokumentu
Deklaracja <!DOCTYPE html> informuje przeglądarkę o wersji HTML, której używamy, i jest początkiem dokumentu.
<html>
Znacznik <html> otacza całą zawartość strony. Atrybut lang może określać język dokumentu, np. <html lang=”pl”>.
<head>
Sekcja <head> zawiera metadane strony, takie jak tytuł strony czy linki do plików CSS i skryptów.
<title>
Znacznik tytułu strony <title> definiuje i wyświetla jej nazwę na karcie przeglądarki.
<body>
Znacznik <body> zawiera treść strony, czyli wszystko to, co jest widoczne dla użytkownika.
Przykład struktury dokumentu HTML:
Znaczniki treści
Nagłówki: <h1> do <h6>
Znaczniki nagłówków służą do hierarchicznego organizowania treści:
<h1> – najważniejszy nagłówek.
<h2> – podnagłówek.
<h3>, <h4>, <h5>, <h6> – kolejne poziomy nagłówków.
Przykład kodu:
<h1>Główny tytuł</h1>
<h2>Podtytuł sekcji</h2>
<h3>Szczegółowy nagłówek</h3>
Akapity: <p>
Znacznik <p> służy do definiowania akapitów tekstu.
Przykład kodu:
<p>To jest przykładowy akapit tekstu na stronie.</p>
Podział sekcji: <section>
Znacznik podziału strony <section> grupuje powiązane ze sobą treści w logiczne sekcje.
Artykuły: <article>
Znacznik <article> reprezentuje niezależną część treści, taką jak post na blogu czy artykuł.
Znaczniki kontenerów
Znaczniki kontenerów, takie jak <div> i <span>, są niezwykle ważne w tworzeniu struktury strony. Pomagają one w grupowaniu treści i umożliwiają stylizację wybranych elementów za pomocą CSS.
<div>
Znacznik <div> to znacznik blokowy używany do grupowania innych elementów w celu stylizacji lub skryptowania.
<span>
Znacznik <span> to znacznik liniowy używany do stylizacji części tekstu wewnątrz innych elementów.
<main>
Znacznik <main> zawiera główną treść dokumentu, unikalną dla danej strony.
<header> i <footer>
<header> definiuje nagłówek strony, często zawierający logo czy menu.
<footer> definiuje stopkę strony z informacjami kontaktowymi lub prawami autorskimi.
<aside> i <nav>
<aside> zawiera treści poboczne, np. reklamy czy linki.
<nav> zawiera elementy nawigacji po stronie.
Listy i tabele
Znaczniki listy nieuporządkowanej: <ul> i <li>
<ul> definiuje listę nieuporządkowaną.
<li> to znacznik listy, reprezentujący element listy.
Przykład kodu:
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ul>
Znaczniki listy uporządkowanej: <ol> i <li>
<ol> definiuje listę uporządkowaną z numeracją.
Tabele: <table>, <tr>, <th>, <td>
<table> definiuje tabelę.
<tr> to wiersz tabeli.
<th> to komórka nagłówkowa.
<td> to komórka danych.
Przykład kodu:
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>
Poznaj historie absolwentów Akademii Devstock
Formularze i ich elementy
Znacznik <form>
<form> definiuje formularz HTML, który umożliwia interakcję użytkownika z serwerem.
Znacznik <input>
<input> to element html, który tworzy pola formularza, takie jak pola tekstowe, pola wyboru czy przyciski.
Przykład kodu:
<form action="/submit" method="post">
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">
<button type="submit">Wyślij</button>
</form>
Znacznik <button>
Tworzy przycisk w formularzu.
Znacznik <textarea>
Umożliwia wprowadzenie wielowierszowego tekstu.
Inne ważne znaczniki
Obrazy: <img>
Znacznik <img> służy do wstawiania obrazów. Jest to znacznik pojedynczy, nie wymaga zamknięcia.
Przykład kodu:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="obrazek.jpg" alt="Opis obrazka"><noscript><img decoding="async" src="obrazek.jpg" alt="Opis obrazka"></noscript>
Linki: <a>
Znacznik <a> tworzy hiperłącze.
Skrypty: <script>
Pozwala na osadzanie skryptów JavaScript.
Style: <style> i <link>
<style> umożliwia dodanie stylów CSS bezpośrednio w dokumencie.
<link> łączy zewnętrzne arkusze stylów CSS.
Atrybuty znaczników
Atrybuty znaczników modyfikują ich właściwości. Najważniejszy atrybut znacznika to <class>, który pozwala na grupowanie elementów do stylizacji.
Inne atrybuty:
id– unikalny identyfikator elementu.
href – adres URL w znaczniku <a>.
src – źródło pliku w znaczniku <img>.
alt – opis alternatywny dla obrazka.
Przykład:
<p class="opis" id="paragraf1">Tekst akapitu.</p>
Znaczniki blokowe i liniowe
Blokowe: <div>, <p>, <h1> – zajmują całą szerokość dostępnego miejsca.
Liniowe: <span>, <a>, <input> – zajmują tylko tyle miejsca, ile potrzebują.
Poprawne stosowanie znaczników
Poprawne stosowanie znaczników HTML jest kluczowe dla tworzenia przejrzystych i łatwych do zarządzania dokumentów. W tej sekcji omówimy kilka zasad, które warto stosować w praktyce:
Zamykanie znaczników: każdy znacznik otwierający powinien mieć odpowiedni znacznik zamykający, np. <p>…</p>.
Pomiędzy znacznikami nie powinno być błędów składniowych.
Znaczniki HTML stosujemy zgodnie z ich przeznaczeniem, co ułatwia czytelność kodu i jego późniejszą edycję.
FAQ: Pytania i odpowiedzi
Jest to blokowy element html używany do grupowania innych elementów i tworzenia części strony.
Służy do stylizacji fragmentów tekstu wewnątrz innych znaczników jako znacznik liniowy.
Lista podstawowych znaczników zawiera m. in. <html>, <head>, <title>, <body>, <h1>–<h6>, <p>, <div>, <span>, <a>, <img>.
więcej na MDN Web Docs
Blokowe zajmują całą szerokość (np. <div>), liniowe tylko tyle, ile potrzebują (np. <span>).
Tytuł strony definiuje się za pomocą znacznika <title> w sekcji <head>.
Formularz definiuje się znacznikiem <form> i zawiera znaczniki pola formularza jak znacznik input czy textarea.
Np. border, cellpadding, cellspacing – wpływają na wygląd tabeli.
Element html <head>, zawiera metadane i znacznik tytułu strony.
Za pomocą znaczników <ul> i <li>.
Są to: <form>, <input>, <button>, <textarea>.
Podsumowanie
Znajomość podstawowych znaczników HTML jest niezbędna w tworzeniu stron internetowych. Poprzez poprawne wykorzystywanie znaczników HTML, możemy tworzyć semantyczne i dobrze zorganizowane dokumenty. Pamiętaj o stosowaniu odpowiednich znaczników do ich przeznaczenia oraz o właściwym zamykaniu znaczników, co zapewni poprawne wyświetlanie treści.
Oznaczenia HTML i ich prawidłowe stosowanie to podstawa dla każdego webdevelopera. Dzięki nim Twoje strony będą nie tylko poprawne technicznie, ale także przyjazne dla użytkowników i wyszukiwarek.
Więcej ogólnych informacji o HTML znajdziesz w naszym artykule:
HTML dla zielonych: Podstawy tworzenia stron internetowych
