Atrybuty HTML
Atrybuty HTML dostarczają dodatkowych informacji o elementach HTML. Podczas projektowania stron internetowych są praktycznie nierozłącznym elementem. Dzięki zastosowaniu atrybutów można dodać dodatkowe informacje takie jak podpowiedź po najechaniu na element, tekst alternatywny wyświetlany kiedy obrazek nie może być wyświetlony, długość i szerokość elementu czy dodatkowe style określające w jaki sposób ma zostać wyświetlony dany element.
- Wszystkie elementy HTML mogą mieć atrybuty
- Atrybuty dostarczają dodatkowych informacji o elementach
- Atrybuty są zawsze określone w tagu początkowym
- Atrybuty zwykle występują w parach takich jak: nazwa=”wartość”
Atrybut title
Atrybut title definiuje dodatkowe informacje o elemencie. Wartość atrybutu title zostanie wyświetlona jako podpowiedź po najechaniu kursorem myszy na element. Atrybut title może zostać nadany do dowolnego tagu HTML, jednak najczęściej stosowany jest z tagiem <img>.
<p title="Tekst zawierający podpowiedź">To jest akapit.</p>Atrybut href
Znacznik <a> definiuje hiperłącze, natomiast atrybut href określa adres URL strony, do której prowadzi link.
<a href="https://selectors.pl/">Zawartość odnośnika</a>Więcej dowiesz się w dziale Linki HTML.
Atrybut src
Znacznik <img> służy do osadzania grafiki na stronie HTML, natomiast atrybut src określa adres do wyświetlanego obrazu.
<img src="selectors.jpg">Ponadto obrazki na stronie HTML możemy osadzić na dwa sposoby podając w src bezwzględny adres URL lub względny adres URL.
Bezwzględny adres URL odnosi się do pełnej ścieżki obrazu, tj. domeny, katalogu, nazywy obrazu i jego rozszerzenia. Przykład: src="https://selectors.pl/images/selectors.jpg" — Taki zapis może odsyłać do zewnętrznego obrazu znajdującego się na innej stronie internetowej.
Względny adres URL nie zawiera nazwy domeny. Przykład: src="selectors.jpg" — Taki zapis stosowany jest jedynie w obrębie własnej witryny.
Uwaga! Jeśli adres URL zaczyna się bez ukośnika, będzie odnosił się do bieżącej strony. Przykład: src="selectors.jpg". Jeśli adres URL zaczyna się od ukośnika, będzie odnosił się do domeny. Przykład: src="/images/selectors.jpg".
Atrybut alt
Atrybut alt określa alternatywny tekst dla obrazu, jeśli obraz nie może zostać wyświetlony. Wykorzystywany jest kiedy użytkownik korzysta z wolnego połączenia, podczas błędnie zadeklarowanej ścieżki obrazu lub jeśli użytkownik korzysta z czytnika ekranu.
<img src="selectors.jpg" alt="Opis obrazka, tekst alternatywny">Atrybut width
Znacznik <img> powinien również zawsze zawierać atrybut width, który określaja szerokość obrazka w pikselach.
<img src="selectors.jpg" width="168">Atrybut height
Znacznik <img> powinien również zawsze zawierać atrybut eighth, który określaja wysokość obrazka w pikselach.
<img src="selectors.jpg" height="100">Atrybut style
Atrybut style służy do dodawania stylów do elementu, takich jak kolor, czcionka, rozmiar oraz inne. Jest wręcz niezbędnym atrybutem w przypadku wyróżnienia konkretnego fragmentu strony.
<p style="color:red;">To jest czerwony akapit.</p>Atrybut class
Atrybut class definiuje co najmniej jedną lub więcej klas dla elementu. Jest powszechnie używany do wskazywania klasy w arkuszu stylów.
<p class="highlight">To jest czerwony akapit.</p>Więcej dowiesz się w kursie CSS.
Atrybut lang
Atrybut lang powinien być umieszczony wewnątrz znacznika <html>, aby zadeklarować język strony www. Taki zabieg za zadanie pomóc wyszukiwarkom internetowym i przeglądarkom w zrozumieniu strony.
<!DOCTYPE html>
<html lang="pl">
<body>
...
</body>
</html>Kody krajów można również dodać do kodu języka w atrybucie lang. Pierwsze dwa znaki określają język strony HTML, natomiast dwa ostatnie określają kraj.
<!DOCTYPE html>
<html lang="pl-PL">
<body>
...
</body>
</html>Podsumowanie
Nazwa atrybutu HTML może składać się zarówno z małych, jak i z dużych liter, jednak najlepszą praktyką jest korzystanie wyłącznie z małych liter.
Wartość atrybutu HTML zawsze podajemy po znaku = oraz pomiędzy podwójnym cudzysłowem "wartość" lub pomiędzy pojedynczym cudzysłowem 'wartość'.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
