Что такое разметка в html

HTML5 и алгоритм разметки документов

Данная статья вышла в далеком 2011 году, но до сих пор не потеряла актуальности, и собственно говоря я не нашел ничего лучше и понятнее по этой теме. Перевел для вас Кинзябулатов Рамиль.

Вступление

Все мы уже знаем, что для создания веб-сайтов лучше всего использовать HTML5. Сейчас мы обсудим то, как правильно использовать HTML5. Одной из важных частей HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять разделение содержимого, нам нужно понять алгоритм разметки документа.

Понимание алгоритма структурирования документа может оказаться непростой задачей, но оно того стоит. Вы больше не будете ломать голову над тем, какой элемент использовать — section или div — вы будете знать это сразу. Более того, вы будете знать, почему эти элементы используются, и именно знание их значения является самым большим достоинством изучения алгоритма.

Дальнейшее чтение на SmashingMag:

Что такое алгоритм структурирования документов?

Алгоритм структурирования документов — это механизм для создания кратких описаний веб-страниц на основе их разметки. У каждой веб-страницы есть своя структура, которую легко просмотреть с помощью очень простого бесплатного онлайн-инструмента, который мы сейчас рассмотрим.

Итак, давайте начнем с примера схемы. Представьте, что вы создали сайт для конезаводчика, и ему нужна страница для рекламы лошадей, которых он продает. Структура страницы может выглядеть примерно так:

Лошади на продажу

Пример 1: Как может быть структурирована страница о лошадях на продажу.

Вот и все: красивый, чистый, легко читаемый список заголовков, отображаемый в иерархии — подобно оглавлению.

Если говорить еще проще, то только две вещи в вашей разметке влияют на внешний вид веб-страницы:

Очевидно, что секционирование содержимого — это новый способ HTML5 для создания разметки. Но прежде чем перейти к этому, давайте вернемся к HTML 101 и рассмотрим, как мы должны использовать заголовки.

Создание разметки с использованием заголовков

Чтобы создать структуру для страницы лошадей, показанной на примере 1, мы могли бы использовать разметку, подобную следующей:

Пример 2: Наша страница «Лошади на продажу», размеченная с помощью заголовков.

Все очень просто. Контур на примере 1 создан уровнями заголовков.

Чтобы вы знали, что я не выдумываю, скопируйте и вставьте приведенный выше код в превосходный инструмент Джеффри Снеддона для создания схем. Нажмите большую кнопку «Outline this», и вуаля!

Схема, созданная таким образом с использованием заголовков, состоит из скрытых, или неявных разделов. Каждый заголовок создает свой собственный неявный раздел, а любой последующий заголовок более низкого уровня создает внутри него еще один уровень, неявный подраздел.

Неявный раздел завершается заголовком того же уровня или выше. В нашем примере раздел «Кобылы» заканчивается началом раздела «Жеребцы», а каждый раздел, содержащий подробную информацию об отдельной лошади, заканчивается началом следующего.

Пример 3 ниже — пример неявного раздела, который заканчивается заголовком того же уровня. А пример 4 — неявный раздел, который заканчивается заголовком более высокого уровня.

Пример 3: Неявный раздел закрывается заголовком того же уровня

Пример 4: Неявный раздел закрывается заголовком более высокого уровня.

Создание схемы с помощью разделения содержимого

Теперь, когда мы знаем, как содержимое заголовка работает при создании схемы, давайте разметим нашу страницу с лошадьми, используя некоторые новые структурные элементы HTML5:

Пример 5: Страница лошадей, размеченная с помощью новых структурных элементов HTML5.

Я знаю, о чем вы подумали, но я не лишился рассудка с этими безумными заголовками. Я делаю очень важный вывод, который заключается в том, что схема создается содержимым секций, а не заголовками.

Скопируйте и вставьте этот код в outliner, и вы увидите, что уровни заголовков абсолютно не влияют на схему, в которой используется содержимое разделов.

Элементы section, article, aside и nav — вот что создает схему, и на этот раз разделы называются явными разделами.

Одной из самых обсуждаемых особенностей HTML5 является то, что разрешено использовать несколько элементов h1, и вот почему. Это не призыв размечать каждый заголовок на странице как h1; скорее, это признание того, что там, где используется разделение содержимого на секции, оно создает схему, и что каждая явная секция имеет свою собственную структуру заголовков.

В той части спецификации HTML5, которая посвящена заголовкам и разделам, это четко указано:

Разделы могут содержать заголовки любого ранга, но авторам настоятельно рекомендуется либо использовать только элементы h1, либо использовать элементы соответствующего ранга для уровня вложенного раздела.

Я бы настоятельно рекомендовал, пока браузеры — и, что более важно, программы чтения с экрана — не поймут, что разделение содержимого вводит подраздел, использование нескольких элементов h1 менее безопасно, чем использование структуры заголовков, которая отражает уровень каждого заголовка в документе, как показано на примере 6 ниже.

Это означает, что пользовательские агенты, которые не реализовали алгоритм разметки, могут использовать неявное разделение, а те, которые его реализовали, могут эффективно игнорировать уровни заголовков и использовать секционирование содержимого для создания схемы.

На момент написания этой статьи ни один браузер или программа для чтения не реализовали алгоритм выделения контуров, поэтому нам нужны сторонние инструменты тестирования, такие как аутлайнер. Последние версии Chrome и Firefox по-разному стилизуют элементы h1 во вложенных разделах, но это очень отличается от реальной реализации алгоритма.

Когда большинство пользовательских агентов, наконец, будут поддерживать его, использование h1 в каждом явном разделе станет предпочтительным вариантом. Это позволит инструментам синдикации обрабатывать статьи без необходимости переформатирования уровней заголовков в исходном контенте.

Пример 6: Страница наших лошадей с разумной разметкой.

Еще один момент, на который стоит обратить внимание, — это положение абзаца «Все наши лошади поставляются с полным пакетом документов и родословной». В примере, где для создания схемы использовались заголовки (прим. 2), этот абзац является частью неявного раздела, созданного заголовком «Brown Biscuit». Читатели ясно увидят, что этот текст относится ко всему документу, а не только к Brown Biscuit.

Секционирование контента решает эту проблему довольно легко, перемещая его обратно на верхний уровень, возглавляемый заголовком «Лошади на продажу».

Смешивание

Итак, что происходит, когда комбинируются неявные и явные разделы? Если вы помните, что неявные разделы могут находиться внутри явных разделов, но не наоборот, то все будет в порядке. Например, следующий вариант работает хорошо и является абсолютно правильным:

И это создает разумную иерархическую схему:

Horses for sale

Пример 7: Скрытые разделы, созданные заголовками внутри явного раздела.

Однако если вы надеетесь добиться такой же схемы , вложив явный раздел в скрытый, ничего не выйдет. Элемент секционирования просто закроет скрытый раздел, созданный заголовком, и создаст совсем другую схему, как показано ниже:

В результате получится следующая схема:

Horses for sale

Пример 8: Явные секции не могут находиться внутри скрытых секций.

Не существует способа заставить явные разделы, созданные элементами article, стать подразделами неявного раздела Mare.

Вы можете использовать заголовки для разделения содержимого элементов секционирования, но не наоборот.

На что следует обратить внимание

Разделы без названия

До сих пор мы не рассматривали nav и aside, но они работают точно так же, как section и article. Если у вас есть второстепенный контент, который в целом связан с вашим сайтом — скажем, советы по дрессировке лошадей и новости отрасли — вы пометите его как «в сторону», что создаст явный раздел в схеме документа. Аналогично, основная навигация должна быть обозначена как nav, что также создает явный раздел.

Нет требования использовать заголовки для aside и nav, поэтому они могут появиться в конспекте как разделы без названия. Попробуйте использовать следующий код в программе outliner:

Пример 9: Безымянная <nav>.

nav отображается как раздел без названия. Как правило, это не является проблемой и не считается плохим кодом HTML5, хотя в своей недавней статье HTML5 Doctor об изложении Майк Робинсон рекомендует использовать заголовки для всех разделов контента, чтобы повысить доступность.

Элементы section и article без названия, с другой стороны, обычно следует избегать. На самом деле, если вы не уверены, стоит ли использовать section или article, хорошее правило — посмотреть, есть ли у контента естественный, логичный заголовок. Если нет, то, скорее всего, лучше использовать старый добрый div.

На самом деле, спецификация не требует, чтобы элементы section имели заголовок. Она гласит:

Элемент section представляет собой общий раздел документа или приложения. В данном контексте раздел — это тематическая группировка содержимого, обычно с заголовком.

Ваша интерпретация этого, вероятно, зависит от вашего понимания слова «обычно». Я понимаю это как то, что вам нужна чертовски веская причина не использовать заголовки с section элементами. Я не считаю, что это означает, что вы можете игнорировать его всякий раз, когда вам захочется использовать новый элемент HTML5.

Там, где указан элемент article, спецификация идет еще дальше, показывая пример комментариев в блогах, помеченных как article без заголовка, так что исключения есть. Однако если вы видите в схеме section или article без названия, убедитесь, что у вас есть веская причина не давать им название.

Если вы не уверены, является ли ваш раздел без названия nav, aside, section или article, очень удобное расширение Opera позволит вам узнать, какой тип содержимого раздела вы оставили без названия. Этот инструмент также позволит вам просмотреть схему, не покидая страницу, что может быть очень полезно при отладке разделов.

Корень секционирования

Самые зоркие из вас заметили, что когда я сказал, что содержимое раздела не может создавать подсекцию скрытого раздела, в содержимом раздела не было h1 («Лошади на продажу»), за которым сразу следовал section («Кобылы»), и содержимое раздела действительно создавало подсекцию h1.

Причиной этого является корень секционирования. Как сказано в спецификации, секционирующие элементы создают подразделы своего ближайшего предшественника — секционирующего корня или секционирующего содержимого.

Элементы содержимого рубрики всегда считаются подразделами своего ближайшего предшественника — корня рубрики или ближайшего предшественника- элемента содержимого рубрики, в зависимости от того, какой из них ближайший, независимо от того, какие подразумеваемые разделы могли создать другие рубрики.

Элемент body является корнем секционирования. Таким образом, если вы вставите код с примера 7 в outliner, h1 будет корневым заголовком секционирования, а элемент section будет подразделом корневого элемента секционирования body.

Элемент body — не единственный, который действует как корень секционирования. Есть еще пять других:

Статус этих элементов как секционирующего корня имеет два последствия. Во-первых, каждый из них может иметь свою собственную схему. Во-вторых, схема вложенного корня секционирования не появляется в схеме родительского корня секционирования и не влияет на него.

На практике это означает, что заголовки внутри любого из пяти вышеперечисленных элементов корня секционирования не влияют на схему документа, частью которого они являются.

Последнее (вы будете рады это услышать), что я скажу о корне секционирования, это то, что первый заголовок в документе, который не находится внутри содержимого секционирования, считается заголовком документа.

Попробуйте следующий код в outliner, чтобы посмотреть, что произойдет:

Пример 10: Как уровни заголовков на корневом уровне влияют на схему.

Я не буду пытаться объяснить вам это, потому что это, вероятно, только запутает нас обоих, поэтому я позволю вам поиграть с этим в аутлайнере. Подсказка: попробуйте использовать разные уровни заголовков для неявных разделов, чтобы посмотреть, как это повлияет на контур; например, h3 и h4 или два h5.

Неназванные документы

Если ни один заголовок не находится на корневом уровне документа (т.е. не внутри секционирующего содержимого), то сам документ будет без заголовка. Это довольно серьезная проблема, и она может возникнуть либо из-за небрежности, либо, как это ни парадоксально, из-за тщательного продумывания того, как следует использовать содержимое секций.

Йоханссон спрашивает, как правильно создать схему документа для статьи в блоге или другой новости с использованием HTML5. Если вы придерживаетесь мнения, что ваш логотип или название сайта не должны находиться в элементе h1, вы можете разметить свою запись в блоге следующим образом:

Документ не имеет названия. С некоторой неохотой Йоханссон решает выделить заголовок сайта в h1 и использовать еще один h1 для выделения заголовка статьи. Это разумное решение, и его подтверждают результаты опроса пользователей экранных считывателей WebAIM, в котором большинство респондентов высказались за два заголовка верхнего уровня именно в таком формате.

Этот же подход широко используется на статических страницах, построенных с использованием структурных элементов HTML5, и он может быть очень полезен для пользователей скринридеров. Представьте себе, что вы используете программу для чтения с экрана, чтобы найти достойный рецепт куриного пирога, и у вас есть несколько сайтов с рецептами, открытых для сравнения. Возможность быстро определить, на каком сайте вы находитесь, используя клавишу быстрого доступа к заголовкам, была бы гораздо полезнее, чем видеть на каждом из них только «куриный пирог».

Не слишком далеко от двух заголовков верхнего уровня в опросе пользователей скринридеров ушел один заголовок верхнего уровня для документа. Это, вероятно, предпочтительный вариант в большинстве случаев; но, как мы уже видели, он создает body без заголовка, что нежелательно.

На мой взгляд, есть простой способ обойти эту проблему: не используйте article в качестве обертки для постов в одном блоге, новостей или основного содержимого статической страницы. Помните, что article — это секционирование контента: он создает подраздел документа. Но в этих случаях документ — это содержимое, а содержимое — это документ. Если отбросить название элемента, зачем нам создавать подраздел документа еще до того, как он начался?

HGROUP

Это последний пункт в списке того, чего следует остерегаться, и его очень легко понять. Элемент hgroup может содержать только заголовки (от h1 до h6), и его назначение — удалить из схемы все заголовки, кроме самого высокоуровневого, который он содержит.

Он был и остается предметом споров, и его включение в спецификацию отнюдь не является само собой разумеющимся. Однако на данный момент он делает именно то, о чем говорится на упаковке: он группирует заголовки в один, что касается алгоритма структурирования.

В заключение

Логику, лежащую в основе алгоритма построения документа, бывает трудно понять, а спецификация иногда напоминает физику: она понятна, пока вы ее читаете, но когда вы пытаетесь подтвердить свое понимание, оно растворяется, и вы обнаруживаете, что перечитываете ее снова и снова.

Но если вы запомните основы — что section, article, aside и nav создают подразделы на веб-страницах, — то вы уже на 90 % на правильном пути. Привыкайте размечать контент с помощью элементов секционирования и проверять свои страницы в аутлайнере, потому что чем больше вы будете практиковаться в создании хорошо оформленных документов, тем быстрее вы поймете алгоритм.

Я обещаю, что уже после нескольких попыток вы поймете его и никогда не оглянетесь назад. И с этого момента каждая созданная вами веб-страница будет структурированным, семантическим, надежным, хорошо изложенным контентом.

Зверстати всіх наверх: що таке верстка і html розмітка?

Вона застосовується для верстки веб-документів і є по суті інтернаціональна.

Для того, щоб розміщувати певним чином елементи на веб-сторінці, — або просто верстати, — потрібно володіти мовою розмітки.

Для більш точного уявлення про верстку досить розібрати процес створення будь-якого сайту на складові:

— спочатку розробляється дизайн-макет — промальовувалися елементи майбутнього інтерфейсу;

— для того, щоб сайт почав «жити власним життям» верстальники прописують спеціальний код, використовуючи той самий мову html. З його допомогою браузер розпізнає сторінку, і все кнопочки, іконки та інші елементи дизайн-макету стають розмітки і в повній мірі виконують задані їм функції. За допомогою верстки PSD-файл переводиться в код, з яким далі працюють.

Номінальний середній сайт складається з декількох HTML-сторінок: звичайні сторінки, домашні, контакти і так далі — для кожної буде окремий документ HTML. Будь-яка така сторінка створюється за допомогою набору тегів (їх ще називають блоками). Ці теги формують певну ієрархію, яка розбиває контент за розділами.

На сторінці веб-документа, як і в книзі, можна виділити абзаци, заголовки і інші елементи за допомогою html тегів — спеціальних команд для браузера, які підказують, як повинен відображатися документ.

Принцип побудови тегів приблизно такий: <ім’я тега>.

Як правило, теги в коді HTML становлять парами. Відкривається і закривається тег, і все, що знаходиться між ними, потрапляє під вплив тега.

Приклад відкривається тега: <p>

Приклад закривається тега: </p>

У тегах розміщують і атрибути — це спеціальні команди, які розширюють дію тега.

Приклад атрибута:<Тег атрибут1 = «значення»>

Існує два типи верстки веб-документів: таблична і блокова.

таблична:громіздка, масивна за своєю структурою, але є і плюси — вона досить проста у виконанні і відображається практично ідентично в будь-якому браузері. Однак, щоб внести якісь зміни в табличну верстку потрібно витратити значну кількість часу, вивчаючи її структуру. Сьогодні все менше фахівців використовують такий тип розмітки.

Приклад HTML коду табличної верстки:

блокова:вона вважається більш гнучкою і застосовується в верстці значно частіше. При такого різновиду розмітки для побудови каркаса використовуються теги <div>. Основним плюсом блочного типу є поділ оформлення та вмісту, тобто концепція семантичної верстки.

прикладHTML кодублокової верстки:

Базис успішної роботи фахівця з верстки: адаптивний дизайн, юзабіліті і низькоякісний продукт:

— адаптивний дизайн робить сайт зручним для використання з мобільних додатків;

— юзабіліті на увазі під собою простоту і логічність при створенні інтерфейсу — користувач повинен практично інтуїтивно розуміти, що і де знаходиться на ресурсі;

— низькоякісний продукт добре структурований і оптимізований.

Зазвичай при роботі з масштабними проектами верстальники займаються безпосередньо створенням коду html, а всі інші завдання діляться між іншими членами команди.

По суті, верстальник — головна сполучна ланка між дизайнером і розробником. Від його роботи багато в чому залежить те, як створений дизайн-проект «оживе», коли програміст додасть в нього логіку.

Стати дизайнером: все за, проти і як.

На користь вибору цієї професії сьогодні говорить як мінімум високий попит на фахівців з верстки на ринку праці. Зарплата верстальників варіюється, але її середнє значення по Україні тримається на позначці в 590 $.

Як правило, крім знання мови html верстальщикам потрібно розбиратися і в основах css.

МоваCSS (Каскадні таблиці стилів) розширює можливості html і займається по суті «красою» — з його допомогою задається фон, колір, шрифти сайту і інші візуальні деталі. Мови CSS і HTML діють в єдиній зв’язці при створенні веб-документів.

Наприклад, для того, щоб задати HTML абзацу шрифт, можна написати таке правило:

font·family: times new roman, arial, helvetica;

Це означає, що ми ставимо команду використовувати для тексту шрифт times new roman, а якщо він з якоїсь причини недоступний, то наступні за списком перераховані шрифти: arial, helvetica.

У професіїверстальникрядвагомих плюсів:

— можливість як працювати віддалено, так і досить швидко знайти роботу в штаті IT-компанії;

— перспективність: інтернет і технології розвиваються, щодня з’являються все нові і нові сайти і веб-продукти, і необхідність в верстці буде тільки зростати;

— можливість масштабувати свою кар’єру в IT і з часом піти у frontend-розробку;

— поріг входження в професію верстальника вважається відносно невисоким, а це значить, що навчитися потрібним навичкам при належному завзятості можливо за досить короткий час.

До мінусів можна віднести тільки те, що робота вимагає посидючості, але це за великим рахунком теж навик, який можна розвинути.

Основи HTML деякі новачки намагаються осягати самостійно, але процес піде набагато швидше, якщо вибрати для навчання спеціалізованікурсиHTML.

Name already in use

html-foxford-materials / lessons / html-base.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

1.1 Теги и атрибуты

Что такое браузер

Браузер — прикладное программное обеспечение для просмотра веб-страниц. В глобальной сети браузеры используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов.

Браузер может быть:

• Клиентским приложение на вашем компьютере
• Приложением на смартфоне
• Другим приложением, в которое встроен браузер
• Браузер может быть доступен и на других устройствах (Smart TV, часы, компьютер автомобиля, холодильник) Вы сообщаете браузеру что отобразить, для этого указываете ему адрес документа, или URL (Uniform Resource Locator) — единый указатель ресурса

протокол — схема обращения к ресурсу, для веб-страниц, это http или https.

хост — полностью прописанное доменное имя сервера.

путь — уточняющая информация о месте нахождения ресурса, очень похожа на путь в файловой системе.

якорь — идентификатор «якоря», ссылающегося на некоторую часть (раздел) открываемого документа.

Например, адрес страницы программы на которой вы все регистрировались на этот курс http://netology.ru/programs/html-css-base

К URL мы еще вернемся когда будем разбираться со ссылками и изображениями.

Что делает браузер:

1. Формирует и отправляет запрос на сервер (HTTP)
2. Получает ответ сервера (HTTP)
3. Разбирает ответ сервера, документ (HTML)
4. Рисует и отображает полученную страницу в окне (HTML и CSS)
5. Реагирует на действия пользователя (CSS и JavaScript)

HTML документ, полученный с сервера содержит:

• Текстовая информация;
• Структура документа (заголовки, абзацы и т.д.);
• Ссылки на другие ресурсы (изображения, видео, аудио, стили).

Веб-страницы в первую очередь должны представлять информацию в удобном виде. Давайте подумаем, из чего она состоит. Что мы видим в книгах, журналах, газетах:

• текст разбитый на абзацы
• заголовки разных уровней
• иллюстрации
• цитаты
• акценты по тексту

Их внешний вид может отличаться в различных источниках. Но суть от этого не меняется. Вы с первого взгляда определите заголовок в новой книге. Именно такую информацию браузер должен уметь правильно представлять на экране. И значит нам необходимо сообщить ему что является заголовком, абзацем, где сделать акцента, и когда должны следовать иллюстрация.

Представим что нам нужно изобрести универсальный способ описания документов, по которому браузер сможет их правильно отобразить на экране. Перед нами стоит задача:

1. Для создания не должно требоваться сложное программное обеспечение.
2. Дать возможность указать браузеру что является заголовком, абзацем, иллюстрацией.
3. Процесс создания документа должен быть простым.
4. Сам подход должен быть легок в изучении.

Для создания не должно требоваться сложное программное обеспечение — пусть документ будет обычным текстом, тогда для создания потребуется обычный текстовый редактор. Текстовый редактор — блокнот. Текстовый процессор — MS Word.

Дать возможность указать браузеру что является заголовком, абзацем, иллюстрацией — добавим в текст документа простые текстовые метки, по которым браузер поймет где начинается и заканчивается заголовок, абзац, где должны быть иллюстрация, на какой текст сделать акцент.

Процесс создания документа должен быть простым — просто ограничим количество возможных меток, оставив только самое необходимое.

Сам подход должен быть легок в изучении — а это мы проверим по итогам курса К меткам есть дополнительные требования:

• Метка должна быть уникальной и не используются в обычной письменной речи. Поэтому Заголовок — плохой вариант метки, как и символ *.
• Они должны состоять из небольшого числа символов, иначе их набор будет утомителен. Поэтому ТутНачинаетсяЗаголовокОтнынеИВоВекиВеков — плохой вариант метки, хоть и вряд ли встретится в самом тексте.
• По ним должна быть понятна их суть. Поэтому ТНЗ29 — тоже плохой вариант метки, хоть короткий и уникальный

Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

HTML — HyperText Markup Language — «язык гипертекстовой разметки» Cтандартизированный язык разметки документов во Всемирной паутине. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.

Просто текст в HTML документа браузер никак не форматирует. Переносы строк заменяет на пробел, а несколько подряд идущих пробелов показывает как один. Для разметки используются специальные метки, которые обозначают начало и конец абзаца, заголовка и все остальные элементы. Чаще всего их называют тегами. Набор тегов ограничен, и у каждого из них своя роль.

Стандарт поддерживается Консорциумом Всемирной паутины W3C. В стандарт как раз входит допустимый набор тегов, их роль, и прочие особенности их использования. Текущая версия стандарта HTML 5.1

Вёрстка веб-страниц — создание структуры html-кода, и описание стилей, размещающие элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

Теги в HTML заключены в угловые скобки < > Нам привычнее их называть символами меньше и больше. Так как нам нужно обозначать начало и конец элемента, например абзаца, то существует понятие открывающего и закрывающего тега. Тег p — позволяет выделить абзац текста (Paragraph по английски).

Для разметки заголовков предусмотрено 6 тегов, что позволяет нам различать заголовки разного уровня h1-h6 (Heading)

Для разметки блоков цитат, врезок и просто выделенных блоков текста предусмотрен тег blockquote .

Если не закрыть один из тегов, это может привести к ошибке отображения

Цитата может состоять из нескольких абзацев текста. Нам потребуется обозначить их внутри тега цитаты. В HTML можно помещать одни теги внутрь других. Поэтому мы можем текст внутри цитаты так же разметить тегами абзацев:

При этом теги p внутри цитаты будут дочерними для blockquote . А тег blockquote будет родительским для вложенных тегов p Вспомним ошибку которую мы разбирали ранее

Теперь думаю понятно что браузер посчитал что первый тег p и blockquote вложены в h1 . А второй тег p в свою очередь вложен в blockquote Не все теги можно вкладывать в другие теги. Например логика подсказывает что нет смысла вкладывать абзацы или цитаты в заголовок. Но например то что тег blockquote нельзя вкладывать в абзац, уже не так очевидно. Какие теги в какие можно вкладывать, тоже регулируется стандартом. И там все подчинено очень простой логике. Например, блок цитаты может состоять из нескольких абзацев. А абзац не может состоять из нескольких блоков цитат. Для вставки цитаты по тексту есть тег q .

Теги должны быть вложены только целиком. Т.е. нельзя вложить один тег в два других:

Ошибки с нарушением вложенности тегов тоже могут привести к неправильном отображению. Хоть браузеры сейчас достаточно умны, и исправят код, не стоит на это полагаться.

Мы уже знаем что вложенные теги считаются дочерними для того тега в который они вложены. А этот тег будет для них непосредственным родителем.

Если теги вложены в один и тот же тег и идут друг за другом, то такие теги называются соседями.

При этом соседи которые следую раньше — предшественники. А позже — последователи. Ближайший предшественник — предыдущий тег. Ближайший последователь — следующий.

Все теги вложенные в тег, и вложенные во вложенные теги — потомки.

Теги для расстановки акцентов по тексту:

• q — цитата по тексту.
• strong — сделать акцент на слове или фразе, обозначить их важность.
• em — выделить слово.

В эти теги нельзя вкладывать никакие другие

Стандарт не регламентирует как форматировать код. Переносы строк преобразуются в пробелы, несколько пробелов подряд преобразуются в один. Но опыт разработчиков привел к тому, что форматирование кода стало не регламентированным стандартом индустрии. И все это для увеличения скорости работы верстальщика:

• Каждый уровень вложенности обозначается отступом
• Отступ составляет два пробела
• Если у тега нет вложенных, его весь можно записать в одну строку
• Но если строка слишком длинная, то теги нужно разместить отдельно от содержимого

Чтобы сообщить браузеру дополнительную информацию о содержимом тегов или задать специальные свойства используются атрибуты. Атрибуты задаются в открывающем теги

Значение атрибута задается в двойных кавычках “ » после символа = .

Атрибутов может быть несколько, тогда они перечисляются через пробел.

Есть универсальные атрибуты, которые можно указать в любом теге. Например:

• id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него
• class — позволяет задать один или несколько через пробел определенных пользователем классов для дальнейшего управления внешним видом элемента через стили. Так же, у некоторых тегов есть специальные атрибуты, доступные только им. Например у тега blockquote и q есть атрибут cite , который позволяет указать автора или источник цитаты:

С остальными мы познакомимся при изучении тегов.

Гипертекст — текст, «который разветвляется как бы сам по себе или выполняет действия по запросу».

Именно благодаря гипертексту интернет стал таким популярным и таким каким мы его сейчас видим. Так как же нам сделать текст, который разветвляется сам по себе? В HTML для этого предусмотрены ссылки в тексте, которые позволяют по клику перейти на другую страницу, или к другой части текущей страницы. Для того чтобы слово или фразу сделать гиперссылкой, её нужно разметить тегом a:

Чтобы сообщить браузеру куда перенаправить пользователя, укажем информацию об этом в специальном атрибуте href (hyper reference – гиперссылка):

Самый простой способ задать ссылку, использовать так называемый якорь внутри страницы. Мы можем задать уникальный идентификатор любому тегу с помощью атрибута id , и потом сослаться на него из этого же документа добавив к идентификатору символ решетки # в начале. Браузер прокрутит страницу так, чтобы содержимого этого тега оказалась видно в окне. Это удобно для больших документов или для создания оглавлений. Для того чтобы ссылаться на другие документы, нам нужно изучить что такое URL.

Адрес, который содержат протокол и хост и может содержать дополнительно путь и якорь, называется абсолютным.

http://netology.ru/programs/html-css-base Адрес без указания протокала и хоста, является абсолютным относительно сервера. При переходе по такой ссылке будет использован протокол и хост открытой страницы: /programs/html-css-base Если эта ссылка на странице http://netology.ru/development/programs то при переходе мы попадем на страницу http://netology.ru/programs/html-css-base А если на странице http://www.ruscircus.ru/study/pc.shtml то при переходе мы попадем на страницу http://www.ruscircus.ru/programs/html-css-base Адрес без протокола, хоста и ведущего слеша / называется относительным. И при его расчете учитывается не только протокол и хост страницы но и ее адрес. Принцип тот же что и при перемещении по файлам и папка на компьютере: programs/html-css-base Если открыть на странице http://netology.ru/ то перейдем на страницу http://netology.ru/programs/html-css-base Если на странице http://netology.ru/development/programs то перейдем на страницу http://netology.ru/development/programs/html-css-base А если на странице http://netology.ru/development/programs/ то перейдем на страницу http://netology.ru/development/programs/programs/html-css-base Особый случай пути . и .. . — текущая папка .. — родительская папка

Добавим ссылку на курс в тексте

В тег a так же как и в теги q , strong и em нельзя вкладывать другие теги. Если вы хотите сделать заголовок ссылкой, вложите в него тег а

Для ссылки можно задать подсказку в атрибуте title , которая покажется при наведении указателя мыши на ссылку:

Для вставки картинки в документ используется тег img . Этот тег не имеет содержимого и закрывающего тега. Это так называемый одиночный тег. URL файла с изображением указывается в специальном атрибуте src :

После загрузки картинки браузер определит её размер в пикселях и отобразит в полный размер в указанном месте.

Хотя размером изображения можно управлять с помощью стилей, рекомендую готовить изображения нужного размера, так как размер напрямую влияет на вес файла, а значит и на скорость передачи по сети.

Если картинка не загрузится по каким-либо причинам, можно указать альтернативный текст, который браузер отобразит вместо картинки в этом случае. Там можно написать о том что изображено на картинке. Для этого есть специальный атрибут alt :

Если картинку вставить в тексте, то она будет вести себя как символ, но в полный размер. И в 99% случаев вы получите не то что ожидали. Такой вариант удобен для вставки символьных изображений, таких как emodji. В остальных случаях помещайте картинку за пределами параграфа.

HTML: HTML разметка

Каждый день мы смотрим на десятки интернет-страниц, читаем на них тексты, которые выводятся, как будто из журналов. Эти страницы представляют из себя гипертекст — систему интернет-страниц, по которым можно путешествовать с помощью ссылок. Для реализации этой системы существует язык HTML.

HTML (HyperText Markup Language) — язык для разметки гипертекста. По своим функциям, HTML — набор правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. Язык появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.

Даже эта страница является текстом, который описан с помощью HTML и обработан браузером. Технологии шагнули далеко вперёд, но концепция использования HTML для разметки текста остаётся неизменной и спустя много лет.

Вот пример HTML разметки:

Не пугайтесь такого обилия непонятных слов и знаков — к концу курса вы будете понимать работу приведённой выше разметки, а также научитесь использовать разметку на своих страницах. Обратите внимание, что вся суть в разметке выше — это текст. Остальное — вспомогательные элементы для того, чтобы вывести текст там, где было задумано дизайнерами и/или разработчиками.

Задание

Скопируйте HTML и вставьте его в редактор на этой странице

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.