Текст – наше всё. Основы редактирования текста в HTML. Часть 1

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Текст – неотъемлемая часть веб-страниц. Вместе с фото, видео и другим контентом он чётко доносит нужную информацию. При этом пользователи больше любят структурированный контент. Эту структуру тексту можно придать с помощью HTML-элементов, о которых мы сейчас поговорим."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "обложка-основы-редактирования-текста.png", "filesize": 533088, "height": 720, "pic_id": 672277, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D0%BE%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0.jpeg", "width": 1280}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Не переживайте, если не поймёте материал чисто по теории. В конце статьи я прикреплю ссылку на выполненное практическое задание – разметку письма. Там использованы все элементы, которые мы здесь затронем."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Условные обозначения:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "🧱 – "}, {"type": "string", "attributes": {"href": "https://pabliko.ru/@top/ne_vse_tak_prosto_podrobnee_ob_html-elementah-207784/"}, "string": "блочный"}, {"type": "string", "attributes": {}, "string": " элемент,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "✏️ – "}, {"type": "string", "attributes": {"href": "https://pabliko.ru/@top/ne_vse_tak_prosto_podrobnee_ob_html-elementah-207784/"}, "string": "строчный"}, {"type": "string", "attributes": {}, "string": " элемент."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "🧱 Заголовок– <h1>-<h6>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Есть 6 уровней заголовков. Первый по значимости – <h1>. Пример использования – название статьи на сайте. Элемент <h1> должен встречался на веб-странице (не сайте) "}, {"type": "string", "attributes": {"bold": true}, "string": "только один раз"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<h2> используют для обозначения подзаголовков. На примере этой статьи вы можете посмотреть, как элементы <h1> и <h2> вписаны в код. Для этого:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "нажмите правой кнопкой мыши по её названию статьи;"}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Выберите «посмотреть код» или «исследовать» (зависит от браузера)."}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Инструмент найдёт и выделит элемент <h1> в коде. Аналогично с поиском подзаголовков."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На некоторых сайтах есть подподзаголовки (<h3>). <h4>-<h6> используют реже."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "🧱 Абзац – <p>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Элемент нужен для группировки однотипного контента (в том числе и текстового). Много о нём рассказывать не буду. Скажу только, что иногда внутри абзаца используют <br> – void-элемент для переноса строки. Так поступают, когда "}, {"type": "string", "attributes": {"italic": true}, "string": "многострочный"}, {"type": "string", "attributes": {}, "string": " контент должен остаться в "}, {"type": "string", "attributes": {"italic": true}, "string": "одном"}, {"type": "string", "attributes": {}, "string": " абзаце (в стихотворениях, письмах и др.)"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Использование абзацев и заголовков", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "заголовок-абзац-код.jpg", "filesize": 67116, "height": 737, "pic_id": 672278, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-%D0%B0%D0%B1%D0%B7%D0%B0%D1%86-%D0%BA%D0%BE%D0%B4.jpeg", "width": 985}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "🧱 Списки"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В HTML 3 вида списков:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Маркированные. Порядок пунктов не важен."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Нумерованные. Порядок пунктов имеет значение."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Список описаний. О нём расскажу дальше."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Первые два оформляются просто: начало и конец маркированного списка обозначают теги <ul> и </ul>, а нумерованного – <ol> и </ol>. Пункты списка в обоих случаях обёрнуты в теги <li> и </li>. Пример кода для вызова маркированного и нумерованного списка смотрите на "}, {"type": "string", "attributes": {"href": "https://codepen.io/Arthur-Arutunyan/pen/eYbYpmp"}, "string": "codepan. io (списки)"}, {"type": "string", "attributes": {}, "string": " или на скриншоте ниже."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Код нумерованного и маркированного списка", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "списки-код.jpg", "filesize": 54648, "height": 714, "pic_id": 672281, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B8-%D0%BA%D0%BE%D0%B4_2NF9jYa.jpeg", "width": 960}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Список описаний используют, например, для расшифровки нескольких терминов/понятий. Его синтаксис немного сложнее. Он состоит из трёх элементов:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<dl> (description list) – обёртка списка;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<dt> (description term) – термин, который нужно описать;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<dd> (description definition) – само описание термина."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Пример кода со списком описаний Вы также найдёте на "}, {"type": "string", "attributes": {"href": "https://codepen.io/Arthur-Arutunyan/pen/RwEwWPM"}, "string": "codepan. io (список описаний)"}, {"type": "string", "attributes": {}, "string": " и на скриншоте ниже."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Код списка описаний", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "список-описаний-код.jpg", "filesize": 71835, "height": 734, "pic_id": 672282, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA-%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B9-%D0%BA%D0%BE%D0%B4_4CNFOrV.jpeg", "width": 1024}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "✏️ Акцент и выделение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Привлекают внимание пользователя и поисковых систем. Для обозначения важного в тексте есть два элемента:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<em> - выделяет текст "}, {"type": "string", "attributes": {"italic": true}, "string": "курсивом"}, {"type": "string", "attributes": {}, "string": ";"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<strong> - выделяет текст "}, {"type": "string", "attributes": {"bold": true}, "string": "жирным"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Внимание: <em> и <strong> "}, {"type": "string", "attributes": {"bold": true}, "string": "не предназначены"}, {"type": "string", "attributes": {}, "string": " для декоративного оформления. Они придают содержимому некую семантику, которую поисковики учитывают при ранжировании. Для оформления используйте специальные CSS-свойства (font-weight, font-style: italic и text-decoration: underline)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Также не рекомендуется подгонять под <strong> и <em> большие куски текста. Людям тяжело воспринимать такой контент. Отсюда негативный поведенческий фактор -> падение позиций веб-страницы в поисковой выдаче -> снижение количества её посетителей."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Хотите посмотреть <em> и <strong> в коде? Найдите в статье слово, выделенное курсивом или жирным. Посмотрите его элемент в инструменте разработчика."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "✏️ Начертание"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Это рисунок шрифта текста. Его контролируют 3 элемента - <b>, <i> и <u>. Раньше их использовали для украшения текста. Но HTML5 ввёл "}, {"type": "string", "attributes": {"href": "https://html.spec.whatwg.org/multipage/"}, "string": "новые правила"}, {"type": "string", "attributes": {}, "string": " (обновление от 17. 08. 2023):"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<b> выделяет ключевики и названия продуктов."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<u> подчёркивает орфографические ошибки и имена собственные."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<i> оборачивает технические термины, таксономические обозначения, транслитерации, мысли, названия судов на западе, иностранные идиомы. Исключение: зарубежные термины. Их лучше оборачивать так:"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "attachment", "attributes": {"caption": "Шаблон обёртки иностранных терминов", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "шаблон-обёртка-термина.jpg", "filesize": 61398, "height": 897, "pic_id": 672283, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%BE%D0%B1%D1%91%D1%80%D1%82%D0%BA%D0%B0-%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%B0.jpeg", "width": 1887}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Интересно: для выделения ударений вместо <u> лучше использовать <em> (пункт 4. 5. 22 "}, {"type": "string", "attributes": {"href": "https://html.spec.whatwg.org/multipage/"}, "string": "HTML Living Standart"}, {"type": "string", "attributes": {}, "string": " от 17. 08. 2023)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Завершение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Материал вышел объёмнее, чем казалось. Разделю его на две статьи. Ниже оставлю обобщающий конспект и ссылку на обещанный код. Конспект и код содержат больше элементов, чем мы успели разобрать. Можете изучить их сами или дождаться второй части."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Обобщающий конспект и код"}], "attributes": ["heading1"]}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "схема-редактирование-текста.png", "filesize": 390311, "height": 1782, "pic_id": 672284, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/17/%D1%81%D1%85%D0%B5%D0%BC%D0%B0-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0.jpeg", "width": 3494}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Смотрите код по разметке на "}, {"type": "string", "attributes": {"href": "https://codepen.io/Arthur-Arutunyan/pen/yLQWWoe"}, "string": "codepan. io (код письма)"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}], "selectedRange": [3623, 3623]}