ݺߣ

ݺߣShare a Scribd company logo
Семантика текста
Стажировка HTML5
Ирина Панова
Семантическое значение тегов
<b> и <strong>
<b> для выделения кусков текста с целью обратить внимание читателей,
Например: ключевые слова в документе, названия продуктов, первый абзац в
статье.
<strong> как и раньше означает повышенную значимость своего содержимого.
<i> содержит текст, выбивающийся из общего окружения, но не имеющий
эмоциональной окраски.
HTML:
<i>Per aspera ad Astra</i> — в переводе с латыни изречение означает «Через тернии
к звёздам».
Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к
звёздам».
Семантическое значение тега <i>
Семантическое значение тега <em>
<em> текст имеет эмоциональную окраску.
HTML:
Казнить <em>нельзя</em>, помиловать.
Казнить нельзя, помиловать.
Семантическое значение тега <s>
<s> представляет информацию, которая утратила свою актуальность.
HTML:
Купи по цене - 999 р. вместо <s>1000 р.</s>!
Купи по цене - 999 р. вместо 1000 р.!
Семантическое значение старых тега <del>
<del> показывает, что текст ошибочен.
Например, для выделения текста, который был удален в новой версии
HTML:
В последующих версиях <del>этот недостаток был удален</del>.
В последующих версиях этот недостаток был удален.
Семантическое значение тега <q>
<q> - определяет короткую цитату, выделяет ее кавычками.
HTML:
Текст с <q>короткой цитатой</q>.
Текст с “короткой цитатой”.
Семантическое значение тега <blockquote>
<blockquote> определяет блок с цитатой.
HTML:
Цитата: <blockquote>На древнегреческом портале античного мира было начертано:
познай самого себя <cite> — Оскар Уальд.</cite></blockquote>
Цитата:
“На древнегреческом портале античного мира было начертано: познай
самого себя” — Оскар Уальд.
Семантика нового тега <mark>
Текст находящийся между этими тегами становится “выделенным”. Одно из
предназначений данного тега, обрамлять слова в тексте, которые например
совпадают со словом введенным пользователем в поисковую строку.
Текст становится выделенным.
HTML:
Текст становится <mark>выделенным</mark>.
Предназначен для создания дат и времени в формате ISO вида: YYYY-MM-
DDThh:mm:ss. Может обрамлять дату или текст, если тег обрамляет текст, то в него
добавляют атрибут datetime, значением которого выступает дата и/или время в
формате ISO.
2 сентября 2016 был опубликован этот пост.
<time datetime=”2016-02-09”>2 сентября 2016</time> был опубликован этот пост.
Семантика нового тега <time>
Указывает браузеру, где надо перенести длинное слово, если оно не вмещается.
метоксихлор
диэтиламино
метил
HTML:
метоксихлор<wbr>диэтиламино<wbr>метил
Семантика нового тега <wbr>
Полезные ссылки
Все теги HTML5:
https://developer.mozilla.org/ru/docs/Web/HTML/Element
Спецификация:
https://www.w3.org/TR/html5/

More Related Content

Viewers also liked (20)

Введение в Android-разработку (Lecture 06 – basics)
Введение в Android-разработку (Lecture 06 – basics)Введение в Android-разработку (Lecture 06 – basics)
Введение в Android-разработку (Lecture 06 – basics)
Noveo
Lec 12
Lec 12Lec 12
Lec 12
Alexander Rusin
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Denis Vasilyev
Toolbar (Lecture 16 – toolbar)
Toolbar (Lecture 16 – toolbar)Toolbar (Lecture 16 – toolbar)
Toolbar (Lecture 16 – toolbar)
Noveo
Lec 13
Lec 13Lec 13
Lec 13
Alexander Rusin
Работа с соцсетями (Lecture 19 – social)
Работа с соцсетями (Lecture 19 – social)Работа с соцсетями (Lecture 19 – social)
Работа с соцсетями (Lecture 19 – social)
Noveo
Lec 9
Lec 9Lec 9
Lec 9
Alexander Rusin
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Noveo
Seminar: Эффективное использование среды разработки и компилятора C++
Seminar: Эффективное использование среды разработки и компилятора C++Seminar: Эффективное использование среды разработки и компилятора C++
Seminar: Эффективное использование среды разработки и компилятора C++
Denis Vasilyev
Работа с графической подсистемой (Lecture 10 – Graphics)
Работа с графической подсистемой (Lecture 10 – Graphics)Работа с графической подсистемой (Lecture 10 – Graphics)
Работа с графической подсистемой (Lecture 10 – Graphics)
Noveo
Android - 10 - Graphics
Android - 10 - GraphicsAndroid - 10 - Graphics
Android - 10 - Graphics
Noveo
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
Антон Звонов
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложенийWebinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Denis Vasilyev
Animations (Lecture 17 – animations)
Animations (Lecture 17 – animations)Animations (Lecture 17 – animations)
Animations (Lecture 17 – animations)
Noveo
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Noveo
Системы автоматизированной сборки (Lecture 05 – gradle)
Системы автоматизированной сборки (Lecture 05 – gradle)Системы автоматизированной сборки (Lecture 05 – gradle)
Системы автоматизированной сборки (Lecture 05 – gradle)
Noveo
Android - 05 - Android basics
Android - 05 - Android basicsAndroid - 05 - Android basics
Android - 05 - Android basics
Noveo
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Denis Vasilyev
Webinar: Разработка мобильного приложения для заучивания стихов в Delphi
Webinar: Разработка мобильного приложения для заучивания стихов в DelphiWebinar: Разработка мобильного приложения для заучивания стихов в Delphi
Webinar: Разработка мобильного приложения для заучивания стихов в Delphi
Denis Vasilyev
Fragments (Lecture 09 – Fragments)
Fragments (Lecture 09 – Fragments)Fragments (Lecture 09 – Fragments)
Fragments (Lecture 09 – Fragments)
Noveo
Введение в Android-разработку (Lecture 06 – basics)
Введение в Android-разработку (Lecture 06 – basics)Введение в Android-разработку (Lecture 06 – basics)
Введение в Android-разработку (Lecture 06 – basics)
Noveo
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Seminar: Установка и настройка рабочего стенда разработчика Android-приложени...
Denis Vasilyev
Toolbar (Lecture 16 – toolbar)
Toolbar (Lecture 16 – toolbar)Toolbar (Lecture 16 – toolbar)
Toolbar (Lecture 16 – toolbar)
Noveo
Работа с соцсетями (Lecture 19 – social)
Работа с соцсетями (Lecture 19 – social)Работа с соцсетями (Lecture 19 – social)
Работа с соцсетями (Lecture 19 – social)
Noveo
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Библиотеки для передачи данных (Lecture 13 – multithreading, network (libs))
Noveo
Seminar: Эффективное использование среды разработки и компилятора C++
Seminar: Эффективное использование среды разработки и компилятора C++Seminar: Эффективное использование среды разработки и компилятора C++
Seminar: Эффективное использование среды разработки и компилятора C++
Denis Vasilyev
Работа с графической подсистемой (Lecture 10 – Graphics)
Работа с графической подсистемой (Lecture 10 – Graphics)Работа с графической подсистемой (Lecture 10 – Graphics)
Работа с графической подсистемой (Lecture 10 – Graphics)
Noveo
Android - 10 - Graphics
Android - 10 - GraphicsAndroid - 10 - Graphics
Android - 10 - Graphics
Noveo
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
DIOR-DNA, Anton Zvonov, Part 1, Activities (жизненный цикл)
Антон Звонов
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложенийWebinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Webinar: Возможности RAD Studio 10 Seattle для разработки Windows 10 приложений
Denis Vasilyev
Animations (Lecture 17 – animations)
Animations (Lecture 17 – animations)Animations (Lecture 17 – animations)
Animations (Lecture 17 – animations)
Noveo
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)
Noveo
Системы автоматизированной сборки (Lecture 05 – gradle)
Системы автоматизированной сборки (Lecture 05 – gradle)Системы автоматизированной сборки (Lecture 05 – gradle)
Системы автоматизированной сборки (Lecture 05 – gradle)
Noveo
Android - 05 - Android basics
Android - 05 - Android basicsAndroid - 05 - Android basics
Android - 05 - Android basics
Noveo
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Webinar: Использование UWP/WinRT Contracts и Notification в Windows 10
Denis Vasilyev
Webinar: Разработка мобильного приложения для заучивания стихов в Delphi
Webinar: Разработка мобильного приложения для заучивания стихов в DelphiWebinar: Разработка мобильного приложения для заучивания стихов в Delphi
Webinar: Разработка мобильного приложения для заучивания стихов в Delphi
Denis Vasilyev
Fragments (Lecture 09 – Fragments)
Fragments (Lecture 09 – Fragments)Fragments (Lecture 09 – Fragments)
Fragments (Lecture 09 – Fragments)
Noveo

Similar to Семантика текста (HTML5 тема 04 - семантика текста) (12)

Получаем текст веб-страниц из Python и как это работает
Получаем текст веб-страниц из Python и как это работаетПолучаем текст веб-страниц из Python и как это работает
Получаем текст веб-страниц из Python и как это работает
PyNSK
язык разметки
язык разметкиязык разметки
язык разметки
elenash584
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
Vasya Petrov
Slstep
SlstepSlstep
Slstep
Auditorr
Html, Css, Java Script
Html, Css, Java ScriptHtml, Css, Java Script
Html, Css, Java Script
Business School «Digitov»
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
Dmitriy Krukov
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
ssuser3896e2
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
IT Center
IT CenterIT Center
IT Center
Victor Salimgareev
Получаем текст веб-страниц из Python и как это работает
Получаем текст веб-страниц из Python и как это работаетПолучаем текст веб-страниц из Python и как это работает
Получаем текст веб-страниц из Python и как это работает
PyNSK
язык разметки
язык разметкиязык разметки
язык разметки
elenash584
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
Vasya Petrov
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
Dmitriy Krukov
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
ssuser3896e2
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin

More from Noveo (20)

Гуманитарные специальности в IT-индустрии
Гуманитарные специальности в IT-индустрииГуманитарные специальности в IT-индустрии
Гуманитарные специальности в IT-индустрии
Noveo
Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)
Noveo
Стилизация текста (HTML5 тема 05 - стилизация текста)
Стилизация текста (HTML5 тема 05 - стилизация текста)Стилизация текста (HTML5 тема 05 - стилизация текста)
Стилизация текста (HTML5 тема 05 - стилизация текста)
Noveo
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)
Noveo
Yii2
Yii2Yii2
Yii2
Noveo
Сессии и авторизация
Сессии и авторизацияСессии и авторизация
Сессии и авторизация
Noveo
Rest
RestRest
Rest
Noveo
PHP basic
PHP basicPHP basic
PHP basic
Noveo
PHP Advanced
PHP AdvancedPHP Advanced
PHP Advanced
Noveo
PHP and MySQL
PHP and MySQLPHP and MySQL
PHP and MySQL
Noveo
MySQL
MySQLMySQL
MySQL
Noveo
Push Notifications (Lecture 22 – push notifications)
Push Notifications (Lecture 22 – push notifications)Push Notifications (Lecture 22 – push notifications)
Push Notifications (Lecture 22 – push notifications)
Noveo
RxJava+RxAndroid (Lecture 20 – rx java)
RxJava+RxAndroid (Lecture 20 – rx java)RxJava+RxAndroid (Lecture 20 – rx java)
RxJava+RxAndroid (Lecture 20 – rx java)
Noveo
Работа с геоданными (Lecture 18 – geolocation)
Работа с геоданными (Lecture 18 – geolocation)Работа с геоданными (Lecture 18 – geolocation)
Работа с геоданными (Lecture 18 – geolocation)
Noveo
Material Design (Lecture 15 – material design)
Material Design (Lecture 15 – material design)Material Design (Lecture 15 – material design)
Material Design (Lecture 15 – material design)
Noveo
Database (Lecture 14 – database)
Database (Lecture 14 – database)Database (Lecture 14 – database)
Database (Lecture 14 – database)
Noveo
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Noveo
XML, JSON (Lecture 11 – XML, JSON)
XML, JSON (Lecture 11 – XML, JSON)XML, JSON (Lecture 11 – XML, JSON)
XML, JSON (Lecture 11 – XML, JSON)
Noveo
Android - 16 - QR
Android - 16 - QRAndroid - 16 - QR
Android - 16 - QR
Noveo
Гуманитарные специальности в IT-индустрии
Гуманитарные специальности в IT-индустрииГуманитарные специальности в IT-индустрии
Гуманитарные специальности в IT-индустрии
Noveo
Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)
Noveo
Стилизация текста (HTML5 тема 05 - стилизация текста)
Стилизация текста (HTML5 тема 05 - стилизация текста)Стилизация текста (HTML5 тема 05 - стилизация текста)
Стилизация текста (HTML5 тема 05 - стилизация текста)
Noveo
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)
Noveo
Сессии и авторизация
Сессии и авторизацияСессии и авторизация
Сессии и авторизация
Noveo
PHP Advanced
PHP AdvancedPHP Advanced
PHP Advanced
Noveo
PHP and MySQL
PHP and MySQLPHP and MySQL
PHP and MySQL
Noveo
Push Notifications (Lecture 22 – push notifications)
Push Notifications (Lecture 22 – push notifications)Push Notifications (Lecture 22 – push notifications)
Push Notifications (Lecture 22 – push notifications)
Noveo
RxJava+RxAndroid (Lecture 20 – rx java)
RxJava+RxAndroid (Lecture 20 – rx java)RxJava+RxAndroid (Lecture 20 – rx java)
RxJava+RxAndroid (Lecture 20 – rx java)
Noveo
Работа с геоданными (Lecture 18 – geolocation)
Работа с геоданными (Lecture 18 – geolocation)Работа с геоданными (Lecture 18 – geolocation)
Работа с геоданными (Lecture 18 – geolocation)
Noveo
Material Design (Lecture 15 – material design)
Material Design (Lecture 15 – material design)Material Design (Lecture 15 – material design)
Material Design (Lecture 15 – material design)
Noveo
Database (Lecture 14 – database)
Database (Lecture 14 – database)Database (Lecture 14 – database)
Database (Lecture 14 – database)
Noveo
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Noveo
XML, JSON (Lecture 11 – XML, JSON)
XML, JSON (Lecture 11 – XML, JSON)XML, JSON (Lecture 11 – XML, JSON)
XML, JSON (Lecture 11 – XML, JSON)
Noveo
Android - 16 - QR
Android - 16 - QRAndroid - 16 - QR
Android - 16 - QR
Noveo

Семантика текста (HTML5 тема 04 - семантика текста)

  • 2. Семантическое значение тегов <b> и <strong> <b> для выделения кусков текста с целью обратить внимание читателей, Например: ключевые слова в документе, названия продуктов, первый абзац в статье. <strong> как и раньше означает повышенную значимость своего содержимого.
  • 3. <i> содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. HTML: <i>Per aspera ad Astra</i> — в переводе с латыни изречение означает «Через тернии к звёздам». Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам». Семантическое значение тега <i>
  • 4. Семантическое значение тега <em> <em> текст имеет эмоциональную окраску. HTML: Казнить <em>нельзя</em>, помиловать. Казнить нельзя, помиловать.
  • 5. Семантическое значение тега <s> <s> представляет информацию, которая утратила свою актуальность. HTML: Купи по цене - 999 р. вместо <s>1000 р.</s>! Купи по цене - 999 р. вместо 1000 р.!
  • 6. Семантическое значение старых тега <del> <del> показывает, что текст ошибочен. Например, для выделения текста, который был удален в новой версии HTML: В последующих версиях <del>этот недостаток был удален</del>. В последующих версиях этот недостаток был удален.
  • 7. Семантическое значение тега <q> <q> - определяет короткую цитату, выделяет ее кавычками. HTML: Текст с <q>короткой цитатой</q>. Текст с “короткой цитатой”.
  • 8. Семантическое значение тега <blockquote> <blockquote> определяет блок с цитатой. HTML: Цитата: <blockquote>На древнегреческом портале античного мира было начертано: познай самого себя <cite> — Оскар Уальд.</cite></blockquote> Цитата: “На древнегреческом портале античного мира было начертано: познай самого себя” — Оскар Уальд.
  • 9. Семантика нового тега <mark> Текст находящийся между этими тегами становится “выделенным”. Одно из предназначений данного тега, обрамлять слова в тексте, которые например совпадают со словом введенным пользователем в поисковую строку. Текст становится выделенным. HTML: Текст становится <mark>выделенным</mark>.
  • 10. Предназначен для создания дат и времени в формате ISO вида: YYYY-MM- DDThh:mm:ss. Может обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO. 2 сентября 2016 был опубликован этот пост. <time datetime=”2016-02-09”>2 сентября 2016</time> был опубликован этот пост. Семантика нового тега <time>
  • 11. Указывает браузеру, где надо перенести длинное слово, если оно не вмещается. метоксихлор диэтиламино метил HTML: метоксихлор<wbr>диэтиламино<wbr>метил Семантика нового тега <wbr>
  • 12. Полезные ссылки Все теги HTML5: https://developer.mozilla.org/ru/docs/Web/HTML/Element Спецификация: https://www.w3.org/TR/html5/