Kolejność znaczników <h>

[Remiss]

Ten dział jest o metodach tworzenia stron przyjaznych wyszukiwarkom i stron o poprawnym kodzie,

pomyślałem tu napisać będzie najlepiej

Znalazłem w necie ciekawy, bo rzadko spotykany full liquid/float templat, który dopasowuje się rozmiarem strony do

wielkości okna przeglądarki/ekranu.

Spodobało mi się to też dlatego, że dzięki wyeliminowaniu marginesów wykorzystana jest pełna powierzchnia ekranu, chodzi o eyetracking - więcej treści/reklam w zasięgu wzroku bez scrollowania, powyżej linii zgięcia, czy jak to się nazywa

Słowem - mam na myśli użyteczność, oryginalność, strona już na dzień dobry jest inna od wielu innych spotykanych w necie

Tylko, po spojrzeniu w źródło podstrony zobaczyłem, że tytuły publikacji/posta zaczynają się od znacznika <h3>, powinno chyba <h1>

W sidebarach znaczniki dla "Ostatnie komentarze" "Flickr" mają go wyższy, na dodatek są wyżej w kodzie strony od treści posta

Ogarnęła mnie wątpliwość czy templat jest seo zoptymalizowany,

zdaje się liczy się bardziej to co jest wyżej w kodzie strony i mają wyższe <h>, tutaj publikacje ustępują komentarzom, ostatnim postom i jakimś innym pierdołom z sidebara

Jak w ogóle wyświetla się u Was, ta podstrona https://templatic.com/demos/snippet/?cat=4 chodzi dobrze tylko pod Chrome, a w firefoxie dopiero po wyłączeniu obsługi JavaScript, reszta podstron na Operze, Explorerze, Chromie, FF miałem o.k.

Link do demo: https://templatic.com/demos/?theme=snippet

Łatwo/kosztowne (gdybym zlecił przekodowanie) jest zmienić kolejność w gotowym templacie, czy gra nie warta świeczki, szukać dalej

Choć takich to ze świeczką w ręku szukaj...

[RaVns]

Witaj,

Według mnie, czy powinno czy nie powinno to już kwestia sporna i chyba mało istotna co do tego, jak wielkość h czy 3 czy 2.

Ja bym się tak straszne tym nie przejmował, bo twórca skórki jeśli miał zamyśle h3 to chciał uzyskać wielkość jaka mu odpowiada czyli ok. 12pt, a nie 18, czy 24. Bo wciskanie czegoś na siłę, czyli h3 też nie ma sensu, a nawet źle wygląda. Jakby nie patrzył można by tu manewrować wielkościami czcionek, on w sumie też tak robił?

Patrzyłem na ten szablon i na wpisie np. jego nagłówek dali na h4, a tego flickr na h3.

Zmiany jakie bym wprowadził to ewentualne przeniesienie treści posta powyżej od reszty sidebarów... , i tylko jak cię to dręczy zamianę h4 na h2 i już - a koszt tego powinien być dla kogoś znikomy.

Zaś kategoria w linku : https://templatic.com/demos/snippet/?cat=4 i te dwa obrazki z tekstem zawsze mi się wczytują jeden pod drugim - więc coś tu jest nie tak - pływają koło siebie dopiero kiedy zmienię rozmiar okna przeglądarki i to w : IE8, FF, Chrome, flock, SeaMonkey.

Mówisz, że wyłączyłeś obsługę skryptów, ale po tym zabiegu zapewne treść nie dopasowuje się do okna, a po II to takich rzeczy nie można robić, bo teraz to strony głównie są opierane o JavaScript (jakieś dodateczki itp.), a analitics inne statystyki, reklamy , nie będą ci chodzić.

[Remiss]

No właśnie coś jest skopane z tą podstroną, mi też snipety wyświetlają się jeden pod drugim, takie rozwlekłe, tekst się pod nimi nie mieści

Obsługę Javascript wyłączyłem w ustawieniach FF tylko na czas testu, jasne że bez niego strony jakieś ułomne są, w Gogle szukaj nie działa np. Koło informacji itp.

Ale nawet z wyłączoną Javą strona wczytuje i dopasowuje się normalnie, nawet lepiej bo te rozwalone snipety na podstronie dopiero wówczas prawidłowo się wyświetliły

Przeleciałem pare blogów na WP zaglądając w kod, wszędzie widgety, sidebary, ostatnie komentarze były niżej w kodzie, zaraz po treści posta

Chyba coś jest skopane, nie wiem że profesjonaliści zajmujący się tym zawodowo, sprzedają wiele różnych themów od paru lat takie wałki wypuszczają,

jak myślicie

[RaVns]

Chyba coś jest skopane, nie wiem że profesjonaliści zajmujący się tym zawodowo, (...) - hmm nie wgłębiałem się w tą stronę z skórkami, ale jeśli jest ona pod SEO no to mógłby to zorganizować jak pisaliśmy, a byłoby ciut lepiej

Powiem ci tak, że jeśli już na wstępie zauważyłeś jakieś niedogodności , tu na przeglądarce chodzi tak, gdzieś indziej inaczej to zostaw go i nie ma co, znajdź inny, a jeśli masz możliwość poprawy tych paru rzeczy to możesz zrobić, ale snipety dalej zostaną.

A gdybyś już się decydował na ten czy inny szablon, to jak pewnie wiesz, jeśli nie masz potwierdzenie nagłówka w treści itp. to nic to nie da. Mam na myśli, że dany wpis i tak powinien zawierać jakieś tam twoje słowa kluczowe, pogrubione, wzięte w np. jakiś niższy h 4-6 i tym podobne rzeczy, aby były tematyczne i zgodne z nagłówkiem...

[Remiss]

No właśnie, zwykle tak jest że w demie wszystko odpicowane jest the best, chodzi jak tralala

problemy zaczynają się po zakupie, w środowisku "produkcyjnym"

tu na dzień dobry jest skopane, co dopiero z tym czego nie widać

Swoją drogą, theme PIO chodzi na liqiud

[slawek22]

Ja bym się tak straszne tym nie przejmował, bo twórca skórki jeśli miał zamyśle h3 to chciał uzyskać wielkość jaka mu odpowiada czyli ok. 12pt, a nie 18, czy 24. Bo wciskanie czegoś na siłę, czyli h3 też nie ma sensu, a nawet źle wygląda. Jakby nie patrzył można by tu manewrować wielkościami czcionek, on w sumie też tak robił?

Nie dobiera się tagów pod wielkość czcionek. Od 15 lat do ustalania wielkości liter się stosuje CSS a nie tagi <font> i <hx>, od kiedy to jakiś tag "źle wygląda"?

[RaVns]

Kolego "slawek22" - co rozumiesz pod pojęciem : Od 15 lat do ustalania wielkości liter się stosuje CSS, a nie tagi ??

Z szybkości czytania nie zrozumiałeś mnie - chodziło mi o to, że dobra praktyka tworzenia stron (choćby jeśli chcesz aby strona wyglądała "tak samo" we wszystkich przeglądarkach) nakazuje resetowanie rozmiarów tagów (różnych nie tylko tekstowych),

i dla span czy paragraph ustalamy sobie 1em (czy jak kto woli), a dla np h1 - 2em, h2 - 1.5em, h5 - 1.1em itp.... więc po prostu zachowując jakąś hierarchię.

A na przykładzie kolegi Remiss'a szablonu projektant jednak dla h3 dawał czcionki mniejsze niż dla h4 (to może być znów za szczególne, ale..) - a tak na prawdę chodziło o to by dał h1 (tak chce Remiss) - ale znów h1 pasowałby jednak aby było wiele większe od h4 - a z drugiej strony w kontekście strony to zapewne nie pasowało projektantowi, a chciał mniej więcej być zgodny z tą zasadą hierarchii jaką ja wymieniłem więc zastosował się do czegoś podobnego jak ja.

A naszemu koledze Remiss'owi się to nie podobało jak i to że sama treść posta znajdowałaby się poniżej mało istotnych treści witryny jak sidebar itp.

Więc jednak źle wygląda, aby znacznik h1 = 12pt, a h4 = 24pt, czyż nie?

Mnie taka papranina osobiście się nie podoba, w końcu nie dla jaj zrobili h1-6 i inne rzeczy... Używanie tagów powinno być zgodne z ich pierwotnym przeznaczeniem.

Pozdrawiam ;]

[slawek22]

Mylisz pojęcia. Tagi nie mówią jak ma coś wyglądać, tylko czym jest. To podejście z lat '90-tych, kiedy wielkość i kolor czcionki ustalałeś tagiem <font>. Nie rozumiem, dlaczego na przykład H2 w tekście nie może być większe od H1 w stopce.

h1-6 jest po to, żebyś sobie mógł na przykład automatycznie wygenerować spis treści i oznaczyć tytuły bloków na stronie. Najgorsze co można zrobić to zresetować CSS a potem dobierać tagi w zależności co jak wygląda na stronie.

ale znów h1 pasowałby jednak aby było wiele większe od h4

Nie pasowałoby, żadna specyfikacja o tym nie mówi.

w kontekście strony to zapewne nie pasowało projektantowi

Wiesz, jeśli chodzi o kod to graficy nie mają nic do gadania Właśnie potem wychodzą takie kwiatki, że grafik daje jakieś bzdury do H1, żeby mu się zgadzała wielkość czcionek, albo pisze głupoty w stylu

<ul class='red float border'>
<li class='menu bold'>[...]
<li class='menu bold'>[...]

(ostatnio takie coś grafik wyprodukował, trzeba było skasować i dać programiście).

[Remiss]

nie podoba mi się ta papranina

nie wziąłem templatu, szukam dalej

[RaVns]

Masz rację Remiss , szukaj dalej , czasem trafi się nawet i coś lepszego

Kolego Sławku jak nie rozumiesz pewnych kwesti to pasuje zasięgnąć po jakieś publikacje... a nie pisać i mi wmawiać jakieś rzeczy.

Znaczniki powinno się używać zgodnie z ich przeznaczeniem i tyle.

H1 jest nagłówkiem pierwszego stopnia, niech stoi na górze strony, h2 są podnagłowkami niech ich będzie 4 na stronie a w nich są h6 też niech ich będzie kilka jeśli trzeba. Tabela służy do przedstawiania danych tabelarycznych, a nie tworzenia szablonów strony....

dlaczego na przykład H2 w tekście nie może być większe od H1 w stopce. - a dlaczego tir nie może przejechać przez most o ograniczeniu do 20 ton, bo most nie jest dla niego jak i h1 służy do umieszczania w nim nagłówków itp., a nie spamu w stopkach.

Najgorsze co można zrobić to zresetować CSS a potem dobierać tagi w zależności co jak wygląda na stronie. - widać, że nie masz o tym pojęcia... Zresetować oznacza przystosować znaczniki tak aby wyglądały w każdej przeglądarce tak samo. Czyli jak w FF zdeklarowali pracownicy dla h1 = 2em, a Flock = 1.9 em to ja ustalam sobie wszędzie 2em i tym podobne rzeczy (marginesy itd.).

Ale tobie najwyraźniej obce jest tworzenie stron zgodnych z przeglądarkami i regułami CSS, a także W3C.

No chyba zresetować nie myślałeś, że mówię o zrobieniu tabeli z p, a z div cytatów wielkości 22pt itp.

A co do grafików to prawda, większość ich się na tym nie zna (na kodzie). Plusem jest, że ich strony są zazwyczaj symaptyczne z wyglądu

Najgorsze co można zrobić to zresetować CSS a potem dobierać tagi w zależności co jak wygląda na stronie. - posiadać szablon typu:

* { 
margin:0;
padding:0;
}
body {font: 1em Times, serif; color:black; }


h1 {font-size:2em; line-height:1.25;} 
h2 {font-size:1.5em; line-height:1.25;}
h3 {font-size:1.25em; line-height:1.25;}
h4 {font-size:1.125em;}
h5 {font-size:1em;}
h6 {font-size:.875em;} 
table td { padding-top:.1em;}


p { 
font-size:1em;
line-height:1.25;
color:white;}
img {
  border:0;}
a:hover {
  text-decoration:none;}

itp.

Aby wszystko było ok. Jeśli jesteś osobą, która się z takim czymś nie spotkała to czas najwyższy, a strony będą jak należy

Strony wówczas będą tak samo widziane wszędzie jak i poprawne w stosunku do przeglądarek i wyszukiwarek (mam na myśli nagłówki, paragrafy, pogrubienia - nie zagnieżdżanie i stosowane z ich przeznaczeniem).