{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":52,"offset":24}],"inlineStyleRanges":[],"text":"\uD83D\uDC4B\uD83C\uDFFB Привет! С вами снова Merion Academy - платформа доступного IT образования и сегодня мы поговорим о том, как писать HTML код. Гооу","type":"unstyled","key":"f91ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":30,"style":"BOLD"}],"text":"Основой любого сайта является HTML. Это первое, что видят люди. Без него сайта бы не существовало.","type":"unstyled","key":"63iec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому так важно придерживаться правильных методов написания кода. Если этого не делать, то посетители вашего сайта получат плохой пользовательский опыт.","type":"unstyled","key":"80tu5"},{"data":{"image":{"id":"6307b785975ea333eb216163"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f3ran"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML всегда есть, чему поучиться. Причем не важно, новичок вы в программировании или опытный специалист.","type":"unstyled","key":"c6nb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данной статье мы поговорим о лучших практиках HTML. Давайте начнем.","type":"unstyled","key":"8hens"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Лучшие практики HTML – это набор правил, помогающих создавать сайты, одинаково удобные для чтения и сопровождения.","type":"unstyled","key":"1pa9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При создании сайта на HTML необходимо придерживаться следующих принципов:","type":"unstyled","key":"343pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте только один элемент

для страницы","type":"header-three","key":"3jkj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML доступно 6 различных тегов заголовков – от

до

. Тегом

отмечается основной заголовок (название веб-страницы), а тег

используется для наименее важного заголовка.","type":"unstyled","key":"3g3hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег

крупнее

,

крупнее

и так до тега

. Размер каждого заголовка уменьшается по степени его важности.","type":"unstyled","key":"ac3mj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень важно не добавлять более одного элемента

на странице.","type":"unstyled","key":"1nh2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"51guv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n
\n
Писать код – это весело?
\n
Чем больше вы пишете, тем опытнее становитесь
\n
\n
\n
Писать код – это весело
\n
Лучше писать код с удовольствием
\n
\n
","type":"unstyled","key":"fmbn3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В примере выше мы используем тег

в первом и втором блоке
. Такой код, конечно же, заработает, но это не самый правильный вариант оформления.","type":"unstyled","key":"bnavj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше вот так:","type":"unstyled","key":"6jtkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n
\n
Писать код – это весело?
\n
Чем больше вы пишете, тем опытнее становитесь
\n
\n
\n
Писать код – это весело
\n
Лучше писать код с удовольствием
\n
\n
","type":"unstyled","key":"96hoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, наличие одного элемента
на странице – крайне важно для поисковой оптимизации (SEO). Через этот тег поисковики понимают, что находится на странице (главная мысль страницы).","type":"unstyled","key":"6ivd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забывайте про иерархию заголовков в HTML","type":"header-three","key":"c3o2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вы пользуетесь тегами заголовков, важно следовать установленной иерархии: после
идет
, за
следует
и т.д...","type":"unstyled","key":"9dnv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не перескакивайте от
к
. Некоторые посетители сайта используют средства чтения с экрана. И таким пользователям бывает трудно понять содержимое вашей страницы при нарушенной иерархии элементов.","type":"unstyled","key":"cbada"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Средства чтения с экрана – это одна из специальных возможностей, помогающая людям получать доступ к цифровому содержимому (сайтам или приложениям) и взаимодействовать с ним через звуки и касания. Основные пользователи данной технологии – слабовидящие или незрячие люди.","type":"unstyled","key":"608ub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"8j7rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Писать код – это весело
\n
Лучше писать код с удовольствием
\n
Постоянство – это ключ
","type":"unstyled","key":"5kqc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше вот так:","type":"unstyled","key":"16ac0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Писать код – это весело?
\n
Чем больше вы пишете, тем опытнее становитесь
\n
Писать код – это весело
","type":"unstyled","key":"9eo5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляйте подписи к изображениям через элемент figure","type":"header-three","key":"46itm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавлять подписи к изображениям рекомендуется через элемент
. А чтобы все заработало, нужно прописать не только
, но и
.","type":"unstyled","key":"eic5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"d27vg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n\n
Это изображение мужчины, который работает за компьютером
\n
","type":"unstyled","key":"8eh5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С точки зрения кода, пример выше написан хорошо. Но лучше сделать все иначе. Если изображение не загрузилось, отображается содержимое alt, и на экране показывается текст из элемента
. Но посетитель, использующий средства чтения с экрана, не сможет отличить тексты в
и alt.","type":"unstyled","key":"6jq9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните: даже если ваш код работает, это еще не значит, что вы делаете все правильно.","type":"unstyled","key":"c597q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше сделать вот так:","type":"unstyled","key":"7fguq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n\n
Это изображение мужчины, который работает за компьютером
\n
","type":"unstyled","key":"95fs4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример выше – отличный способ, как можно добавить подписи к изображениям.","type":"unstyled","key":"abg8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему важно добавлять подписи к изображениям именно так:","type":"unstyled","key":"8nqq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поисковая оптимизация. Ваши изображения легче найти в поисковых системах.","type":"unordered-list-item","key":"5s1s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посетителям, использующим средства чтения с экрана, проще понять содержимое вашей страницы.","type":"unordered-list-item","key":"ejlju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используйте div для шапки и подвала; для этого подходят семантические элементы","type":"header-three","key":"gg9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические элементы HTML используются для логической разметки структуры документа на странице. Кроме того, они нужны для правильной сборки страницы.","type":"unstyled","key":"cj6n1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откажитесь от
в пользу семантики. Не используйте
для обозначения шапки и подвала страницы. Для этих целей есть семантические элементы
и
.","type":"unstyled","key":"dei8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент
показывает навигацию или вводную часть страницы.","type":"unstyled","key":"efq6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В элементе
размещается информация об авторских правах или ссылки для перехода на страницы.","type":"unstyled","key":"8odle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"cki2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\nГлавная\nО нас\nКонтакты\n
\n
\nГлавная\nО нас\nКонтакты\n
","type":"unstyled","key":"sfg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В примере выше тег
используется в качестве контейнера для
и
. Такой код будет работать, но это не самый правильный способ реализации.","type":"unstyled","key":"2unf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше вот так:","type":"unstyled","key":"belq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n
\n
\n
\nГлавная\nО нас\nКонтакты\n
","type":"unstyled","key":"3p2bt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше всего добавлять
и
на страницу именно так.","type":"unstyled","key":"7u625"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему важно добавлять
и
с помощью семантических элементов HTML:","type":"unstyled","key":"17h19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование семантических элементов для шапки и подвалаупрощает чтение кода.","type":"unordered-list-item","key":"e4o2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Такой способ предлагает более качественный пользовательский опыт. Посетителям, использующим средства чтения с экрана, будет проще понять содержимое страницы.","type":"unordered-list-item","key":"1jmn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используйте и для выделения текста на странице","type":"header-three","key":"5hu9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги и выделяют текст жирным шрифтом (b) или курсивом (i). Но не стоит ими пользоваться на сайте, поскольку оба тега не несут семантической нагрузки. Для выделения текста лучше подходит свойство CSS font-weight, либо теги и .","type":"unstyled","key":"62cf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тегом отмечают важный текст на странице. Он выделяет текст или делает его жирным. Тег подчеркивает текст или добавляет курсив (точно также, как ).","type":"unstyled","key":"1htg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"65mor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пишите код в своем собственном темпе
\n
пишите код в своем собственном темпе
","type":"unstyled","key":"3r9j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере текст выделяется жирным и курсивом. Но пользователи со средствами для чтения с экрана не заметят разницы. Данные теги не несут семантического значения.","type":"unstyled","key":"6449d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":13,"style":"BOLD"}],"text":"Спецификация HTML 5 рекомендует нам использовать теги и только в самых крайних случаях и при отсутствие альтернативных вариантов.","type":"unstyled","key":"emora"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше делайте так:","type":"unstyled","key":"cggia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Пишите код в своем собственном темпе
\n
пишите код в своем собственном темпе
","type":"unstyled","key":"dsp48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используйте блочные элементы внутри строчных","type":"header-three","key":"bm3lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блочные элементы начинают новую строку на странице. По умолчанию действие этих элементов распространяется на всю строку – от ее начала до конца. Вы не сможете добавить строчные элементы внутри блочных без CSS.","type":"unstyled","key":"5gus1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К блочным элементам относятся
,
–
и
.","type":"unstyled","key":"aidua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строчные элементы действуют на небольшую часть страницы. Они не начинаются с новой строки.","type":"unstyled","key":"33c83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К строчным элементам относятся , и .","type":"unstyled","key":"dj472"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы не можете добавить блочные элементы внутри строчных.","type":"unstyled","key":"2l71n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не делайте так:","type":"unstyled","key":"l80h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n
Посетите merion
\n","type":"unstyled","key":"6turk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У вас не получится добавить
внутрь элемента , поскольку
относится к блочным элементам, а – к строчным.","type":"unstyled","key":"d241b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше сделать так:","type":"unstyled","key":"8a3l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\nПосетите Merion\nдля изучения IT\n
","type":"unstyled","key":"djh58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это отличный пример того, как можно вложить строчные элементы внутри блочных.","type":"unstyled","key":"5k071"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно помнить, что:","type":"unstyled","key":"4pv3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блочный элемент нельзя вложить внутри строчного.","type":"unordered-list-item","key":"alaqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строчный элемент можно вложить внутри блочного.","type":"unordered-list-item","key":"54p3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строчный и блочный элемент можно вложить внутри блочного.","type":"unordered-list-item","key":"ei9i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Небольшое уточнение: «вложить» что-то в данном случае означает «добавить внутрь». Так что, говоря «это нельзя вложить», я имею ввиду, что вы не сможете добавить один такой элемент внутрь другого.","type":"unstyled","key":"cm146"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, вы запомнили 3 простых правила для вложения элементов.","type":"unstyled","key":"5haif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, CSS позволяет преобразовать блочные элементы в строчные. Для этого используется display: inline-block и display: inline.","type":"unstyled","key":"3d1k7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А еще важно помнить простую истину: даже если ваш код работает, это еще не значит, что вы делаете все правильно.","type":"unstyled","key":"42kgd"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":24,"offset":48}],"inlineStyleRanges":[],"text":"Именно поэтому я всегда рекомендую пользоваться валидатором разметки W3C и дополнительно проверять свой код.","type":"unstyled","key":"bmqn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот валидатор отслеживает правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д.","type":"unstyled","key":"clab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для проверки кода можно скопить его URL и добавить на сайт, либо загрузить сам файл HTML.","type":"unstyled","key":"3lpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"551d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеемся, что данная статья помогла вам узнать что-то новое о лучших практиках в HTML. Мы постарались включить в нее самые полезные советы, которыми можно начинать пользоваться уже сегодня.","type":"unstyled","key":"2jbr2"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":52,"offset":47}],"inlineStyleRanges":[],"text":"До встречи на нашей образовательной платформе.\nMerion Academy - платформа доступного IT образования.","type":"unstyled","key":"3ehsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hBHFTyVnifV28Ks7ikbD"}],"entityMap":{"0":{"data":{"href":"https://wiki.merionet.ru/merion-academy/?utm_source=dzen&utm_medium=own&utm_campaign=article","url":"https://wiki.merionet.ru/merion-academy/?utm_source=dzen&utm_medium=own&utm_campaign=article"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://wiki.merionet.ru/merion-academy/?utm_source=dzen&utm_medium=own&utm_campaign=article","url":"https://wiki.merionet.ru/merion-academy/?utm_source=dzen&utm_medium=own&utm_campaign=article"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}