Ostatnia aktualizacja 24 stycznia, 2024
HTML to język znaczników używany do tworzenia stron internetowych. Jednym z elementów HTML-a jest <aside>, który pomaga w strukturyzowaniu treści. Ten element jest używany do oznaczania treści, które są powiązane z główną zawartością strony, ale niekoniecznie są jej kluczową częścią. Sprawdź, jak poprawnie używać <aside>, aby tworzyć klarowne i dobrze zorganizowane strony internetowe.
Czym jest element <aside> w HTML-u?
Elementu <aside> w języku HTML używa się do oznaczania treści poza głównym przekazem strony. Typowo te rodzaje treści mogą być uważane za marginalne względem głównego kontekstu. Są to na ogół: komentarze, boxy nawigacyjne i inne podobne elementy.
Należy jednak pamiętać, że <aside> nie jest przeznaczony do treści, które są całkowicie niepowiązane z głównym contentem. Warunkiem poprawnego zastosowania jest zamieszczanie znacznika wszędzie tam, gdzie mamy do czynienia z elementami nawiązującymi do głównej treści kontekstowo.
Dobre praktyki
Podczas stosowania elementu <aside> w języku HTML, istnieje kilka istotnych zasad, które pomagają zachować spójność i funkcjonalność strony internetowej:
- Relevancy: Upewnij się, że treść w
<aside>jest powiązana z główną treścią strony. Na przykład, w artykule o gotowaniu<aside>może zawierać przepisy na podobne dania lub porady dotyczące gotowania. - Niezakłócanie przepływu: Treści w
<aside>nie powinny zakłócać naturalnego przepływu czytania głównego contentu. Powinny one być umieszczane w taki sposób, aby były pomocne, ale nie dominowały nad główną treścią. - Unikanie nadużyć:
<aside>nie jest przeznaczony do umieszczania treści, które nie mają bezpośredniego związku z głównym tematem, takich jak losowe reklamy lub promocje. Te elementy mogą rozpraszać użytkownika i obniżać jakość doświadczenia na stronie. - Zachowanie estetyki: Treści w
<aside>powinny być zaprojektowane w taki sposób, aby były estetycznie spójne z resztą strony. Wykorzystanie podobnych stylów czcionek, kolorów i układów może pomóc w utrzymaniu harmonii wizualnej. - Dostępność: Zadbaj, aby treści w
<aside>były dostępne dla wszystkich użytkowników, w tym osób korzystających z czytników ekranowych. Poprawne etykietowanie i semantyka są niezbędne dla zachowania dostępności. - Optymalizacja SEO: Chociaż treści w
<aside>mogą nie być głównym punktem strony, nadal mogą wpływać na SEO. Upewnij się, że treści te są dobrze napisane i zawierają odpowiednie słowa kluczowe, aby zwiększyć widoczność strony. - Zachowanie kontekstu: Treści umieszczone w
<aside>powinny być zrozumiałe i mieć sens w kontekście, w którym są prezentowane. Nawet jeśli są to dodatkowe informacje, powinny one bezpośrednio odnosić się do głównego tematu strony.
Dalsza część tekstu znajduje się pod materiałem wideo:
Przykłady użycia <aside> w HTML-u
Przykładowy kod dla bocznego paska nawigacyjnego będzie wyglądał następująco:
<aside>
<h2>Nawigacja</h2>
<nav>
<ul>
<li><a href="#section1">Sekcja 1</a></li>
<li><a href="#section2">Sekcja 2</a></li>
</ul>
</nav>
</aside>Element wskazujący dodatkowe informacje może być zakodowany tak:
<aside>
<h2>Więcej na ten temat</h2>
<p>Tutaj możesz znaleźć dodatkowe informacje...</p>
</aside>Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
