- Від автора
- Загальна правильна структура HTML документа
- Структура HTML документа
- Тип поточного документа DTD
- Поняття тега в HTML
- Теги заголовків і підзаголовків h1-h6
- Приклад розвиненою структури HTML документа
- Структура HTML 5
- HTML розмітка на сайті WordPress
- Як подивитися HTML код сторінки сайту WordPress
- висновок
Від автора
Наша команда-партнер Artmisto
Доброго дня! У цьому уроці ви НЕ знайдете для себе нічого корисного, якщо ВЖЕ знайомі з формуванням структури HTML документа. Для тих, хто НЕ знаком, я покажу правильну (валідну) структуру HTML веб-документа, в тому числі для сайту WordPress.
Загальна правильна структура HTML документа
В першу чергу, без довгих передмов - загальна структура будь-якого HTML документа повинна бути такою:
Структура HTML документа
<! DOCTYPE html> / * Вказує тип поточного документа DTD * / <html> / * Показує початок документа * / <head> / * Показує початок заголовка (шапки) * / <title> Test </ title> / * Показує заголовок * / </ head> / * Показує початок заголовка * / <body> / * Показує початок основної частини документа (тіло) * / <p> </ p> / * Змістовна частина документа * / </ body> / * Показує кінець основної частини документа * / </ html> / * Показує кінець документа * /Якщо прибрати пояснення, які я показував після кожного тега, то проста структура HTML документа виглядає так
<! DOCTYPE html> <html> <head> <title> Test </ title> </ head> <body> <p> </ p> </ body> </ html>Тип поточного документа DTD
Тип поточного документа (Document Type Definition, DTD) необхідний, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже мова HTML існує в декількох версіях.
Крім цього є інші мови розмітки відмінні від HTML, наприклад XHTML.
Примітка: XHTML це EXtensible HyperText Markup Language, що переводимо, як розширена мова розмітки гіпертексту.
XHTML схожий на HTML, але відрізняється синтаксисом. Щоб браузер не плутався мови і потрібно показати йому в першому рядку коду, тип поточного документа DOCTYPE.
Поняття тега в HTML
Ви звернули увагу, що вся структура HTML документа задається певними тегами - якимись словами, укладеними в кутові дужки.
Слово, укладену в кутові дужки HTML документа називається тегом. Кожен тег має свій сенс, визначений правилами розмітки.
- Тег [head] означає заголовок html документа. У тегах head зберігається інформація для браузерів і пошукових систем. У тому числі у вигляді мета-тегів;
- Тег [body] означає основний зміст html документа. Саме текст, зображення, скрипти Java Script і т.д .;
- Тег [p] це блоковий елемент, завжди починається з нового рядка. Він означає абзац основного змісту html документа.
Важливо! Всі теги html розмітки повинні бути парними. Тобто, відкриває тег <тег>, повинен бути закритий закриває тегом, з косою рисою </ тег>.
Теги заголовків і підзаголовків h1-h6
Для поліпшення структурування тексту документа, а також поліпшення SEO веб-сторінок, існують додаткові теги основного змісту. Вони називаються теги заголовків і підзаголовків від h1 до h6, всього 6 штук.
Вони так само як теги [p] -обзаца, який, дозволяє виділити смислові ділянки тексту, дозволяють поділити текст на смислові долі, давши кожній ділянці свій заголовок.
Теги h1 - h6 мають підпорядковану залежність, нижній рівень цієї підпорядкованості абзац.
Важливо відзначити, що порушення підпорядкованої залежності тегів h1 - h6 - p не порушить відображення і валідність документа, а лише погіршить його оптимізацію для пошукових систем.
Приклад розвиненою структури HTML документа
Наведу академічний приклад більш розвиненою структури HTML документа:
<! DOCTYPE html> <html> <head> <title> Test </ title> </ head> <body> <h1> Основний заголовок </ h1> <h2> </ h2> <h3> </ h3> < p> </ p> <p> </ p> <h1> Основний заголовок </ h1> <h2> Перший підзаголовок </ h2> <h3> Перший другорядний підзаголовок </ h3> <p> Абзац </ p> < p> Абзац </ p> <h1> Основний заголовок </ h1> <h2> Другий підзаголовок </ h2> <h3> Перший другорядний підзаголовок </ h3> <p> Абзац </ p> <p> Абзац </ p > <h4> </ h4> <p> </ p> </ body> </ html>Структура HTML 5
У версії HTML 5 має бути така структура документа:
<! DOCTYPE html> Це декларація яка показує, що цей документ в HTML5;
<Html> це кореневий елемент HTML сторінки;
<Head> Елемент, з мета-тегами про документ;
<Title> Цей елемент визначає заголовок для документа;
<Body> Цей елемент містить видиме вміст сторінки;
<H1> Елемент визначає великий заголовок
<P> Елемент визначає абзац.
Працюють в html5 теги h2-h6
Всі теги подвійні. Початковий тег називається відкриває тегом, а кінцевий тег - закриває тегом.
HTML розмітка на сайті WordPress
Незважаючи на те, що скрипт WordPress написаний на php, всі файли сайту, а вірніше все файли робочого шаблону сайту, мають html розмітку. Дивимося приклад, на файлі header.phpшаблона Twenty Seventeen:
<? Php?> <! DOCTYPE html> <html <? Php language_attributes (); ?> Class = "no-js no-svg"> <head> <meta charset = "<? Php bloginfo ( 'charset');?>"> <Meta name = "viewport" content = "width = device-width , initial-scale = 1 "> <link rel =" profile "href =" http://gmpg.org/xfn/11 "> <? php wp_head (); ?> </ Head> <body <? Php body_class (); ? >> <div id = "page" class = "site"> <a class="skip-link screen-reader-text" href="#content"> <? Php _e ( 'Skip to content', 'twentyseventeen '); ?> </a> <header id = "masthead" class = "site-header" role = "banner"> <? Php get_template_part ( 'template-parts / header / header', 'image'); ?> <? Php if (has_nav_menu ( 'top')):?> <Div class = "navigation-top"> <div class = "wrap"> <? Php get_template_part ( 'template-parts / navigation / navigation', 'top'); ?> </ Div> <! - .wrap -> </ div> <! - .navigation-top -> <? Php endif; ?> </ Header> <! - #masthead -> <? Php if ((is_single () || (is_page () &&! Twentyseventeen_is_frontpage ())) && has_post_thumbnail (get_queried_object_id ())): echo '<div class = "single-featured-image-header"> '; echo get_the_post_thumbnail (get_queried_object_id (), 'twentyseventeen-featured-image'); echo '</ div> <! - .single-featured-image-header ->'; endif; ?> <Div class = "site-content-contain"> <div id = "content" class = "site-content">Ви можете бачити, що якщо всі функції WordPress розміщені в класичній HTML розмітці. Є тип документа: <! DOCTYPE html>
Парні теги [head], [header]
Хто відкриває тег [body].
Закриває тег можна знайти в файлі footer.php.
Як подивитися HTML код сторінки сайту WordPress
Те, що ви пишете в редакторі сайту, створюючи статті або сторінки, це лише частина HTML сторінки сайту. Це навіть не все тіло (body) сторінки.
Щоб подивитися HTML код сторінки сайту WordPress, а це потрібно дуже часто, потрібно:
Відкрити сторінку у браузері;
Перейти в англійський шрифт клавіатури;
Натиснути наступні кнопки:
- Chrome: Ctrl + U
- Opera: Ctrl + U
- Mozilla: Ctrl + U
Може бути, ви поки не знаєте, навіщо це потрібно. Повірте, це буде потрібно не раз, для аналізу свого сайту і можливо сайтів конкурентів.
висновок
У висновку хотілося зробити висновок, але на думку спадає тільки думка, що стаття вийшло, зовсім для початківців. Між прикладом коду статті та прикладами з реальних сайтів, на перший, погляд велика різниця. Однак у всіх файлів однакова структура HTML документа і вкрай важливо цю структуру не порушувати при роботі з сайтом.
У статті використані інструменти навчання HTML: Tryit Editor v3.5
© www.wordpress-abc.ru
Статті пов'язані з теми:
Php?DOCTYPE html> <html <?
Php language_attributes (); ?
Gt; Class = "no-js no-svg"> <head> <meta charset = "<?
Php bloginfo ( 'charset');?
Org/xfn/11 "> <?
Php wp_head (); ?
Gt; </ Head> <body <?
Php body_class (); ?
Gt;> <div id = "page" class = "site"> <a class="skip-link screen-reader-text" href="#content"> <?
