Ostatnia aktualizacja 10 stycznia, 2024
HTML to skrót od HyperText Markup Language. Jest to język znaczników, którego używa się do tworzenia i strukturyzowania stron internetowych. Jego głównym zadaniem jest organizowanie i prezentowanie treści w przeglądarkach internetowych. HTML pozwala na definiowanie elementów takich jak nagłówki, paragrafy, listy, linki, obrazy, tabelki i wiele innych. Poniżej przedstawiamy praktyczne wskazówki, dzięki którym łatwo przyswoisz podstawy HTML i zrobisz pierwszy krok w stronę web developmentu.
Struktura dokumentu HTML
Podstawy HTML zaczynają się od zrozumienia struktury dokumentu. Obejmuje ona kilka najważniejszych elementów.
<!DOCTYPE>informuje przeglądarkę o wersji HTML<html>otacza całą zawartość strony<head>zawiera metadane<body>to miejsce na treści widoczne dla użytkownika
Struktura w edytorze będzie prezentować się następująco:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>Tagi i elementy
Tagi HTML służą do tworzenia elementów strony. Na przykład:
<p>definiuje paragraf<h1>to najważniejszy nagłówek<a>tworzy hiperłącze<img>służy do wstawiania obrazów
W kodzie będzie to wyglądało następująco:
<h1>Nagłówek strony</h1>
<p>To jest paragraf.</p>
<a href="https://example.com">Link do strony</a>
<img src="obrazek.jpg" alt="Opis obrazka">Atrybuty
Atrybuty w HTML dostarczają dodatkowych informacji o elementach. Na przykład:
hrefw<a>określa adres URLsrcw<img>wskazuje ścieżkę obrazkaaltopisuje obrazekclasspozwala na stylizowanie elementów
<a href="https://example.com" class="link-klasa">Link do strony</a>
<img src="obrazek.jpg" alt="Opis obrazka" class="obrazek-klasa">Podstawy HTML obejmują również formatowanie tekstu
Do formatowania w HTML-u służą różne tagi do formatowania tekstu, takie jak <b> dla pogrubienia, <i> dla kursywy, <em> dla wyróżnienia i <strong> dla silnego nacisku.
<p><b>Pogrubiony tekst</b>, <i>kursywa</i>, <em>wyróżnienie</em>, <strong>silny nacisk</strong>.</p>Warto w tym miejscu wyjaśnić różnicę między znacznikami <strong> oraz <b>.
Znacznik <strong> jest używany do wyróżnienia tekstu o dużym znaczeniu. Tekst otoczony tym znacznikiem jest interpretowany przez przeglądarki i czytniki ekranowe jako ważny i wymagający szczególnej uwagi. Używanie sugeruje, że zawartość ma szczególne znaczenie, na przykład dla znaczenia całej wypowiedzi.
Znacznik <b> służy do stylistycznego wyróżnienia tekstu bez nadawania mu dodatkowego znaczenia semantycznego. Jest to czysto wizualna modyfikacja, która nie wskazuje, że tekst jest szczególnie ważny z punktu widzenia treści. Używa się go, gdy chcemy uzyskać pogrubienie dla efektu wizualnego, bez sugerowania większego znaczenia.
W kontekście dostępności i SEO, przeglądarki i czytniki ekranowe mogą traktować tekst w <strong> jako bardziej istotny, co nie ma miejsca w przypadku użycia <b>.
Listy
Listy punktowane tworzy się za pomocą <ul>, a listy numerowane – <ol>. Element <li> definiuje poszczególne punkty listy.
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ul>
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ol>Linki i hiperłącza to także podstawy HTML
Tag <a> służy do tworzenia linków. Atrybut href określa docelowy adres URL.
<a href="https://example.com">Odwiedź naszą stronę</a>Podstawy HTML – inne elementy
Obrazy
Obrazy wstawia się za pomocą <img>, gdzie src wskazuje ścieżkę do obrazka, a alt odpowiada za tekst alternatywny – istotny z punktu widzenia SEO oraz użytkowników o szczególnych potrzebach dotyczących dostępności strony.
<img src="obrazek.jpg" alt="Opis obrazka">Tabele
Tabele tworzy się za pomocą <table>, z wierszami <tr>, nagłówkami <th> i komórkami <td>.
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>Formularze
Formularze internetowe tworzy się za pomocą <form>, z różnymi polami wejściowymi <input>, etykietami <label> i obszarami tekstowymi <textarea>.
<form action="submit.php">
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Wyślij">
</form>Elementy semantyczne
Elementy semantyczne, czyli <header>, <footer>, <article> i <section>, pomagają lepiej zorganizować i opisać strukturę strony.
<header>Nagłówek strony</header>
<article>Główna treść artykułu</article>
<footer>Stopka strony</footer>Podstawy HTML są istotne dla SEO strony internetowej
Optymalizacja strony internetowej pod kątem wyszukiwarek rozpoczyna się już na etapie tworzenia struktury HTML.
Użycie odpowiednich tagów semantycznych, czyli <header>, <nav>, <section>, <article>, <aside> i <footer>, pomaga wyszukiwarkom zrozumieć strukturę i hierarchię treści na stronie. Tagi pozwalają lepiej organizować zawartość, co jest korzystne zarówno dla użytkowników, jak i algorytmów wyszukiwania.
Nagłówki (tagi od <h1> do <h6>) są istotne w określaniu struktury i priorytetów treści. Idealnie, powinno się używać jednego tagu <h1> na stronie do określenia jej głównego tematu, a kolejnych nagłówków niższego rzędu do strukturyzowania treści.
Atrybut alt w tagach <img> jest niezwykle ważny. Przechowuje on opis obrazków, co jest ważne zarówno dla zwiększania dostępności treści obrazkowych, jak i SEO. Opisy te pomagają wyszukiwarkom zrozumieć kontekst grafik na stronie.
Atrybuty title w linkach (tagach <a>) mogą służyć do dostarczania dodatkowego kontekstu odnośnie linkowanych stron. Są również ważne w kwestii użyteczności i SEO.
Uporządkowany i semantycznie poprawny kod HTML ułatwia wyszukiwarkom indeksowanie strony. Do dobrych praktyk należy unikanie zbędnego kodu, poprawne zamykanie tagów i używanie komentarzy.
Współczesne algorytmy wyszukiwarek przykładają dużą wagę do responsywności i dostępności stron. Strony dostosowane do różnych urządzeń i przeglądarek, jak również te przystosowane dla osób z różnymi potrzebami, są wyżej oceniane.
Meta tagi, zwłaszcza <title> i <meta name="description">, odgrywają kluczową rolę w SEO. Pozwalają one na precyzyjne określenie tytułu strony i krótkiego opisu, co jest bezpośrednio wyświetlane w wynikach wyszukiwania.
Optymalizacja kodu HTML w celu przyspieszenia ładowania strony również wpływa na SEO. Czysty i efektywny kod, optymalizacja obrazów i zasobów, a także unikanie zbędnych skryptów, mogą znacznie poprawić szybkość ładowania.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
