HTML5 to najnowszy i najlepszy Co to jest HTML5 i jak zmienia sposób przeglądania? [MakeUseOf wyjaśnia] Co to jest HTML5 i jak zmienia sposób przeglądania? [MakeUseOf wyjaśnia] W ciągu ostatnich kilku lat możesz od czasu do czasu słyszeć termin HTML5. Niezależnie od tego, czy wiesz coś na temat tworzenia stron internetowych, czy nie, koncepcja może być nieco mglista i myląca. Oczywiście… wersja najczęściej używanego języka znaczników w Internecie. Istnieją pewne duże zmiany w stosunku do ostatniej wersji języka, a jeśli ich nie używasz, brakuje Ci naprawdę fajnej funkcjonalności.

Nie mamy miejsca na pokrycie każdego nowego elementu w piątej wersji HTML, ale te dziewięć jest jednymi z najważniejszych. Aby uzyskać więcej informacji o nowych elementach i interfejsach API w HTML5, koniecznie sprawdź W3Schools.

Wprowadzenie do elementów semantycznych

Podobnie jak większość Internetu, HTML5 przesunął się na semantykę. Teraz zamiast tagów używanych do formatowania, są one również używane do informowania przeglądarek i wyszukiwarek Top 7 semantycznych wyszukiwarek jako alternatywa dla Google Top 7 semantycznych wyszukiwarek jako alternatywa dla Google, co oznaczają.

Na przykład,

po prostu informuje przeglądarkę, że zawiera akapit. , które omówimy za chwilę, informuje przeglądarkę, że zawiera główną zawartość strony.

Sieć semantyczna wciąż się rozwija, a my dopiero zaczęliśmy zarysowywać powierzchnię tego, co potrafi. HTML5 pomaga wprowadzić znaczniki semantyczne Czym jest znacznik semantyczny i jak zmieni Internet na zawsze [technologia wyjaśniona] Czym jest znacznik semantyczny i jak zmieni internet na zawsze [technologia wyjaśniona] w znacznie większej części Internetu, i że może być dobry tylko dla przyszłości przetwarzania semantycznego.

1.

Tag określa “niezależna, samodzielna treść.” Najłatwiejszym przykładem jest oczywiście artykuł. W tym konkretnym artykule otwieramy tag przed wprowadzeniem i zamykamy go po zakończeniu.

 Cały tekst w oddzielnej sekcji. 

Ale są też inne sposoby, aby z niego skorzystać. Na przykład wiele blogów kulinarnych zawiera osobiste historie o tym, jak powstał przepis lub dlaczego jest on ważny dla pisarza. Następnie następuje sam przepis. Można argumentować, że każdy z tych elementów może być samodzielny.

Na forum każdy post lub wątek można uznać za samodzielny i każdy może być oznaczony własnym tagiem. W przeważającej części będzie on używany w głównej treści strony. Pamiętaj jednak, że możesz także używać go bardziej twórczo.

2).

Ściśle związany z jest. To definiuje a “tematyczne grupowanie treści, zazwyczaj z nagłówkiem.” Więc będzie w środku… właśnie?

Niekoniecznie. W3 wskazuje, że zależy to od struktury Twojej witryny. Możesz mieć niezależną treść w różnych sekcjach swojej strony (na przykład na pierwszej stronie witryny z wiadomościami). Możesz mieć sekcje w tym artykule.

  
Dlaczego potrzebujesz DAC
 
Wszystko brzmi lepiej.
   
Jak skonfigurować DAC
 
Oto, co musisz zrobić… 
 

Możesz nawet mieć sekcje w sekcjach, jeśli pasują one do Twojej strony. Pamiętaj, że sekcja jest po prostu “tematyczne grupowanie treści,” i znajdziesz wiele miejsc do korzystania z niego.

3).

Ten element “powinien być używany jako pojemnik na treści wprowadzające.” Krótko mówiąc, jest to część strony, która pomaga ludziom zrozumieć, co zamierzają przeczytać.

Ale nie daj się zwieść - możesz użyć tego kontenera więcej niż raz. Możesz na przykład użyć go do zidentyfikowania tytułu strony i akapitu wprowadzającego posta na blogu. Ale możesz też użyć go do oznaczenia treści wprowadzających dla każdej sekcji.

  
Wszystko, co musisz wiedzieć o przetwornikach cyfrowo-analogowych
 
Oto przydatne wprowadzenie do przetworników DAC… 
  Reszta twojego artykułu jest tutaj.

Sekcje nagłówka zwykle zawierają co najmniej jeden tag nagłówka - H1, H2 itd. Nie muszą, ale generalnie, jeśli używasz tagu nagłówka, istnieje dobry zakład, że dołączasz treść nagłówka.

4.

W3 mówi, że znaczniki stopki zwykle zawierają “autor dokumentu, informacje o prawach autorskich, linki do warunków użytkowania, dane kontaktowe itp.” Możesz myśleć o tym jak o “gospodarowanie” rzeczy.

 Prawa autorskie: MakeUseOf, 2017. Skontaktuj się z nami 

Dokumentacja stwierdza również, że na swojej stronie możesz mieć więcej niż jedną sekcję stopki. Prawdopodobnie dobrym pomysłem jest jednak przechowywanie wszystkich tych informacji w jednym miejscu.

5.

Ten tag zawiera łącza nawigacyjne dla danej strony. Pamiętaj, że tylko sekcja nawigacji otrzymuje ten tag, a nie wszystkie linki na twojej stronie. Jest przeznaczony do pasków nawigacyjnych i podobnych narzędzi.

 Strona główna About 

To naprawdę prosty tag - to wszystko. Użyj go, aby zdefiniować sekcję nawigacji i nie używaj go ponownie na swojej stronie.

6.

Jednym z najciekawszych nowych elementów HTML5 jest bok. W3 podaje nieco nieprzydatną definicję “niektóre treści oprócz treści, w których są umieszczone.”

Krótko mówiąc, na bok jest wszystko, co jest powiązane (ale oddzielnie) od otaczających informacji. Może to być pasek boczny, który dodaje szczegółów do treści. Gdy jest używany w zestawie tagów, zapewnia dodatkowe informacje, które nie są konieczne do zrozumienia głównej treści.

Na przykład, gdybyśmy w tym artykule umieścili pasek boczny zawierający informacje o historii HTML5, byłoby to na marginesie.

Ale tag może być również używany poza treścią artykułu. W takim przypadku jest zwykle używany do informacji związanych z witryną. Możemy na przykład dołączyć pasek boczny:

 Główny artykuł znajduje się tutaj. MakeUseOf koncentruje się na tworzeniu połączeń między użytkownikami, komputerami, urządzeniami i Internetem poprzez edukację. Artykuł jest kontynuowany tutaj.

Ponieważ ten znacznik ma wiele zastosowań, może być mylący. Jeśli pamiętasz, że to jest “zawartość wtórna” i że nie zawsze musi to być pasek boczny, będziesz miał lepszy pomysł, jak go używać.

7.

Wiele stron internetowych zawiera informacje, które muszą być wyświetlane, ale nie w widocznym miejscu. Może są to informacje o prawach autorskich do zdjęcia. Lub drobny druk na konkursie. Tego rodzaju informacje są dokładnie tym, do czego służy tag details.

Korzystając ze znacznika szczegółów, tworzysz ukryty tekst, który można łatwo wyświetlić. Oto przykład:

Oto bardziej szczegółowe informacje, których nie potrzebujesz od razu.

Wystarczy kliknąć strzałkę, aby uzyskać szczegółowe informacje. Prosty. Stworzenie go jest równie łatwe. Oto kod użyty w powyższym przykładzie:

  Kliknij tutaj, aby zobaczyć informacje. Oto bardziej szczegółowe informacje, których nie potrzebujesz od razu. 

Tag definiuje zdanie, które zostanie pokazane, a pozostałe treści będą ukryte. Pamiętaj, że możesz używać innych tagów w sekcji szczegółów: nagłówków, sekcji i tak dalej.

Są też inne fajne rzeczy, które możesz zrobić z HTML 7 Fajne efekty HTML, które każdy może dodać do swojej witryny 7 Fajne efekty HTML, które każdy może dodać do swojej strony internetowej Nie rozpaczaj! Nie musisz znać CSS ani PHP, aby zbudować fantazyjną stronę. Wystarczy stary dobry HTML i umiejętność kopiowania i wklejania. , nawet jeśli nie znasz dużo CSS lub JSON.

8–9. i

Nie martw się, tag, którego używasz od lat, nie zniknie. obchodzi znacznik obrazu i informuje przeglądarkę, że jest to samodzielny obraz, schemat, lista kodów lub inna postać.

Jeśli rysunek zostanie usunięty ze strony, nie wpłynie to na przepływ treści.

wchodzi w znacznik postaci i określa podpis obrazu. Może to wyglądać mniej więcej tak:

  To jest nasze logo! 

Daje to wbudowany sposób dodawania podpisu do zdjęć. Nie musisz już przechodzić przez CMS.

Wykorzystaj moc HTML5

Nowe elementy w HTML5 dodają dużo mocy, zwłaszcza do celów semantycznych. Istnieją dodatkowe elementy dotyczące formatowania, pomiarów skalarnych, postępu zadań i innych. Możesz zobaczyć wszystkie nowe elementy na W3Schools.

Ale jeśli opanujesz te dziewięć, będziesz na dobrej drodze do dobrego wykorzystania HTML5. A jeśli dopiero zaczynasz korzystać z HTML, zapoznaj się z poniższymi przykładami kodu 17 prostych przykładów kodu HTML, których możesz nauczyć się w 10 minut 17 prostych przykładów kodu HTML, których możesz nauczyć się w 10 minut Chcesz stworzyć podstawową stronę internetową? Naucz się tych przykładów HTML i wypróbuj je w edytorze tekstu, aby zobaczyć, jak wyglądają w przeglądarce. !

Czy zacząłeś używać HTML5? Jakie nowe elementy są najbardziej przydatne? Podziel się swoimi przemyśleniami w komentarzach poniżej!