HTML — это основа любого веб-сайта. Это первое, что видят люди. Без него не было бы сайта.

В HTML всегда можно узнать что-то новое, независимо от того, являетесь ли вы новичком в программировании или опытным профессионалом.

В этой статье мы поговорим об основных лучших практиках HTML.

Давайте начнём. 💃

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

Вот несколько рекомендаций, которые следует учитывать при создании веб-сайта на основе HTML:

Используйте только один элемент

для одной кодовой таблицы

Не делай этого  ⬇️:

Вместо этого сделайте это ⬇️:

Не пропускайте уровни заголовков в HTML

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

Вместо этого сделайте это  ⬇️:

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

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

Важно добавлять подписи к изображениям таким образом:

Не используйте элементы div для создания верхних и нижних колонтитулов — вместо этого используйте семантические элементы

Семантические элементы HTML более значимо размечают структуру документа на веб-странице. Лучше всего использовать семантические элементы HTML для правильной сборки вашей веб-страницы.

Прочтите эту статью, чтобы узнать больше о семантических элементах HTML.

Избегайте использования и для выделения текста на веб-странице жирным шрифтом и курсивом

Встроенный элемент занимает наименьшую область веб-страницы. Они не начинаются с новой строки на веб-странице.

Важно отметить, что:

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

Надеюсь, вы поняли эти три простых правила вложения элементов.

Вот почему я всегда рекомендую использовать службу проверки разметки W3C для перепроверки ваших кодов.

Этот валидатор проверяет достоверность разметки веб-документов в HTML, XHTML, SMIL, MathML и т. д.: служба проверки разметки W3c.

Вы можете перепроверить свой код, скопировав его URL-адрес и вставив его на сайт или загрузив HTML-файл.

Заключение

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

Постараюсь ответить как можно скорее! Спасибо, что читаете 💙.

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу разработчиков. Начать

HTML (язык разметки гипертекста) — важный язык разметки для создания веб-сайтов. H TML представляет содержимое веб-страницы.

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

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

Не стесняйтесь обращаться к этому руководству во время прохождения сертификации. Если вас интересует подробное введение в HTML, прочтите эту статью HTML на freeCodeCamp.

Оглавление

Элементы заголовка HTML представляют собой основной заголовок и подзаголовки веб-страницы.

Элемент h1 представляет собой наиболее важный заголовок и должен использоваться только один раз на веб-странице.

Элемент h2 представляет собой второй по важности заголовок на странице.

Всего имеется шесть элементов заголовков разделов.

Вот как это выглядит на странице.

Элементы абзаца

Элементы абзаца представляют собой абзацы на веб-странице.

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

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

Основной элемент

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

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

Отступ HTML

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

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

Это пример без отступов.

Но если я отредактирую код, переместив элементы h2 и p на два пробела вправо, теперь у нас будет правильный отступ.

Теперь мы видим, что элементы h2 и p являются дочерними элементами основного элемента.

Элементы изображения

элементы img используются для добавления изображений на веб-страницу.

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

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

Анкерные элементы

Элемент привязки представляет собой ссылку на веб-странице.

Вот основной синтаксис:

Вы используете атрибут href, чтобы указать гиперссылке, куда идти.

Вот пример тега привязки, который ссылается на freeCodeCamp.

Вложение элементов привязки внутри абзацев

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

В этом примере у нас есть текст «Я люблю freeCodeCamp».

Если бы я хотел превратить слово freeCodeCamp в ссылку, я бы обернул его в набор тегов привязки.

Вот как выглядит результат, отображенный на экране.

Целевые атрибуты

Вы используете атрибут target=»_blank» внутри открывающего тега привязки следующим образом:

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

Когда вы нажмете на ссылку freeCodeCamp, вам откроется новая вкладка браузера.

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

Мы также можем добавить атрибут target=»_blank», чтобы ссылка открывалась в новой вкладке.

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

Элементы секций

Элемент раздела используется для группировки разделов содержимого в HTML-документе.

Вот пример элемента раздела.

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

Элементы неупорядоченного списка

Элемент списка ul используется для отображения списка элементов в произвольном порядке. Элемент li представляет отдельный элемент списка.

Вот пример списка продуктов питания.

Вот как это выглядит на экране.

Элементы рисунка и подписи

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

В этом примере у нас есть изображение пяти котят в траве с небольшой подписью под ним.

Вот как это выглядит на странице.

Акцентные элементы

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

В этом примере у нас есть предложение: «Нам нужно немедленно выйти из здания!»

Элемент ol используется для отображения списка элементов в определенном порядке. Элемент li представляет отдельный элемент списка.

Вот пример набора шагов рецепта.

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

Сильные элементы

Сильные элементы — это разделы текста, которые передают ощущение срочности или серьезности.

Мы можем использовать сильные теги, чтобы подчеркнуть серьезность слова «Опасность».

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

Элементы формы

Вот основной синтаксис формы:

Входные данные будут рассмотрены более подробно в следующем разделе.

Форма ввода текста и кнопки отправки

type=»text» сообщает компьютеру, что это текстовый ввод.

Атрибут name используется для представления значения отправляемых данных.

Кнопка отправки используется для отправки информации формы на сервер. type=»submit» сообщает компьютеру, какой это тип кнопки.

Переключатели формы

Попробуйте приведенный ниже пример и обратите внимание, что за раз вы можете выбрать только один вариант. Обратите внимание, что все входные данные имеют одинаковое значение  name=»food».

Элементы маркировки

Элемент label связывает текст метки с входными данными.

Вот пример использования элемента метки для связи текста «Говядина» с входными данными.

Попробуйте пример ниже, щелкнув текст метки. Вы увидите, что радиовход выбран.

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

Элементы набора полей и легенды

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

Вот пример элемента набора полей:

Вот пример элемента легенды:

Вот полный пример того, как элементы набора полей и легенды работают с входными данными формы и метками.

Элементы флажка формы

Вот пример флажка:

Вот как это выглядит на странице.

Вот полный пример использования нескольких флажков для разных городов.

Попробуйте пример ниже, и вы сможете выбрать несколько вариантов.

Значение и проверенные атрибуты

Атрибут value представляет значение для ввода.

Вот пример.

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

Вот простой пример:

Заголовок и титульные элементы

Это пример того, как будет выглядеть голова на реальной веб-странице. Никакая эта информация не отображается на самой веб-странице.

Подробное описание каждого из перечисленных метатегов можно найти в этой статье о шаблоне HTML5.

Атрибут языка

Первой строкой вашего HTML-кода должно быть объявление типа документа. Тип документа сообщает браузеру, в какой версии HTML написана страница.

Что такое HTML?

HTML — это не что иное, как HyperTextMarkupLanguage. Он используется для описания структуры вашего сайта и расположения различных элементов. Вы можете стилизовать свой веб-сайт, используя различные варианты, один из лучших, как мы все знаем, — это CSS (каскадные таблицы стилей).
Существуют различные элементы HTML, такие как заголовки, ссылки, таблицы и т. д. Вы можете освоить их, создавая сторонние проекты, в которых каждая из концепций находит свое применение.

Ресурсы для HTML —

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

Веб-сайты —

Я собираюсь провести вас через базовую дорожную карту HTML, чтобы вы хорошо освоили все концепции и перешли к CSS.

Вы можете посетить мой сайт по адресу —

∙ github.com/36atharva/basic-cv.

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

Время на прочтение

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

Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с современными средствами CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду носиться, давайте начнем.

Функции min() и max()

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

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

Возвращаясь к примеру, мы хотим, чтобы браузер всегда выбирал значение 100%, пока соответствующее значение не станет больше 1024 пикселей. Соответственно, нам остается передать значения 100% и 1024px.

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

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

Ой! Чуть не забыл рассказать, что кроме функции min(), есть еще функция max(). Данная функция напоминает функцию min(), разница только в том, что вместо минимального значения браузеры выбирают максимальное.

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

Давайте рассмотрим пример, где мы делаем элемент, растягивающийся на всю ширину родителя, но имеющий минимальную ширину 1024px:

По аналогии с функцией min(), его можно сократить до одной строки с помощью функции max():

Класс! Установка размеров теперь может выглядеть так кратко. По этой причине я, недолго думая, перешел на использование функций min() и max().

А еще функции можно комбинировать с CSS Custom Properties, и можно написать вот такой код:

Но это уже дело вкуса. Просто я люблю использовать CSS Custom Properties, и поэтому поделился с вами этой фишкой. Может быть, кому-то она понравится.

Браузерная поддержка: Edge, Firefox, Chrome, Opera, Safari, iOS Safari, Android Browser, Chrome Android, Samsung Internet по данным Can I use.

Свойство inset

При использовании position: absolute или position: fixed иногда приходится растягивать элемент на всю ширину и высоту. Например, использование свойств top, right, bottom и left — это один из популярных способов решения данной задачи.

Если вы фанат этого метода, то для вас у меня хорошие новости. Мы можем сократить этот код до 2 свойств! В этом на поможет свойство inset.

Свойство inset — это шорткат, задающий значение для свойств top, right, bottom и left, с помощью которого значения отступов будут автоматически подстроены в зависимости от направления текста на разных языках. Я не буду вдаваться в подробности, потому что в нашей задаче это излишне.

Самое главное, что свойство поможет нам одновременно задать значение для отступов со всех сторон. В качестве примера я перепишу предыдущий фрагмент кода, где мы задали 0 в качестве значения.

Представляете, как просто? А для полной картины я хочу показать вам второй способ решения задачи, основанный на том, что нам требуется задать значение 100% для свойств width и height.

Такой фрагмент кода также может быть сокращен до двух строк с помощью свойства inset.

Я теперь каждый раз кайфую, когда пишу такой код и вспоминаю, что теперь не надо писать еще три дополнительных строки. Давайте использовать свойство inset чаще.

Свойство gap

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

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

Свойство gap — это шорткат для записи значений свойств row-gap и column-gap. Первое задает отступ между элементам, а второе — между столбцами. Сначала свойство gap работало только вместе с гридами, а потом стало поддерживаться всеми браузерами для флексбоксов. После этого момента я предлагаю использовать его вместо свойства margin.

Для демонстрации преимущества свойства я с его помощью сокращу код всех предыдущих решений до следующего:

Вот так лаконично. Так что я больше не могу использовать решения со сложными селекторами и свойством margin. Свойство gap — мой фаворит. А чтобы оно стало и вашим, я покажу еще один пример, где свойство gap прекрасно себя показывает.

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

Чтобы учесть все требования, нам нужно создать несколько классов, которые будут задавать отступ между текстом и иконкой, но также они не должны конфликтовать с состояниями «один» и «четыре». Поэтому для состояния «два» мы будем использовать дополнительный класс .button__icon—pos-before, а для состояния «три» — .button__icon—pos-after.

Именно так решалась данная задача до появления свойства gap, а теперь можно просто сделать то же самое с помощью него.

Все! Мы удалили классы .button__icon—pos-before и .button__icon—pos-after, потому что браузер сам установит отступ там, где нужно. А если у нас состояние только с иконкой, то вообще не установит. Нам ничего дополнительно делать не нужно. Красота?!

Свойства margin-inline, margin-block, padding-inline и padding-block

При разработке приложений встречаются ситуации, когда приходится использовать 0 для свойств margin и padding, чтобы задать значения сразу для двух сторон. Например, я задам значение 10px сверху и 15px снизу для свойств margin и padding.

Таким образом, предыдущий фрагмент кода можно переписать вот так:

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

Раньше, когда мы создавали блок, который центрирует содержимое страницы, нам приходилось использовать следующий фрагмент кода:

А теперь мы можем заменить его кодом с использованием свойств margin-inline и padding-inline:

Моя душа спокойна. Если вас также раздражал 0, как и меня, то теперь вы знаете, что с этим делать.

Заключение

Хочется верить, что рассказанные мной техники вам понравились, и вы задумаетесь над тем, как их использовать. Если я что-то забыл, то, пожалуйста, напишите об этом. Мне будет интересно почитать!

НЛО прилетело и оставило здесь промокод для читателей нашего блога:

— 15% на все тарифы VDS (кроме тарифа Прогрев) — HABRFIRSTVDS.

Вступление

Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Используйте правильные теги

Про какие теги нам следует стоит помнить?

Структурные теги документа

Помимо трёх базовых семантических тегов существует ряд других. Разберём их ниже.

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

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

Заголовки

Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.

Блочные теги

<figure>
<blockquoute cite=»https://www.youtube.com/watch?v=ZXsQAXx_ao0″>
Just Do It!
</blockquote>
<figcaption>
Shia LaBeouf, <cite>Motivational Speech</cite>
</figcaption>
</figure>

Одиночный тег для разделения контента. Про него забывают и заменяют на border-bottom, но помимо визуального отображения этот тег несёт семантический смысл — тематическое разделение абзацев.

Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.

Списки

Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.

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

Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:

Списки описаний применяются для формирования списков терминов.

Строчные теги

Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.

Используются для добавления в текст индексов и степеней. Удобны для описания формул.

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

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

Интерактивные элементы

Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.