Najważniejsze atrybuty HTML, które powinieneś znać

Agnieszka Kubarek

19 czerwca, 2024

3 min

• Artykuły
• Praca w IT

Ostatnia aktualizacja 19 czerwca, 2024

HTML jest podstawowym językiem używanym do tworzenia stron internetowych. Jego głównym zadaniem jest strukturalne opisanie zawartości strony poprzez użycie elementów i atrybutów. Atrybuty HTML pozwalają na dodanie dodatkowych informacji do elementów, kontrolując ich wygląd, zachowanie oraz interakcję z użytkownikiem. Wiedza na temat najważniejszych atrybutów HTML jest niezbędna dla każdego, kto chce tworzyć nowoczesne, funkcjonalne i dostępne strony internetowe. Znajomość ich zastosowań i możliwości pozwala nie tylko na lepsze organizowanie kodu, ale również na poprawę interakcji użytkownika z witryną. W tym artykule omówimy najważniejsze atrybuty HTML.

Najważniejsze atrybuty HTML

Poniżej opisujemy atrybuty HTML, które każdy web developer powinien znać. Przeanalizujemy ich funkcje, zastosowania oraz przykłady użycia, aby pomóc w pełni wykorzystać potencjał HTML w codziennej pracy nad projektami webowymi.

Atrybut ‘id’

Atrybut ‘id’ służy do nadawania unikalnych identyfikatorów elementom HTML. Każdy identyfikator musi być unikalny w obrębie całej strony, co pozwala na jednoznaczne wskazywanie i manipulowanie konkretnymi elementami za pomocą CSS i JavaScriptu. Przykład użycia:

<div id="header">Nagłówek strony</div>

Dzięki atrybutowi id, możemy łatwo odwołać się do danego elementu w CSS:

#header {
    background-color: lightblue;
}

oraz w JavaScript:

document.getElementById("header").innerText = "Nowy Nagłówek";

Atrybut ‘class’

Atrybut ‘class’ pozwala na grupowanie elementów HTML w klasy, które mogą być stylizowane za pomocą CSS lub manipulowane za pomocą JavaScriptu. Klasy można nadawać wielu elementom, co umożliwia łatwe stosowanie tych samych stylów lub skryptów do wielu elementów naraz. Przykład:

<div class="content">Treść 1</div>
<div class="content">Treść 2</div>

W CSS możemy odwołać się do klasy ‘content’:

.content {
    font-size: 18px;
}

Dalsza część artykułu pod materiałem wideo

Atrybut ‘src’

Atrybut ‘src’ jest używany w elementach takich jak ‘img’, ‘video’ i ‘script’ do określania źródła pliku, który ma zostać załadowany. Przykład użycia w elemencie ‘img’:

<img src="obrazek.jpg" alt="Opis obrazka">

W przypadku skryptów, atrybut ‘src’ jest używany do ładowania zewnętrznych plików JavaScript:

<script src="skrypt.js"></script>

Zobacz: Atrybut lang w HTML-u pomaga zrozumieć język treści na stronie

Atrybut ‘href’

Atrybut ‘href’ jest kluczowy dla tworzenia odnośników (‘a’). Określa on adres URL, do którego użytkownik zostanie przeniesiony po kliknięciu linku. Przykład:

<a href="https://www.przyklad.com">Odwiedź naszą stronę</a>

Atrybut ‘href’ może również być używany do tworzenia kotwic na tej samej stronie:

<a href="#sekcja1">Przejdź do sekcji 1</a>
<div id="sekcja1">To jest sekcja 1</div>

Atrybuty HTML ‘alt’ i ‘title’

Atrybuty ‘alt’ i ‘title’ są istotne dla dostępności i SEO. Atrybut ‘alt’ w obrazach dostarcza tekstu alternatywnego, który jest wyświetlany, gdy obraz nie może zostać załadowany:

<img src="obrazek.jpg" alt="Opis obrazka">

Atrybut ‘title’ może być używany do dostarczania dodatkowych informacji, które są wyświetlane jako podpowiedź, gdy użytkownik najeżdża kursorem na element:

<p title="To jest podpowiedź">Najedź na ten tekst</p>

Atrybut ‘data-*’

Atrybuty ‘data-*’ pozwalają na przechowywanie niestandardowych danych w elementach HTML, co jest szczególnie przydatne w dynamicznych aplikacjach webowych. Przykład użycia:

<div data-user-id="12345">Użytkownik</div>

Dane te mogą być łatwo dostępne w JavaScript:

let userId = document.querySelector('div').dataset.userId;
console.log(userId); // 12345

Atrybuty formularzy: ‘action’, ‘method’, ‘name’, ‘value’

Atrybuty formularzy są kluczowe dla przesyłania danych. Atrybut ‘action’ określa URL, do którego dane formularza zostaną wysłane, a ‘method’ definiuje metodę przesyłania danych (GET lub POST). Przykład:

<form action="/submit" method="post">
    <input type="text" name="username" value="Jan">
    <input type="submit" value="Wyślij">
</form>

Atrybut ‘name’ jest używany do identyfikacji danych formularza, a ‘value’ określa domyślną wartość elementu formularza.

Atrybuty dostępności: ‘aria-*’

Atrybuty ‘aria-*’ (Accessible Rich Internet Applications) są używane do poprawy dostępności interaktywnych elementów. Przykład użycia ‘aria-label’:

<button aria-label="Zamknij">X</button>

Atrybuty te pomagają technologiom wspomagającym, takim jak czytniki ekranowe, lepiej interpretować zawartość strony i zapewnić lepsze doświadczenie użytkownikom z niepełnosprawnościami.

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.