Platný html. Rozšíření prohlížeče. Chyby a varování CSS
Ahoj, drazí přátelé! Jsem rád, že tě vidím na mém blogu! Dnes budeme mluvit o HTML platnost na webu jako celku a jeho samostatné stránky. Platnost je soulad kódu s určitými standardy. World Consortium pracuje na vývoji webových standardů Široká síť(W3C) je mezinárodní společenství organizací, zaměstnanců a veřejnosti.
Posláním konsorcia je uvolnit plný potenciál World Wide Web vývojem a implementací protokolů a směrnic, které umožňují dlouhodobý růst internetu.
Oficiální web W3C poskytuje velmi užitečné online nástroje pro webmastery, jedním z nich je validátor – tento bezplatná služba, která vám umožní zkontrolovat, zda web dodržuje moderní webové standardy.
Bohužel služba je zcela anglický jazyk, ale pokud trochu víte o vývoji a rozložení, jistě pochopíte jeho podstatu a poselství 😉
Již brzy domovská stránka Existují tři karty:
Chcete-li spustit analyzátor, musíte se přepnout na požadovanou kartu jako příklad, zvážím kontrolu podle adresy URL. Skryto pod odkazem Další možnosti další možnosti, kliknutím na něj získáte přístup k nastavení:
- Character Encoding - kódování znaků. WordPress používá UTF-8, ale můžete ponechat výchozí hodnotu „Detekovat automaticky“. automatická detekce kódování.
- Typ dokumentu - typ dokumentu (HTML, XHTML, SVG atd.). Zaškrtněte políčko Pouze v případě, že chybí, pokud na stránce není určen typ dokumentu a je třeba jej zadat ručně pro ověření.
- Vypisovat zprávy postupně - zobrazí chyby a varování v sekvenčním seznamu;
- Group Error Messages by Type - seskupení chyb a varování podle typu;
- Zobrazit zdroj - zobrazí zdrojový kód;
- Zobrazit obrys - zobrazí strukturu dokumentu;
- Clean up Markup with HTML Tidy - čištění značek pomocí HTML-Tidy;
- Ověření chybových stránek – zkontrolujte stránky s chybami, například chyby 404;
- Podrobný výstup - detailní výstup. Abych byl upřímný, při aktivaci této možnosti jsem nezaznamenal žádný rozdíl, pokud víte, co to dělá, podělte se o to v komentářích, budu velmi vděčný.
Když jsou všechna nastavení nastavena, začněte stisknutím tlačítka Kontrola HTML validátor. Pokud dokument neobsahuje žádné chyby, zobrazí se následující zpráva:
Kontrola dokumentů dokončena. Žádné chyby nebo varování k zobrazení.
Přeloženo do ruštiny to znamená: „Ověření dokumentu bylo dokončeno. Nebyly nalezeny žádné chyby ani varování." Skvělý!
Pokud dokument neprojde ověřením, uvidíme jednoduchý nápis o jeho dokončení:
A samozřejmě seznam zpráv, které obsahují informace o chybách a varování s vysvětlením, stejně jako odkazy na konkrétní linky dokumenty, ale pouze v případě, že byla povolena možnost Zobrazit zdroj.
Níže uvedený snímek obrazovky ukazuje fragment kontroly hlavní stránky Yandex. Je zvláštní to vidět, ani jsem to nečekal, protože sám Yandex se podílí na vývoji standardů W3C... No, no, je opravdu těžké dodržet absolutně všechny standardy, zvlášť u tak velkého portálu .
Na začátku své cesty Free Webmaster Blog obsahoval spoustu chyb a varování. Jak jsem studoval, podařilo se mi jejich počet snížit a časem se jich úplně zbavit. Od této chvíle se budu držet standardů W3C, i když některé pluginy přidávají mouchu... Čas ukáže!
Tak proč bychom měli platný kód? Validace webových dokumentů - důležitý krok, což může výrazně pomoci zlepšit a zajistit jejich kvalitu a také ušetřit spoustu času a peněz. Někteří odborníci to tvrdí správný kód může mít příznivý vliv na Výsledky vyhledávání! Otestujte své stránky a sdílejte své výsledky!
Ahoj všichni!
Kontrola platnosti HTML kódu je nezbytná, protože vyhledávací roboti vidí pouze HTML kód. Z tohoto důvodu je vhodné přenést kód webu do plná objednávka. Pomohou nám s tím speciální online služby, které kód kontrolují a konkrétně upozorňují na chyby.
Jednou z těchto služeb je validator.w3.org, která je pravděpodobně nejlepší. Je celý v angličtině, takže někteří mohou mít problémy s ním pracovat, ale nelekejte se: validátor vám ukáže jak číslo řádku, tak samotnou chybu.
Platný kód je kód, který splňuje všechny standardy.
Na lekci budete potřebovat následující materiály:
Výše zmíněná online služba kontroluje HTML kód online na celém webu. Stačí zadat doménu vašeho webu a kliknout na tlačítko „Zkontrolovat“, takže začnete kontrolovat HTML kód webu.
Validátor také poskytuje jeden velmi zajímavá příležitost— kontrola souborů webu s místní počítač. Podle mého názoru bude tento nástroj užitečný pro ty, kteří vytvářejí webové stránky na míru. Před odesláním objednávky je potřeba si vše znovu zkontrolovat, protože chcete, aby byli lidé s vaší prací vždy spokojeni. Soubory můžete zkontrolovat na kartě „Ověřit nahráním souboru“: 
Služba W3c Validator mi ukázala dvě chyby a dala mi 8 varování. Pokusím se je opravit a ukážu vám, jak se to dělá. 
Oprava chyby „Styl prvku není v tomto kontextu povolen jako podřízený prvek prvku div. (Potlačení dalších chyb z tohoto podstromu.)“. Tato chyba mi říká, že není potřeba specifikovat styly v HTML kódu, konkrétně v tagu. Proto je potřeba styly, které jsou zapsány v tomto bloku, přenést do souboru style.css a je to.
Validátor také ukazuje, kde přesně je chyba: 
Tímto způsobem můžete najít a opravit chyby HTML kódu. Stránky se však neskládají pouze ze značkovacího kódu, ale také z CSS, takže kontrolujeme také kaskádové styly webového zdroje.
Kontrola platnosti kódu CSSPlatnost kódu CSS můžete také zkontrolovat ve validátoru W3c. Můžete to udělat pomocí tohoto odkazu. Princip fungování je stejný: zadáte adresu URL webu nebo vyberete soubor v počítači a kliknete na tlačítko „Zkontrolovat“.
Na rozdíl od stejného HTML validátoru je CSS validátor v ruštině.
Na CSS checker kód pro platnost, služba problémy velký počet chyby a varování. Dostal jsem 23 chyb a až 281 varování. Na první pohled se to může zdát hodně a může vás to i vyděsit, ale většina z nich zadané chyby a varování se zobrazují pouze proto, že služba nezná určité vlastnosti, které platí pro různé prohlížeče.
V mém případě je většina z 281 varování vlastnostmi CSS pro normální zobrazení různé prohlížeče:
Štítky servisních pozic jako „ neznámé rozšíření dodavatele." Pokud tedy při kontrole souborů CSS uvidíte velké množství takových chyb, neznepokojujte se. Vše je v pořádku.
Nebudu uvádět nejčastější chyby a způsoby, jak je odstranit, protože řešení každého se mohou lišit a musíte se podívat na samotný HTML kód, abyste pochopili, co se děje.
Pokud nemůžete vyřešit chybu, podělte se o problém v komentářích k lekci, možná společně najdeme řešení.
Doufám, že lekce, které byly zveřejněny během tohoto týdne, byly pro vás užitečné a pomohly při řešení určitých problémů.
Tak teď sbohem!
Předchozí článekDalší článek
Všechny služby prezentované v tomto extrémně užitečný výběr pomoci webdesignérovi otestovat jeho stránky z hlediska souladu se standardy a obecně uznávanými normami webových vývojářů. Kontrolovat můžete zejména správnost HTML kódu stránky, CSS styly, celosvětovou dostupnost stránek, přístupnost pro mobilní zařízení, extrémní zatížení webu, rychlost načítání stránky, jak web vypadá v různých prohlížečích a zejména v Internet Exploreru.
1. Kontrolní odkaz
Zkontroluje web nebo stránku, zda neobsahuje nefunkční odkazy 
2. Kontrola URL
Ověřuje dostupnost stránek v různé body zeměkoule. 
3. Mobilní kontrola
Kontroluje dostupnost webu pro mobilní zařízení a zobrazuje seznam chyb a komentářů. 
4. Jednorožec
Několik testů pro web, zejména HTML 1.0 a ověření zdroje. 
5. CSS validátor
Ověřování kaskádových stylů (CSS) a (X)HTML dokumentů. 
6. RSS kanál Validátor
Kontrola syntaxe kanálů RSS. 
7. Přístupnost se stylem
Testuje web na shodu se standardy WCAG 1.0. 
8. Barevný kontrast
Kontroly barevný kontrast mezi předním a zadním prvkem webu. 
9. WDG HTML Validator
HTML validátor webových stránek. 
10.Dr. Kontrola ověření webu Watson
Komplexní kontrola stránek v několika oblastech: HTML, odkazy, odkazy na obrázky, rychlost načítání, SEO. 
11. Kontrola robotů
Služba pro kontrolu souboru robots.txt. 
12. Firebug Firefox Rozšíření
Rozšíření pro Firefox se sadou testovacích nástrojů. 
13. Náraz zatížení
Testování webu v extrémní podmínky zvýšené zatížení na webovou stránku. 
14.Accessibility-Checker
Další služba pro testování webu na shodu s normami. 
15. Viewlike.us - služba nefunguje
Ukazuje, jak web kdy vypadá různá rozlišení obrazovka. 
Ahoj všichni. Do Petrohradu jsem se opět vrátil po 3 týdnech za polárním kruhem. A tady je všechno stejně šedé a ponuré :(
Dnešní lekce je pro pokročilé webmastery. Nedoporučuji, aby začátečníci pochopili tak obtížné téma sami, je lepší si přečíst příspěvky v sekci „“. Článek zmínil, že jedním z kritérií kvality tématu je platnost jeho kódu.
V obecný obrys Dal jsem definici tento výraz. Ale myslím, že stojí za to se na to podívat podrobněji, což je to, co uděláme v dnešním článku.
Platnost v v obecném smyslu toto slovo znamená soulad s normami. V případě internetu pravidla a standardy pro rozvržení stránek a tvorbu kódu stanovuje W3C. Zakladatelé této organizace stáli u zrodu vývoje prvních verzí HTML (Hyper Text Markup Language, popř. hypertextové označení) a stali se průkopníky World Wide Web, který si postupně získal obrovskou oblibu. Tento objev patří siru Timothymu Johnu Berners-Leeovi spolu s Robertem Caillotem. Bernes-Lee předtím dnes je hlavou W3C ( Celosvětově Web Consortium, World Wide Web Consortium) a tvůrce trendů v této oblasti.
Pomocí značek HTML bylo možné vytvářet webové stránky a byly vytvořeny prohlížeče, které je rozpoznávaly ve formě známé uživatelům. W3C zavedlo řadu standardů, které musí dokumenty na webu splňovat, aby je všechny prohlížeče mohly správně rozpoznat. Po celou dobu vývoje internetu se mezi tvůrci vedly války o nadvládu. Někteří z nich se dokonce pokusili zavést vlastní nové standardy, ale W3C si díky svému vývoji dokázalo udržet roli zákonodárce v pravidlech pro tvorbu kódu. V HTML verze 3 podpora CSS (Cascading Style Sheets, popř kaskádové tabulky styly). Zpočátku byly styly, barvy a tvary specifikovány přímo v html kódu, ale Tvorba CSS výrazně zjednodušil tento úkol, odlehčil zdrojový kód a tím pádem i dobu načítání stránky. Nejnovější verze– to je HTML 5, které se stává stále aktuálnější. Na dlouhou dobu jeho místo zaujal Html 4.01 (od roku 1999).
Tento historický odkaz je poskytován proto, abyste lépe porozuměli tématu dnešní recenze – ověřování webových stránek. Pokud přejdete na oficiální web W3C v sekci „Standardy“, uvidíte celý seznam podsekcí se standardy. Zde můžete například vidět aktuální stav v HTML:
Pro každý z pododstavců existují dlouhé seznamy norem, které definují ten či onen atribut, prvek současná verze kód. Zde je například neúplný obsah pro HTML 5:
Existuje mnoho pravidel, jak chápete. Chcete-li zkontrolovat, zda je váš web v souladu s nimi, můžete použít speciální validátory webu.
Než však zvážíme jejich práci, pojďme zjistit, jak důležité je tuto operaci provést.
Měl by být web platný?V této otázce neexistuje shoda, ale existují objektivní důvody, které naznačují, že je nutné zkontrolovat validaci webu.
První věc, na kterou byste si měli dát pozor, je tzv. cross-browser kompatibilita webu. Tito. V ideálním případě by se stránka měla zobrazovat rovnoměrně ve všech prohlížečích. V v tomto případě Soulad se standardy W3C zaručuje tuto možnost.
Za druhé, roboti vyhledávačů rozpoznávají html kód pomocí stejných parametrů jako prohlížeče. Tito. pokud váš kód obsahuje chyby, např. neuzavřené značky, nefunkční odkazy, nebo nefunkční struktura, to vše může ovlivnit indexování webu vyhledávací roboty. Což znamená hrubé chyby v kódu může snížit pozici zdroje ve výsledcích vyhledávání.
Jak jsme však již viděli, W3C má spoustu pravidel a někdy není možné všechna dodržet. Proto je v této věci lepší držet se středu: nejprve opravte hrubé chyby. Je důležité dodržovat správnou syntaxi, kontrolovat vnoření značek a udržovat jejich správnou sekvenci a strukturu.
Validátory kódu HTML a CSSJe lepší zajistit dodržování pravidel hned od začátku. Hned v první fázi výběru WordPress témata U svého blogu věnujte čas kontrole platnosti kódu HTML a CSS. Je žádoucí, aby html kód a validátor css zpočátku přinesly následující výsledek:
Po instalaci pluginů a doplňků také zkontrolujte blog, abyste okamžitě identifikovali problémy a jejich zdroje.
Pro kontrolu ověření stránky existují různé online služby. Nejspolehlivější a nejúplnější z nich jsou validátory W3C.
Odkazy na ně najdete na hlavní stránce oficiálního webu – www.w3.org 
Unicorn je kombinovaný validátor v ruštině (má funkci přepínání jazyků), který poskytuje informace o všech parametrech webu najednou.
Zadejte adresu URL webu a klikněte na „Zkontrolovat“.
Vpravo je počet chyb (červený kříž) a varování (žlutý vykřičník).
Vidět detailní informace chyby lze nalézt v rozevíracím seznamu pod každou možností.
Html validátor kontroluje chyby pro stránku zadanou adresou URL, nikoli pro celý web jako celek.
Podrobnější informace o chybách s popisky lze získat kontrolou ověření css a html kód v samostatných programech.
Takto vypadá popis chyb a jejich příčin v html validátoru:
Jak vidíte, informace jsou poskytovány v angličtině. Každá chyba nebo varování je doprovázeno číslem řádku zdrojového kódu, ve kterém se nachází (řádek 381, řádek 652). Nejprve je potřeba opravit chyby (červená ikona). Pokud nevíte, co je tato chyba a jak ji opravit, zkuste vyhledat informace na specializovaných fórech nebo se zeptejte v komentářích k tomuto článku.
Opět platí, že html validátor diagnostikuje zdrojový kód a chyby je třeba opravit v odpovídajících souborech vašeho blogu. Jak je najít, jsme probrali v článku o.
Tento validátor má schopnost povolit další možnosti:
- Chyby můžete seskupit podle jednoho typu (Seskupit chybové zprávy podle typu);
- zobrazit veškerý zdrojový kód, který služba použila při analýze (Zobrazit zdroj);
- zkontrolujte stránky, které generují chybu (Ověřte chybové stránky).
Kromě toho vám povolená funkce „Vyčistit značky pomocí Html-Tidy“ umožňuje vidět váš kód s chybami opravenými podle verze programu Html-Tidy. W3C však na to upozorňuje tento program není jejich vývoj, a proto neposkytují záruky, že kód bude správný. nicméně tento kód může sloužit jako pomůcka při opravě chyb.
Podobnou možnost opravy chyb poskytuje také validátor kódu CSS W3C. Není potřeba to povolovat, funguje to standardně.
Kromě online validátorů stránek je také možné nainstalovat rozšíření pro FireFox, které bude kontrolovat chyby v zdrojový kód stránky přímo v prohlížeči. Jmenuje se „Html Validator“.
Ještě připomenu, že kromě html a css existuje ještě . Jeho přítomnost je důležitá pro optimalizaci pro vyhledávače.
Dnešní téma je docela těžké. Když začnete opravovat chyby, pravděpodobně budete mít mnoho otázek. Je vhodné opravit to, v čem jste si jisti, abyste neporušili stránky. Nezapomeňte to udělat před provedením změn. Sbohem!
P.S.
Onehdy jsme koupili letenky na zářijovou Kamčatku za zázračnou cenu 16 600 za osobu tam a zpět. Je to velmi levné, takové ceny už dlouho nebyly. Pokud by měl někdo zájem, myslím, že je ještě čas si takové lístky ulovit. S turistickým klubem PIK budeme lézt na sopky a obdivovat divokou nedotčenou přírodu.
Nelze spoléhat na neplatný kód.
Hlavním argumentem proti validaci je, že je příliš přísná a neodpovídá tomu, jak prohlížeče ve skutečnosti fungují. Ano, HTML může být neplatný, ale všechny prohlížeče mohou s některým neplatným kódem zacházet stejně. Pokud jsem ochoten převzít odpovědnost za špatný kód, který napíšu, pak se nemusím starat o kontrolu. Jediné, čeho se obávám, je, že to funguje. Moje pozice Toto je jeden z mála případů, kdy veřejně mluvím o svém postoji k něčemu. Vždy jsem patřil mezi odpůrce validace na základě skutečnosti, že validátor je příliš přísný na to, aby byl praktický skutečné aplikace. Existují věci, které podporuje většina prohlížečů (in, after), které jsou neplatné, ale někdy jsou velmi nutné pro správnou funkci. Vlastně můj největší problém Validace je kontrola č. 4 (pro cizí prvky). Jsem zastáncem používání vlastních atributů v HTML tagy k uložení dalších metadat souvisejících s konkrétním prvkem. V mém chápání je to například přidání atributu foo, když mám data (bar), ke kterým potřebuji přiřadit. Někdy lidé přetěžují existující atributy pro tyto účely, jen aby prošli ověřením, i když atribut bude použit pro jiné účely. Nedává mi to smysl.
Tajemství prohlížečů spočívá v tom, že nikdy nekontrolují, zda HTML kód odpovídá zadanému DTD. Doctype, který jste zadali v dokumentu, přepne analyzátor prohlížeče na specifický režim, ale nenačte se tím doctype a neporovná se s ním kód. To znamená, že analyzátor prohlížeče zpracovává HTML s určitými předpoklady neplatnosti, jako jsou samouzavírací značky a blokové prvky uvnitř řetězců (jsem si jistý, že existují další).
V případě vlastních atributů všechny prohlížeče analyzují a rozpoznávají syntakticky správné atributy jako platné. To umožňuje přístup k těmto atributům prostřednictvím DOM s pomocí Javascriptu. Proč bych se tedy měl starat o platnost? Své atributy budu nadále používat a jsem velmi rád, že je HTML5 formalizuje.
Nejlepším příkladem technologie, která má za následek neplatný HTML, ale přináší obrovský rozdíl, je ARIA. ARIA funguje přidáním nových atributů do HTML 4. Tyto atributy poskytují další sémantický význam HTML prvky a prohlížeč jsou schopny tuto sémantiku přenést pomocná zařízení pomáhat lidem s postižením. Všechny hlavní prohlížeče nyní podporují značení ARIA. Pokud však použijete tyto atributy, budete mít neplatný kód HTML.
Co se týče vlastních značek, myslím, že není nic špatného na přidávání syntakticky správných nových značek na stránku, ale nevidím v tom velkou praktickou hodnotu.
Aby byl můj postoj jasný: Věřím, že kontroly č. 1 a č. 2 jsou velmi důležité a měly by být prováděny vždy. Kontrolu č. 3 považuji také za důležitou, ale ne tak důležitou jako první dvě. Kontrola #4 je pro mě velmi sporná, protože ovlivňuje uživatelské atributy. Domnívám se, že maximálně by měly být vlastní atributy ve výsledcích ověření označeny jako varování (nikoli chyby), abych mohl zkontrolovat, zda jsem název atributu zadal nesprávně. Označení vlastních značek jako chyb je možné dobrý nápad, ale má také určité problémy, například při vkládání obsahu do jiných značek - SVG nebo MathML.
Validace kvůli validaci? Myslím, že validace kvůli validaci je extrémně hloupá. Platné HTML pouze znamená, že všechny 4 kontroly prošly bez chyb. Existuje několik důležitých věcí, které platný HTML nezaručuje:- platné HTML nezaručuje dostupnost;
- Platné HTML nezaručuje dobré UX (uživatelskou zkušenost);
- Platné HTML nezaručuje fungující webové stránky;
- Platné HTML nezaručuje správné zobrazení webu.
Vím, že toto je pro mnohé kontroverzní téma, proto se prosím v komentářích zdržte čistě emotivních emocí.
UPD: díky za karmu, přesunul jsem ji do tématické. Zopakuji slova autora: Chápu, že jde o kontroverzní téma, ale zdržte se prosím čistě emotivních komentářů a argumentujte.
