Elementy semantyczne HTML
W przeciwieństwie do tego, elementy nie-semantyczne przedstawiają tylko treść, zamiast ją definiować. takie jak i tagi. Biorąc pod uwagę znaczenie elementów semantycznych HTML, opracowaliśmy ten przewodnik, który przedstawia listę elementów semantycznych HTML i ich użycie.
Elementy semantyczne HTML
Poniżej znajduje się kilka powszechnie używanych elementów semantycznych HTML
- : Główna zawartość dokumentu HTML jest opisana przy użyciu tego znacznika i zaleca się użycie tylko raz w całym dokumencie.
- : Ten element semantyczny pokazuje, że artykuł zostanie zdefiniowany za pomocą tego tagu i używany do pisania postu na blogu, artykułów z wiadomościami itp
- : Dodaje nową sekcję na twojej stronie, która może zawierać również różne inne tagi.
- : Ten element zdefiniuj część nagłówka Twojej zawartości i może być używany do nagłówka sekcji, nagłówek artykułów.
- : Jak sama nazwa kieruje, służy do dodania stopki do dowolnej treści Twojej strony internetowej.
- : Ten element służy do dodawania dodatkowych szczegółów do treści, a przeglądarka może ukryć/pokazać te szczegóły zgodnie z potrzebami.
- : Ten element definiuje treść opisaną w tagu. To tworzy nagłówek i kliknięcie tego nagłówka, można zobaczyć zawartość znacznika szczegółów.
- : Jak pokazuje nazwa, ten element pozwala dodać obraz do strony internetowej za pomocą elementu inline .
- : Ten element jest praktykowany, aby dodać podpis do dowolnej figury i jest używany wewnątrz elementu.
Z powyższych informacji uzyskałeś wstępny opis różnych elementów semantycznych HTML. W nadchodzących przykładach zapewniliśmy użycie kilku elementów semantycznych w kilku scenariuszach.
Przykład 1: Używanie i
I są połączone elementy semantyczne HTML, a następujący kod służy do przedstawienia ich użycia.
Linuxhint
Zapewnia treści dla użytkowników Linux, użytkowników systemu Windows, programistów
W powyższym znaczniku deklaruje się element, w którym znacznik jest osadzony.
Wyjście:
Cała zawartość jest zamknięta za pomocą znacznika, a znacznik służy do zdefiniowania nagłówka dla tej zawartości.
Przykład 2: Używanie i
Poniższe wiersze kodu przedstawiają użycie elementu semantycznego.
Ryc. 1: Logo Linuxhint
Powyższy kod jest opisany jako,
- element zawiera i tagi
- służy do połączenia figury umieszczonej w naszym komputerze, a jest dla importowanego podpisu.
- Tag ustawia styl graniczny i szerokość elementu.
Wyjście:
Przykład 3: Używanie i
Poniższy kod ćwiczy wiele znaczników w elemencie.
Pierwsza sekcja
Druga sekcja
Powyższy kod jest opisany jako,
- Zdefiniowano artykuł używający znacznika, który zawiera dwie sekcje
- granica jest ustawiona na solidne i ustawiono wyściółkę 4px
- Każda sekcja ma kropkowaną granicę i margines 2px.
Notatka: Style graniczne, margines, wyściółka jest używana tylko do rozróżnienia aktywnej przestrzeni każdego elementu.
Wyjście:
Obszar wewnątrz stałej granicy jest zawarty przez podczas gdy kropkowane granice pokazują przestrzeń zajmowaną przez każdy element.
Przykład 4: Używanie i
I są zwykle używane do zdefiniowania nagłówka i stopki strony lub elementu mogą je również zawierać. Poniższy kod opisuje, w jaki sposób nagłówek i stopka są zadeklarowane:
nagłówek
Ten kod reprezentuje użycie nagłówka i stopki
Stopka
Kod jest opisany w następujący sposób,
- nagłówek i stopa są zdefiniowane za pomocą i tagu
- akapit jest zadeklarowany między nagłówkiem a stopą
- Kolor tła i styl graniczny nagłówka i stopki są zdefiniowane w metce
Wyjście:
Z powyższych przykładów zrozumiałbyś funkcjonalność różnych elementów semantycznych.
Wniosek
Elementy semantyczne HTML Ich jaźni zawierają cel ich wykorzystania, taki jak ,