Znaczniki HTML - Lista Elementów Języka - Dowiedz się, co to jest i Poznaj Zastosowanie

Poniższa tabela zawiera listę wszystkich elementów HTML 4.01, XHTML 1.0 oraz HTML5.

Elementy HTML 4.01, XHTML 1.0 oraz HTML5.
Element	Opis	HTML 4.01/XHTML 1.0			HTML 5
Element	Opis	Strict	Transitional	Frameset	HTML 5
`<!--...-->`	Komentarz	✔	✔	✔	✔
`<!DOCTYPE>`	Określa typ dokumentu. Typ dokumentu HTML5 to: `<!DOCTYPE html>`	✔	✔	✔	✔
`a`	Do tworzenia łączy hipertekstowych	✔	✔	✔	✔
`abbr`	Do oznaczania skrótowców	✔	✔	✔	✔
`acronym`	Akronim	✔	✔	✔	✘
`address`	Informacje kontaktowe autora dokumentu	✔	✔	✔	✔
`applet`	Aplet	✘	✔	✔	✘
`area`	Obszar mapy odsyłaczy	✔	✔	✔	✔
`article`	Samodzielny fragment treści strony	✘	✘	✘	✔
`aside`	Treść poboczna	✘	✘	✘	✔
`audio`	Treść dźwiękowa	✘	✘	✘	✔
`b`	Pogrubiony tekst	✔	✔	✔	✔
`base`	Bazowy adres URL wszystkich odnośników na stronie	✔	✔	✔	✔
`basefont`	Domyślne właściwości tekstu dla całej strony internetowej	✘	✔	✔	✘
`bdi`	Tekst, który może być frormatowany w innym kierunku niż otaczająca go treść	✘	✘	✘	✔
`bdo`	Określa kierunek tekstu	✔	✔	✔	✔
`big`	Powiększony tekst	✔	✔	✔	✘
`blockquote`	Długi cytat blokowy	✔	✔	✔	✔
`body`	Treść główna dokumentu	✔	✔	✔	✔
`br`	Złamanie wiersza	✔	✔	✔	✔
`button`	Przycisk	✔	✔	✔	✔
`canvas`	Grafika rysowana na stronie za pomocą skryptów	✘	✘	✘	✔
`caption`	Podpis tabeli	✔	✔	✔	✔
`center`	Wypośrodkowanie tekstu	✘	✔	✔	✘
`cite`	Źródło, np. tytuł książki, filmu itp.	✔	✔	✔	✔
`code`	Fragment kodu komputerowego	✔	✔	✔	✔
`col`	Kolumna w grupie kolumn tabeli	✔	✔	✔	✔
`colgroup`	Grupuje kolumny	✔	✔	✔	✔
`data`	Dane w formacie zrozumiałym dla komputera	✘	✘	✘	✔
`datalist`	Lista elementów funkcji automatycznego uzupełniania pól formularzy	✘	✘	✘	✔
`dialog`	Okno dialogowe	✘	✘	✘	✔
`dd`	Definicja	✔	✔	✔	✔
`del`	Usunięty tekst	✔	✔	✔	✔
`details`	Szczegółowe informacje dotyczące elementu	✘	✘	✘	✔
`dfn`	Definiowane pojęcie	✔	✔	✔	✔
`dir`	Lista katalogów	✘	✔	✔	✘
`div`	Ogólny blokowy kontener treści strony internetowej	✔	✔	✔	✔
`dl`	Lista definicji	✔	✔	✔	✔
`dt`	Pojęcie definiowane w liście definicji	✔	✔	✔	✔
`em`	Emfaza	✔	✔	✔	✔
`embed`	Zewnętrzna aplikacja lub treść interaktywna	✘	✘	✘	✔
`fieldset`	Grupa powiązanych ze sobą elementów formularza	✔	✔	✔	✔
`figcaption`	Podpis elementu `figure`	✘	✘	✘	✔
`figure`	Ilustracje, schematy, zdjęcia, listingi kodu itp. z podpisem	✘	✘	✘	✔
`font`	Własności pisma	✘	✔	✔	✘
`footer`	Stopka całego dokumentu lub jego sekcji	✘	✘	✘	✔
`form`	Formularz internetowy	✔	✔	✔	✔
`frame`	Ramka w zbiorze ramek	✘	✘	✔	✘
`frameset`	Zbiór ramek	✘	✘	✔	✘
`h1`	Nagłówek pierwszego stopnia	✔	✔	✔	✔
`h2`	Nagłówek drugiego stopnia	✔	✔	✔	✔
`h3`	Nagłówek trzeciego stopnia	✔	✔	✔	✔
`h4`	Nagłówek czwartego stopnia	✔	✔	✔	✔
`h5`	Nagłówek piątego stopnia	✔	✔	✔	✔
`h6`	Nagłówek szóstego stopnia	✔	✔	✔	✔
`head`	Nagłówek opisujący dokument HTML	✔	✔	✔	✔
`header`	Nagłówek całej strony internetowej lub jej części	✘	✘	✘	✔
`hgroup`	Grupowanie nagłówków `h1`–`h6`	✘	✘	✘	✔
`hr`	Pozioma linia	✔	✔	✔	✔
`html`	Określa dokument HTML	✔	✔	✔	✔
`i`	Tekst o innym wydźwięku lub charakterze	✔	✔	✔	✔
`iframe`	Ramka wewnętrzna	✘	✔	✔	✔
`img`	Obraz graficzny	✔	✔	✔	✔
`input`	Pole wejściowe formularza	✔	✔	✔	✔
`ins`	Wstawiony tekst	✔	✔	✔	✔
`kbd`	Tekst do wpisania za pomocą klawiatury	✔	✔	✔	✔
`label`	Etykieta kontrolki formularza	✔	✔	✔	✔
`legend`	Tytuł elementu grupującego	✔	✔	✔	✔
`li`	Element listy	✔	✔	✔	✔
`link`	Łącze do zewnętrznego zasobu	✔	✔	✔	✔
`main`	Treść główna dokumentu	✘	✘	✘	✔
`map`	Mapa odsyłaczy	✔	✔	✔	✔
`mark`	Wyróżniony tekst	✘	✘	✘	✔
`menu`	Lista poleceń	✘	✔	✔	✔
`meta`	Metadane dokumentu	✔	✔	✔	✔
`meter`	Reprezentuje wartość skalarną ze znanego przedziału lub liczbę zmiennoprzecinkową, np. poziom użycia dysku	✘	✘	✘	✔
`nav`	Sekcja nawigacyjna dokumentu	✘	✘	✘	✔
`noframes`	Treść wyświetlana w przypadku braku obsługi ramek	✘	✔	✔	✘
`noscript`	Treść zastępcza dla skryptu	✔	✔	✔	✔
`object`	Obiekt osadzony na stronie	✔	✔	✔	✔
`ol`	Lista uporządkowana	✔	✔	✔	✔
`optgroup`	Lista opcji	✔	✔	✔	✔
`option`	Opcja listy opcji	✔	✔	✔	✔
`output`	Wynik obliczeń	✘	✘	✘	✔
`p`	Akapit	✔	✔	✔	✔
`pre`	Tekst preformatowany	✔	✔	✔	✔
`progress`	Postęp wykonywania czynności	✘	✘	✘	✔
`q`	Krótki cytat	✔	✔	✔	✔
`ruby`	Adnotacje ruby	✘	✘	✘	✔
`rp`	Dla przeglądarek nie obsługujących adnotacji ruby	✘	✘	✘	✔
`rt`	Tekst adnotacji ruby	✘	✘	✘	✔
`s`	Skreślony tekst	✘	✔	✔	✔
`samp`	Przykładowy wynik działania programu	✔	✔	✔	✔
`script`	Skrypt	✔	✔	✔	✔
`section`	Sekcja dokumentu	✘	✘	✘	✔
`select`	Lista rozwijana	✔	✔	✔	✔
`small`	Pomniejszony tekst	✔	✔	✔	✔
`source`	Źródła elementów medialnych	✘	✘	✘	✔
`span`	Ogólny śródliniowy kontener tekstu	✔	✔	✔	✔
`strike`	Przekreślony tekst	✘	✔	✔	✘
`strong`	Ważny tekst	✔	✔	✔	✔
`style`	Arkusz stylów	✔	✔	✔	✔
`sub`	Indeks dolny	✔	✔	✔	✔
`summary`	Podpis elementu `details`	✘	✘	✘	✔
`sup`	Indeks górny	✔	✔	✔	✔
`table`	Tabela	✔	✔	✔	✔
`tbody`	Treść główna tabeli	✔	✔	✔	✔
`td`	Komórka tabeli	✔	✔	✔	✔
`template`	Treść ukryta podczas wczytywania strony	✘	✘	✘	✔
`textarea`	Obszar tekstowy	✔	✔	✔	✔
`tfoot`	Stopka tabeli	✔	✔	✔	✔
`th`	Komórka nagłówka tabeli	✔	✔	✔	✔
`thead`	Nagłówek tabeli	✔	✔	✔	✔
`time`	Data lub godzina	✘	✘	✘	✔
`title`	Tutuł dokumentu HTML	✔	✔	✔	✔
`tr`	Wiersz tabeli	✔	✔	✔	✔
`track`	Napisy do elementu multimedialnego	✘	✘	✘	✔
`tt`	Teletekst	✔	✔	✔	✘
`u`	Fragment różniący się od otaczającej treści	✔	✔	✔	✔
`ul`	Lista nieuporządkowana	✔	✔	✔	✔
`var`	Zmienna	✔	✔	✔	✔
`video`	Film wideo	✘	✘	✘	✔
`wbr`	Potencjalne złamanie wiersza	✘	✘	✘	✔

Znaczniki HTML

Elementy HTML stanowią fundament każdej witryny, definiując jej strukturę i pozwalając przeglądarkom na poprawną interpretację zawartości. Znaczniki HTML to podstawowe komponenty kodu, które określają sposób wyświetlania treści na stronie. Podczas nauki tworzenia stron internetowych zrozumienie, czym są znaczniki HTML i jak je poprawnie implementować, jest pierwszym krokiem do zostania profesjonalnym web developerem.

Znaczniki HTML - fundamenty budowania stron internetowych

Co to jest znacznik HTML? To element kodu, który definiuje określoną funkcjonalność lub strukturę na stronie.

Znaczniki HTML występują w parach składających się z tagu otwierającego i zamykającego, choć istnieją również tagi samozamykające (np. img). Elementy HTML służą do definiowania różnych części dokumentu, od podstawowych bloków tekstu po skomplikowane formularze czy elementy multimedialne. Podczas nauki tworzenia stron internetowych poznasz różne kategorie znaczników HTML, w tym:

znaczniki strukturalne - definiujące podstawową strukturę dokumentu (np. alt, html, head, body);

znaczniki tekstowe - formatujące tekst (np. p; h1, strong );

znaczniki listy - tworzące listy uporządkowane i nieuporządkowane (np. ul, ol, li);

znaczniki hiperłączy - łączące strony i zasoby (np. a;);

znaczniki multimedialne - osadzające obrazy, dźwięki czy filmy (np. img, audio, video).

Aby opanować podstawy HTML oraz poznać podstawowe znaczniki HTML warto regularnie praktykować ich zastosowanie w różnych kontekstach.

Elementy HTML5 i ich znaczenie w nowoczesnym webdevelopmencie

Współczesna nauka tworzenia stron internetowych wymaga znajomości znaczników HTML5, które znacząco rozszerzyły możliwości poprzedniej wersji języka. Elementy wprowadzone w HTML5 kładą większy nacisk na semantykę, ułatwiając tworzenie stron dostępnych dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.

Znaczniki HTML5 takie jak header, footer, nav, article, section czy aside pozwalają na precyzyjniejsze określenie struktury dokumentu. Elementy HTML związane z multimediami (audio, video, canvas) eliminują potrzebę korzystania z zewnętrznych wtyczek, jak Flash.

Pamiętaj, że znajomość samych znaczników to dopiero początek. Równie ważne jest zrozumienie, jak używać atrybutów HTML, które modyfikują zachowanie i wygląd elementów. Pełną listę atrybutów HTML znajdziesz w naszym kompendium. Istotne jest również zwracanie uwagi na zgodność i kompatybilność znaczników HTML z różnymi przeglądarkami. Chociaż współczesne przeglądarki obsługują większość elementów HTML5, niektóre starsze wersje mogą wymagać dodatkowych rozwiązań.

Do efektywnej pracy ze znacznikami HTML warto wykorzystać odpowiednie narzędzia - sprawdź nasz poradnik: jaki edytor do HTML wybrać, aby zwiększyć swoją produktywność. Jeśli chcesz kompleksowo podejść do tematu, zachęcamy do skorzystania z naszego kursu - nauki tworzenia stron internetowych, który przeprowadzi Cię od podstaw aż po zaawansowane zagadnienia.

Lista elementów HTML5, HTML4.01 i XHTML 1.0

Dodaj komentarz Anuluj pisanie odpowiedzi