Ostatnia aktualizacja 26 czerwca, 2023
HTML stanowi jeden z fundamentów tworzenia stron internetowych. Jego podstawowym elementem są znaczniki, które definiują strukturę i rodzaj treści na stronie. Znaczniki umożliwiają zakodowanie różnych elementów – od prostych paragrafów i nagłówków, poprzez linki i obrazy, aż po skomplikowane formularze czy multimedia. To właśnie dzięki różnorodności znaczników HTML możliwe jest stworzenie interaktywnych, dynamicznych i atrakcyjnych stron internetowych.
Sprawdź: Formularz w HTML-u krok po kroku
Znaczniki a atrybuty
Podczas tworzenia strony internetowej, znaczniki HTML wykorzystuje się do budowy jej struktury, podczas gdy atrybuty HTML dodają dodatkowe informacje do tych znaczników.
Na przykład, atrybut “href” w znaczniku <a> określa dokąd prowadzi link, a atrybut “alt” w znaczniku <img> dostarcza opis obrazu. Tworząc strony, warto zwrócić uwagę na prawidłowe i efektywne użycie obu elementów, ponieważ może to wpływać m.in. na SEO.
HTML – podstawowa struktura strony
Podstawowa struktura strony internetowej w polskiej wersji językowej wygląda następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Tutaj możemy umieścić własne style CSS */
</style>
</head>
<body>
<!-- Tutaj umieszczamy zawartość strony -->
</body>
</html>Co oznaczają powyższe elementy?
<!DOCTYPE html>: to deklaracja typu dokumentu (doctype), która mówi przeglądarce, że dokument jest napisany w HTML5.<html>: znacznik otwierający i zamykający cały dokument HTML.<head>: w sekcji tej umieszczamy metadane, tj. tytuł strony, linki do arkuszy stylów CSS, skrypty JavaScript. Dodatkowo jest to miejsce różne meta tagi: kodowanie dokumentu, opis strony dla wyszukiwarek itd.<title>: ten znacznik definiuje tytuł strony, który wyświetla się na pasku tytułu przeglądarki.<body>: wszystko, co umieszczamy pomiędzy otwierającym a zamykającym znacznikiem<body>, wyświetla się na stronie internetowej. Może to obejmować nagłówki, paragrafy, obrazy, linki, listy, formularze i wiele innych elementów.lang="pl": atrybut dodany do znacznika<html>informuje, że głównym językiem strony jest polski.<meta charset="UTF-8">: ten znacznik informuje przeglądarkę, że dokument używa kodowania UTF-8, które obejmuje polskie znaki.<link rel="stylesheet" href="styles.css">: ten znacznik linkuje do zewnętrznego arkusza stylów o nazwie “styles.css”. W ten sposób możemy zastosować style CSS zdefiniowane w zewnętrznym pliku.<style>: wewnątrz tych znaczników możemy zdefiniować własne style CSS, które będą stosowane do elementów na stronie.
Inne znaczniki w HTML-u
Znaczniki strukturalne
Do znaczników strukturalnych należą: <header>, <nav>, <main>, <section>, <article>, <aside> i <footer>. Pomagają one definiować różne sekcje strony i mają kluczowe znaczenie dla dostępności oraz SEO.
Znaczniki nagłówków i paragrafów
Znaczniki nagłówków (<h1> do <h6>) i paragrafów (<p>) są niezbędnym elementem prezentowania treści na stronie. Nagłówki służą do podkreślania hierarchii informacji i pomagają użytkownikom oraz wyszukiwarkom zrozumieć strukturę strony.
Znaczniki odnośników
Znacznik <a> jest niezbędny do tworzenia interaktywnych elementów, np. linków. Można go używać do łączenia różnych stron internetowych lub do nawigacji po tej samej stronie.
Znaczniki obrazów
Znacznika <img> używa się do wstawiania obrazów na stronę. Obrazy są istotnym elementem witryny, nie tylko ze względu na atrakcyjność wizualną, ale też uzupełnianie informacji o merytoryczne odniesienia. Odpowiednio podpisane zdjęcia pomagają również w pozycjonowaniu.
Czytaj także:
3 top trendy transformacji cyfrowej 2023 roku
Problem z WhatsApp. Bank myślał, że nikt się nie dowie
Chrome OS zmieni stare komputery w nowe chromebooki
Upały w Londynie doprowadziły do wyłączenia stron internetowych
