Otwierasz pusty plik, wpisujesz kilka zdań i zastanawiasz się, czemu przeglądarka nie widzi w nich nagłówka ani akapitu. HTML nadaje treści strukturę, ale sam znacznik nie zawsze wystarczy: znaczenie mają też jego rodzaj, położenie i atrybuty.
HTML opisuje strukturę i znaczenie treści strony
- Dokument składa się z deklaracji typu, sekcji metadanych i treści strony.
- Znaczniki opisują rolę treści, a atrybuty uzupełniają je o dodatkowe informacje.
- Elementy semantyczne pomagają nazwać części strony, na przykład nawigację i główną treść.
- Przeglądarka może wyświetlić stronę mimo błędów, dlatego sam podgląd nie potwierdza poprawności kodu.
Poprawny szkielet dokumentu ułatwia dalszą pracę
Przeglądarka potrzebuje informacji, gdzie zaczyna się dokument, jakie ma metadane i która część zawiera treść widoczną na stronie. Taki układ przydaje się również w aplikacji .NET: widok Razor może generować HTML, ale nadal to HTML opisuje strukturę odpowiedzi wysyłanej do przeglądarki.
Moja pierwsza strona
Cześć!
To jest treść strony.
</code> informuje przeglądarkę, że dokument ma być obsługiwany w nowoczesnym trybie. Atrybut lang="pl" określa język treści, a kodowanie UTF-8 pozwala prawidłowo zapisać polskie znaki. Bez tych elementów strona może się wyświetlać, ale jej obsługa przez narzędzia i użytkowników będzie mniej przewidywalna.
Sekcja zawiera informacje o dokumencie, na przykład tytuł karty, natomiast obejmuje treść strony. Wewnątrz umieszcza się główną zawartość. To prosta mapa, do której później dochodzą style CSS i zachowanie JavaScriptu.
Znaczniki mówią przeglądarce, czym jest dana treść
Dwa fragmenty tekstu mogą wyglądać podobnie, a pełnić różne role. oznacza główny nagłówek, akapit, a odnośnik. Gdy oznaczysz tytuł zwykłym tekstem i powiększysz go dopiero CSS-em, wizualnie może przypominać nagłówek, ale w strukturze dokumentu nim nie będzie.
Atrybut zapisuje dodatkową informację w elemencie. W odnośniku href wskazuje cel, a w obrazie src lokalizuje plik. Tekst alternatywny w alt opisuje sens obrazu, jeśli jest informacyjny; przy grafice czysto dekoracyjnej zostawia się pusty atrybut alt="", by technologia asystująca nie odczytywała zbędnego opisu.
Dokumentacja API
- Pierwszy punkt
- Drugi punkt
Listę punktowaną zapisujesz przez
Semantyczne elementy pomagają nazwać części strony
W kodzie łatwo o pokusę, by opakować wszystko w Praktyczna decyzja może wyglądać tak: jeśli fragment ma własny sens poza bieżącą stroną, rozważ Wyobraź sobie stronę panelu dla usługi w Azure z menu, wykresem użycia API i osobnymi kartami z logami. Menu można umieścić w Brak znacznika zamykającego albo źle zagnieżdżone elementy nie zawsze kończą się pustym ekranem. Parser HTML stosuje określone reguły tworzenia drzewa dokumentu również wtedy, gdy napotka błędną składnię; WHATWG opisuje zarówno te reguły, jak i błędy, które powinny zgłaszać walidatory. To wyjaśnia, dlaczego strona może wyglądać „w porządku”, choć jej struktura różni się od zamierzonej. Widok w przeglądarce nie zastępuje kontroli kodu. Gdy element zostanie pominięty lub użyty w złej roli, przeglądarka może nadal coś wyświetlić, ale użytkownik klawiatury, czytnik ekranu lub skrypt aplikacji może otrzymać inną strukturę, niż zakładał autor. Poniższa tabela pomaga szybko rozpoznać, od czego zacząć poprawki. Przy pierwszym projekcie sprawdzaj więc nie tylko to, czy tekst i obrazy się pojawiają. Obejrzyj strukturę nagłówków, role elementów oraz komunikaty walidatora, a w formularzu zwróć uwagę, czy kontrolki mają etykiety i czy przycisk wykonuje zamierzoną akcję. Dobry start to pojedynczy plik z tytułem, jednym nagłówkiem, kilkoma akapitami, listą i linkiem. Gdy strona zacznie rosnąć, dodawaj elementy odpowiadające funkcji treści, a nie tylko jej aktualnemu wyglądowi. Wtedy CSS może zmienić układ bez przepisywania struktury, a kod pozostanie zrozumiały także wtedy, gdy widok generuje aplikacja .NET., i przekazują tę wskazówkę także narzędziom wspomagającym. MDN opisuje je jako elementy strukturalne, które pomagają rozpoznać funkcję obszaru strony.
; jeśli grupuje temat w większej całości, użyj ; jeśli potrzebujesz tylko opakowania do stylowania, wybierz , a główny obszar treści . Nie dobieraj tych tagów do wyglądu, bo jego rolę przejmie CSS.
, centralny widok w , a logi stanowiące samodzielne wpisy opisać jako ; pojedyncza karta użyta wyłącznie jako kontener może pozostać Strona może działać mimo błędnego HTML
Sytuacja Możliwa przyczyna lub skutek Co zrobić Tytuł tylko wygląda jak nagłówek Tekst nie ma semantyki nagłówka Oznacz go odpowiednim elementem –, a wygląd ustaw w CSSMenu jest grupą zwykłych kontenerów Jego funkcja może nie wynikać ze struktury Umieść linki nawigacyjne w Obraz z wykresem nie ma opisu Osoba, która go nie widzi, może stracić informację Dodaj krótki opis danych do alt albo udostępnij równoważne dane w tekściePodgląd wygląda dobrze, ale walidator zgłasza błąd Przeglądarka mogła odtworzyć strukturę według reguł parsera Popraw zgłoszony błąd i ponownie sprawdź strukturę dokumentu Pierwsza strona może być mała, ale czytelna
