czwartek, 2024-02-15

Znacznik HTML

Fundamentalnymi elementami konstrukcyjnymi stron internetowych są znaczniki HTML (HyperText Markup Language) – służą do tworzenia struktury dokumentu i nadawania znaczenia zawartości strony.

Znaczenie znacznika

Struktura dokumentu

Znaczniki HTML definiują i organizują strukturę treści na stronie internetowej. Na przykład, <h1> do <h6> to znaczniki nagłówków, <p> definiuje paragrafy, a <ul> i <ol> służą do tworzenia list.

Semantyka

Znaczniki HTML nadają semantyczne znaczenie treści, pomagając w rozróżnianiu między różnymi typami informacji, takimi jak nagłówki, akapity, listy, linki, obrazy itp. Dzięki temu przeglądarki i narzędzia pomagające, takie jak czytniki ekranu dla osób niewidomych, mogą poprawnie interpretować treść strony. W HTML5 wprowadzono znaczniki semantyczne, takie jak m.in. <header>, <footer>, <nav>, <article>, i <section>, które jeszcze dokładniej określają znaczenie treści.

Budowa znacznika

Otwieranie i zamykanie znacznika

Początek znacznika składa się z nazwy znacznika otoczonej nawiasami ostrokątnymi. Na przykład: <p>, <div>, <a>. Koniec znacznika to nazwa znacznika poprzedzona ukośnikiem i otoczona nawiasami ostrokątnymi. Na przykład: </p>, </div>, </a>. Nie wszystkie znaczniki wymagają znacznika zamykającego, np. znaczniki samozamykające jak <img> czy <br>.

Znacznik tworzący nagłówek:

<h1>Tytuł dokumentu</h1>

Atrybuty znaczników

Znaczniki mogą zawierać atrybuty, które dostarczają dodatkowych informacji o elemencie, takich jak styl, identyfikatory, klasy, typy danych itp. Atrybuty znajdują się w znaczniku otwierającym i zwykle mają format nazwa="wartość".

Na przykład:

<a href="http://example.com">example.com</a>

gdzie href jest atrybutem, a http://example.com jego wartością. Część atrybutów jest typowa dla danego znacznika, np. href nie dotyczy akapitów (<p>). Niektóre atrybuty mogą występować w każdym znaczniku, np. identyfikator:

<h1 id="tytul">Tytuł dokumentu</h1>
<p id="pierwszy-akapit">Pierwszy akapit</p>

Treść znacznika

Treść to zawartość umieszczona pomiędzy znacznikiem otwierającym a zamykającym. Treść może zawierać tekst, inne znaczniki HTML, a czasami może być pusta (w zależności od typu znacznika). Na przykład, w przykładzie:

<p>To jest paragraf.</p>

"To jest paragraf." jest treścią.

Przykład znacznika z atrybutem i treścią

<a href="http://example.com" title="Przykładowa strona">Odwiedź Example.com</a>

W tym przykładzie:

• <a to początek znacznika otwierającego.
• href="http://example.com" i title="Przykładowa strona" to atrybuty znacznika.
• > kończy znacznik otwierający.
• Odwiedź Example.com to treść znacznika.
• </a> to znacznik zamykający.

Zagnieżdżanie znaczników

Zagnieżdżanie znaczników polega na umieszczaniu jednych znaczników wewnątrz innych. Ważne jest, aby zachować właściwą kolejność otwierania i zamykania, aby struktura była poprawna.

Przykład poprawnego zagnieżdżenia

<div>
    <h1>Nagłówek strony</h1>
    <p>To jest <strong>ważny</strong> paragraf.</p>
</div>

Błędy zagnieżdżania

Niewłaściwe zagnieżdżanie może prowadzić do błędów w wyświetlaniu strony. Przykład błędnego zagnieżdżenia:

<p>To jest <strong>ważny paragraf.</p></strong>

W powyższym przykładzie znacznik <strong> jest otwarty wewnątrz <p>, ale zamykany poza nim, co jest błędem.

Wielopoziomowe zagnieżdżanie

Można zagnieżdżać wiele poziomów znaczników, aby utworzyć złożone struktury, na przykład:

<div>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
    </ul>
</div>