Nie musisz używać tagów div za każdym razem. Użyj tych semantycznych tagów HTML, aby Twoja witryna była bardziej uporządkowana i dostępna.
Przed wprowadzeniem semantycznego HTML programiści używali elementów div do porządkowania treści. Elementy div same w sobie nie mają znaczenia. Zapewniają jedynie sposób stosowania stylów i porządkowania treści.
Słowo semantyczne oznacza odnoszące się do znaczenia. Semantyczne elementy HTML opisują cel ich zawartości. Zapewniają znaczenie programistom, użytkownikom, wyszukiwarkom i technologiom pomocniczym. Oto lista popularnych semantycznych tagów HTML, których możesz użyć w swoim następnym projekcie.
Co to są divy?
W HTML element div (podział) jest kontenerem na poziomie bloku. Div służy do grupowania lub dzielenia elementów HTML na sekcje na stronie internetowej. Składnia jest pokazana poniżej:
<dz>
dz>
Korzyści z używania semantycznych elementów HTML zamiast elementów div
HTML5 wprowadził semantyczne elementy HTML, aby ułatwić czytanie kodu. Elementy semantyczne nadają znaczenie i strukturę treściom internetowym.
Sprawiają, że Twój kod jest zrozumiały dla innych programistów. Ułatwiają one również wyszukiwarkom znajdowanie treści i kierowanie ruchu do Twojej witryny. Oto kilka elementów semantycznych, których możesz użyć w swoim Projekty HTML i CSS.
1.
The tag definiuje sekcję nagłówka w dokumencie. Zwykle zawiera logo witryny, nawigację i tytuł strony. Jest to sekcja, która pojawia się na górze strony internetowej. Możesz dostosować nagłówek do swoich potrzeb. Składnia jest następująca:
<ciało><nagłówek>
<h1> Cześć!h1>
<P>Jestem nagłówkiemP>
nagłówek>
ciało>
2.
The tag zawiera łącza nawigacyjne do witryny. Mogą to być menu, spisy treści lub indeksy. Zwykle jest umieszczany w etykietka. Składnia jest następująca:
<nagłówek><nawigacja>
<ul>
<li>Linki do mojej stronyli>
<li><Ahref="#"> DomA>li>
<li ><Ahref="#"> O nas A>li>
ul>
nawigacja>
<h1>Powyższe jest częścią nawigacyjną mojej strony.h1>
nagłówek>
W przeglądarce będzie to wyglądać tak:
Możesz użyć modeli układu CSS, takich jak Flexbox CSS wyrównać
3.
The tag zawiera główną treść strony internetowej. Oddziela zawartość od nagłówka, paska bocznego i stopki. Main reprezentuje dominującą treść Sekcja.
<ciało><nagłówek>
<tytuł> Fakty dotyczące witryny tytuł>
nagłówek>
<główny>
<P> Ta strona jest krótką demonstracją działania tagu głównego.P>
<P> Obejmuje on część serwisu zawierającą przydatne treści.P>
główny>
<stopka>
<h3> To jest stopka h3>
stopka>
ciało>
Wygląda to tak:
4.
Użyj tag, aby zdefiniować niezależne sekcje w dokumencie lub witrynie internetowej. Na przykład możesz ich użyć do uporządkowania postów na blogu, czasopism lub kart produktów. The element może obejmować inne elementy, w tym inne artykuły, sekcje i nagłówki. Załączone elementy powinny nawiązywać do tematu artykułu.
<artykuł>
<h1>Dziwniejsze niż fikcjah1><artykuł>
<h3>Wstęph3>
<P>Wydarzenia i osoby opisane w tej książce są fikcyjne.P>
artykuł>
<artykuł>
<h3>Rozdział pierwszyh3>
<P> Dzień był jasny, a słońce uśmiechało się z niebaP>
artykuł>
artykuł>
Wygląda to tak:
5.
The tag zawiera treść związaną z główną treścią. Użyj tego tagu, aby utworzyć paski boczne dla cytatów, komentarzy lub okrzyków. podkreśla informacje, które czytelnik może przegapić. Wyróżnia się na tle reszty treści.
HTML><HTML>
<styl>
ciało{
kolor tła:#abdbe3;
}
na bok {
szerokość: 30%;
dopełnienie-lewo: 0,5rem;
margines-lewy: 1rem;
flex: lewy;
box-shadow: wstawka 5px 0 5px -5px zielony;
styl czcionki: kursywa;
kolor czerwony;
}
na bok > p {
margines: 0,5 rema;
styl>
<ciało>
<główny>
<h1> Ptaki tkaczyh1>
<P>Ploceidae to rodzina małych ptaków wróblowatych. Wielu z nich nazywa się tkaczami, tkaczami, ziębami tkaczy i gońcami.P>
<na bok>
<P>Królestwo: Animalia
Gromada: ChordataP>na bok>
<P>W najnowszych klasyfikacjach Ploceidae jest kladem, z wyłączeniem niektórych ptaków, które w przeszłości były umieszczane w rodzinie. Niektóre z wróbli, ale obejmuje monotypową podrodzinę Amblyospizinae.P>
główny>
ciało>
HTML>
6.
The element zawiera część strony bez określonego elementu semantycznego. Sekcje mogą mieć nagłówek wprowadzający treść i dołączający inne elementy HTML. reprezentuje elementy strony internetowej, takie jak rozdziały w książce lub blogu.
HTML><HTML>
<ciało>
<h1>Bibliah1>
<Sekcja>
<h2>Wstęph2>
<P>Biblia jest zbiorem świętych pism religijnych w chrześcijaństwie, judaizmie, samarytanizmie. Biblia to antologia – zbiór tekstów o różnej formie – pierwotnie napisany w języku hebrajskim, aramejskim i greckim koine.P>
Sekcja>
<Sekcja>
<h2>Rozdział pierwszy: Genesish2>
<P>Księga Rodzaju jest pierwszą księgą Biblii hebrajskiej i chrześcijańskiego Starego Testamentu. Jego hebrajska nazwa jest taka sama jak jego pierwsze słowo, Bereszit. Księga Rodzaju jest opisem stworzenia świata, wczesnej historii ludzkości, przodków Izraela i pochodzenia narodu żydowskiegoP>
Sekcja>ciało>
HTML>
Wygląda to tak:
7.
The element zawiera niezależne ilustracje, takie jak obrazy lub diagramy. Te ilustracje odnoszą się do treści na stronie głównej. Ryciny opatrzone są podpisami określonymi przez element. The wyjaśnia, o czym jest obraz. The
HTML><HTML>
<ciało>
<główny>
<Sekcja>
<h1>Części komputerah1>
<P> Istnieje kilka części, które współpracują ze sobą, tworząc komputerP>
<postać>
<imgźródło=„jakiś-url.jpg”alt="mysz komputerowa">
<opis rysunku>To jest mysz komputerowaopis rysunku>
postać>
Sekcja>
główny>
ciało>
HTML>
Możesz iść dalej i uczyć się jak tworzyć responsywne obrazy w HTMLu.
The Element HTML zawiera informacje w dolnej części strony internetowej. Jest przeciwieństwem tzw element. The mogą zawierać informacje o właścicielu strony. Obejmuje to dane dotyczące praw autorskich lub linki do dodatkowych informacji na stronie.
HTML><HTML>
<ciało>
<główny>
<Sekcja>
<h1>Części komputerah1>
<postać>
<imgźródło=„jakiś-url.jpg”alt="mysz komputerowa">
<opis rysunku>To jest mysz komputerowaopis rysunku>
postać>
Sekcja>
główny>
<stopka>
<P> Wyprodukowane przez ComputerTech © 2023P>
stopka>
ciało>
HTML>
Powyższy kod dodaje stopkę do pliku Części komputera stronę, jak pokazano na poniższym obrazku.
Dlaczego warto używać semantycznych elementów HTML?
Używanie semantycznych elementów HTML nadaje kontekst kodowi. Każdy, kto spojrzy na kod, z łatwością go zrozumie. Tagi ułatwiają stylizowanie elementów i współpracę nad projektami.
Możesz używać semantycznego HTML z bibliotekami frontendowymi i frameworkami. Większość nowoczesnych przeglądarek internetowych preferuje semantyczne elementy HTML od elementów tradycyjnych. Zacznij używać semantycznego HTML i zobacz, jak Twój kod wygląda nowocześnie, czytelnie i dobrze się prezentuje.