✅ Оформление с HTML5 за SEO със смислов смисъл

Съдържание

Подзаглавие
Дял 1
Дял 2

Много дизайнери използват разделителни или групиращи елементи html или xhtml в слоеве с div. Проблемът е, че ако имаме по 50 div, разделени всеки със своя клас, определящ структурата на уеб страницата, това ще има смисъл за дизайнера или програмиста, но не и за търсачките, тъй като те не могат да различат какво представлява всеки клас, ако е заглавка , раздел, статия, долен колонтитул и др.
Предимство HTML5 срещу XHTMLHtml5 предлага много важно предимство пред традиционния xhtml и това е, че има тагове за определяне на семантична структура.
Наричаме този html код семантичен html, където структурата има смисъл за търсачките и следователно служи за SEO позициониране. Става въпрос за това, че всяка търсачка може да разбере какво представлява всяка част от уеб страница, дори да премахне цялото съдържание.
XHTML няма тагове, които позволяват дефиниране на групи или блокове от елементи със смислов смисъл.
HTML5 решава този проблем, като предлага елементи и тагове, които ни позволяват да дефинираме семантиката на уеб страницата, някои от тях са headeR, footer, nav, hgroup, section и article, наред с други.
След това ще определим най -важното в семантичен смисъл:

заглавка: Определете заглавния блок на уеб страницата и оградете съдържанието на заглавката.
nav: дефинира блок, който представлява меню, поради което търсачките при намирането на този маркер знаят, че това е навигационната структура.
hgroup: определят и групират заглавия и по този начин придават различно значение на всяко заглавие.
раздел и статия: Предишните елементи, които дефинират div> слоеве и се заменят с тагове на раздел и статия, които имат по -семантичен смисъл при дефиниране на раздели и статии в секциите.
настрана: дефинира и групира тангенциални елементи на уеб страницата. Тоест съдържание, което не е основното, като страничните колони или страничната лента на мрежата
долен колонтитул: дефинира и групира елементи в долния колонтитул на уеб страницата.

Използването на HTML5 не означава, че XHTML вече не се използва, те все още са много добри в организирането на структурата и групирането на елементи на уеб страницата или извикването на Jquery, не забравяйте, че HTML5 служи за придаване на семантичен смисъл, но в рамките на блока можете да продължите да използвате всеки друг XHTML маркер. Нека видим пример по -долу


Подзаглавие
уеб лого

Можем да видим, че със слоевете е определена структурата и вътре в заглавката на заглавката и hgroup са определени за групиране на заглавията, както и слой, който съдържа логото.
По този начин слоевете XHTML ни позволяват да дефинираме структурата на уеб страницата, за да имаме по -добра организация за програмиста, след това XHTML ни помага да дефинираме смислени блокове за структурата, а HTML5 ни позволява да създаваме смислени блокове за търсачките и SEO. Как маркерът на секцията се използва в HTML5 за SEO.
Използването на таг раздел е много подобно на използването на слой div, с тази разлика, че секцията осигурява смисловия смисъл и всички елементи, затворени в раздела, са свързани със семантиката на мрежата. Важно е да не използвате раздел за групиране на елементи във всеки блок, защото трябва да имаме групирани безсмислени елементи, за да присвоим CSS стилове или някакъв програмен ефект.
Ако причината за създаването на блок е да приложите CSS или да го използвате от код със скрипт, тогава би било по -добре да не използвате HTML5, тъй като блокът няма семантично съдържание. В този случай трябва да създадем блок със слоя div на xhtml. Както се вижда в горния пример, логото няма смисъл да използва HTML5, тъй като CSS се използва за показване на изображението.
DIV слой или разделЕдин от начините да се мисли за уместността на всеки блок, за да се определи дали е div слой или раздел, ако аз съм посетител на уеб страницата. Този блок дава ли ми полезна информация? Ако отговорът е да, това ще бъде раздел, ако не слой.
Когато използваме елемента article, ние дефинираме блок със семантичен смисъл и съдържание, което търсачките могат да обхождат. Етикетът на статията не се отнася непременно към текстова бележка, може да бъде продукт, изображения или форма.
Нека да видим прост пример за уеб страница и нейния код в HTML5:

Honda Civic

Тъй като в рамките на статията можем да поставим слоеве или абзаци или други xhtml елементи, в някои случаи съдържанието на мрежата може да има само една статия и в случай, че страницата има списъци или каталози, както в предишния случай на Autos Online, можем да имаме статия за всеки показан продукт, както и собствена заглавка, за да придаде по -голямо значение на заглавията.
Можем също да приложим css стилове към HTML5 елементи, нека видим прост пример за онлайн блог с HTML5 и CSS3.

Дял 1

Публикувано на 06 декември 2014 г. от Серджо - 3 коментара

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus омраза, ultricies eu pharetra dictum, омраза на laoreet id …

Дял 2

Публикувано на 1 декември 2014 г. от Серджо - 20 коментара

Това показва, че те са не само семантични елементи, но могат да бъдат и част от дизайна и структурата на уеб страницата.
Този елемент служи за дефиниране на вторичен блок в структурата на уеб страницата, това е съдържание или данни, които искаме да покажем на посетителя, но не е основно съдържание.
Можем да свържем страничния маркер със страничните колони или широко известни като странична лента, която ще има вторично съдържание на менюто за навигация, връзки към други уеб страници, формуляри за вход. Можем също така да създадем отстрани в рамките на статия, това означава, че това, което е встрани, е допълнение към съдържанието на статията, но не е пряка част от това съдържание, например, ако имаме статия за някои продажби и встрани публикуваме статистически данни .
И накрая, запомнете целта на Layout:
Какво е оформление на уеб страница?Оформлението на уеб страница е да приведе графичния дизайн в html код, като css локализира всеки съответния елемент чрез код на уеб страницата.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка