Zalety HTML5 w porównaniu z XHTMLHtml5 oferuje bardzo istotną przewagę nad tradycyjnym xhtml, a mianowicie posiada znaczniki do definiowania struktury semantycznej.
Nazywamy ten kod html semantycznym html, gdzie struktura ma sens dla wyszukiwarek i dlatego służy do pozycjonowania SEO. Chodzi o to, aby każda wyszukiwarka była w stanie zrozumieć, czym jest każda część strony internetowej, nawet usuwając całą zawartość.
XHTML nie posiada znaczników pozwalających na definiowanie grup lub bloków elementów w sensie semantycznym.
HTML5 rozwiązuje ten problem, oferując elementy i tagi, które pozwalają nam zdefiniować semantykę strony internetowej, niektóre z nich to między innymi headeR, footer, nav, hgroup, section i article.
Następnie zdefiniujemy najważniejsze w sensie semantycznym:
- nagłówek: Zdefiniuj blok nagłówka strony internetowej i dołącz treść nagłówka.
- nawigacja: definiuje blok reprezentujący menu, dlatego wyszukiwarki, gdy znajdują ten tag, wiedzą, że jest to struktura nawigacji.
- grupa: zdefiniować i pogrupować tytuły, a tym samym nadać każdemu tytułowi inną wagę.
- sekcja i artykuł: Poprzednie elementy, które definiują warstwy div> i są zastępowane przez tagi sekcji i artykułów, które mają bardziej semantyczny sens podczas definiowania sekcji i artykułów w sekcjach.
- na boku: definiuje i grupuje styczne elementy strony internetowej. Oznacza to, że treść, która nie jest najważniejsza, na przykład kolumny boczne lub pasek boczny sieci
- stopka: definiuje i grupuje elementy w stopce strony internetowej.
Korzystanie z HTML5 nie oznacza, że XHTML nie jest już używany, nadal są bardzo dobre w organizowaniu struktury i grupowaniu elementów strony internetowej lub wywoływaniu Jquery, pamiętaj, że HTML5 służy do nadania mu sensu semantycznego, ale w obrębie bloku możesz kontynuować aby użyć dowolnego innego znacznika XHTML. Zobaczmy przykład poniżej
Podtytuł
logo internetowe
Widzimy, że z warstwami zdefiniowano strukturę i wewnątrz nagłówka nagłówka oraz zdefiniowano hgroup do grupowania tytułów, a także warstwę zawierającą logo.
W ten sposób warstwy XHTML pozwalają nam zdefiniować strukturę strony internetowej, aby mieć lepszą organizację dla programisty, następnie XHTML pomaga nam zdefiniować znaczące bloki dla struktury, a HTML5 pozwala nam tworzyć znaczące bloki dla wyszukiwarek i SEO. Jak tag sekcji jest używany w HTML5 dla SEO.
Używanie tagu section jest bardzo podobne do używania warstwy div, z tą różnicą, że sekcja zapewnia sens semantyczny, a wszystkie elementy zawarte w sekcji są związane z semantyką sieci. Ważne jest, aby nie używać sekcji do grupowania elementów w dowolnym bloku, ponieważ musimy pogrupować nonsensowne elementy, aby przypisać style CSS lub jakiś efekt programistyczny.
Jeśli powodem utworzenia bloku jest zastosowanie CSS lub użycie go z kodu ze skryptem, lepiej nie używać HTML5, ponieważ blok nie ma treści semantycznej. W tym przypadku musimy stworzyć blok z warstwą div xhtml. Jak widać w powyższym przykładzie, logo nie ma sensu używać HTML5, ponieważ CSS jest używany do wyświetlania obrazu.
Warstwa lub sekcja DIVJeden ze sposobów myślenia o istotności każdego bloku w celu określenia, czy jest to warstwa div, czy sekcja, jeśli jestem gościem na stronie internetowej.Czy ten blok dostarcza mi przydatnych informacji? Jeśli odpowiedź brzmi tak, będzie to sekcja, jeśli nie warstwa.
Kiedy używamy elementu article, definiujemy blok, który ma sens semantyczny i treść, którą wyszukiwarki mogą indeksować. Znacznik artykułu niekoniecznie odnosi się do notatki tekstowej, może to być produkt, obrazy lub formularz.
Zobaczmy prosty przykład strony internetowej i jej kodu w HTML5:
Honda Civic
Ponieważ w artykule możemy umieścić warstwy lub akapity lub inne elementy xhtml, w niektórych przypadkach zawartość sieci może mieć tylko jeden artykuł, a w przypadku, gdy strona zawiera listy lub katalogi, jak w poprzednim przypadku Autos Online, możemy mieć artykuł dla każdego pokazanego produktu, a także jego własny nagłówek, aby nadać większe znaczenie tytułom.
Możemy również zastosować style css do elementów HTML5, zobaczmy prosty przykład dla bloga internetowego z HTML5 i CSS3.
Tytuł 1
Opublikowano Grudzień 06, 2014 przez Sergio - 3 komentarze
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies mocm vel, fermentum id tellus. Proin metus nienawiść, ultricies eu pharetra dictum, laoreet id nienawiść…
Tytuł 2
Opublikowano 1 grudnia 2014 przez Sergio - 20 komentarzy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies mocm vel, fermentum id tellus. Proin metus nienawiść, ultricies eu pharetra dictum, laoreet id nienawiść…
To pokazuje, że są one nie tylko elementami semantycznymi, ale mogą również stanowić część projektu i struktury strony internetowej.
Ten element służy do zdefiniowania dodatkowego bloku w strukturze strony internetowej, jest to treść lub dane, które chcemy pokazać odwiedzającemu, ale nie jest to główna treść.
Możemy powiązać tag boczny z kolumnami bocznymi lub powszechnie znany jako pasek boczny, który będzie zawierał zawartość dodatkowego menu nawigacyjnego, linki do innych stron internetowych, formularze logowania. Możemy również utworzyć na stronie w artykule, co oznacza, że to, co jest na boku, jest uzupełnieniem treści artykułu, ale nie jest bezpośrednią częścią tej treści, na przykład jeśli mamy artykuł o jakiejś sprzedaży i na boku publikujemy statystyki .
Na koniec pamiętaj o celu Układu:
Co to jest układ strony internetowej?Układ strony internetowej polega na doprowadzeniu projektu graficznego do kodu html, przy pomocy CSS lokalizując każdy odpowiadający mu element za pomocą kodu na stronie internetowej.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
