Как писать html: Давайте писать HTML-код, как профессионалы

alexxlab

Содержание

Давайте писать HTML-код, как профессионалы

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Let’s write HTML like a pro».

Photo by Goran Ivos on Unsplash

HTML напоминает ребенка, с которым никто не играет, потому что JavaScript и CSS отвлекают внимание на себя. Сегодня мы рассмотрим несколько вещей, способных помочь вернуть этого «ребенка» в центр внимания.

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

DOCTYPE

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

Имейте в виду, что DOCTYPE не является элементом HTML.

В HTML5 это выглядит следующим образом:

<!DOCTYPE html>

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

Хотите узнать побольше о других типах документов? Можете почитать об этом здесь.

Опциональные теги

Некоторые теги в HTML5 опциональны, главным образом потому, что элемент присутствует неявным образом. Это может показаться странным, но вы вполне можете пропустить тег <html>, и страница все равно прекрасно отобразится.

<!DOCTYPE HTML>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

Приведенный пример HTML-кода валиден, но есть некоторые случаи, когда так сделать не получится, например, когда после тегов идут комментарии:

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example. </p>
  </body>
</html>

Этот код невалиден, потому что комментарий оказывается вне тега <html>.

Закрывающие теги

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

<div>
  <img src="example.jpg" alt="example" />
  <a href="#" title="test">example</a>
  <p>example</p>
</div>

Все приведенные в этом примере теги валидны. Но есть и исключения из правила, предписывающего закрывать теги.

В следующих элементах самозакрывающиеся теги валидны, но не обязательны:

<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

Примечание: обычные теги не могут быть самозакрывающимися.

<title />

Это неправильное написание.

Charset

Заранее определяйте кодировку своего документа. Хороший тон — поместить эту информацию в самом верху, внутри элемента <head>.

<head>
  <title>This is a super duper cool title, right 😥?</title>
  <meta charset="utf-8">
</head>

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

<head>
  <meta charset="utf-8">
  <title>This is a super duper cool title, right 😃?</title>  
</head>

Язык

Еще одна причина не пропускать опциональные теги — использование атрибутов. Не отказываясь от тега <html>, вы можете (и это рекомендуется) определить язык вашей веб-страницы. Это очень важно с точки зрения доступности и поиска.

<html lang="fr-CA">
  ...
</html>

Тег title

Никогда не пропускайте тег <title>. Это очень ухудшает доступность. Кроме того, я бы не пользовался сайтом, где не используется этот тег. Если открыть страницу такого сайта, то 2 минуты и 20 вкладок спустя вы ее уже не найдете (вкладке будет нечего вам показать).

Тег base

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

<base href="http://www.example.com/" />

Если в вашем приложении установлен базовый URL, как в примере выше, то href=»#internal» будет интерпретироваться как href=»http://www.example.com/#internal«.

Но при этом href=»example.org» будет интерпретироваться как href=»http://www.example.com/example.org«.

Description

Этот мета тег очень полезен, хотя и не является неотъемлемой частью лучших подходов. Он имеет огромное значение для поисковиков, когда они исследуют ваш сайт.

<meta name="description" content="HTML best practices">

Семантические теги

Хотя вы можете обойтись одними div-ами, это еще не значит, что так нужно делать. Семантический HTML наполняет вашу страницу смыслом. Такие теги как p, section, h{1-6}, main, nav являются семантическими. Если вы используете тег <p>, пользователи будут знать, что это абзац текста, а браузеры будут понимать, как его следует отображать.

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

Не используйте hr для форматирования

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

<p>Абзац о щенках.</p>
<p>Абзац о любимой еде щенков.</p>
<p>Абзац о породах щенков.</p>
<hr>
<p>Абзац о том, почему я брею голову.</p>

Будьте осторожны, используя атрибут title

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

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

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

О правильном использовании этого атрибута можно почитать здесь.

Одинарные и парные кавычки

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

<img alt="super funny meme" src='/img/meme.jpg'>

Делайте так:

<img alt="super funny meme" src="/img/meme.jpg">

Опускайте булевы значения

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

<audio autoplay="autoplay" src="podcast.mp3">
<!-- лучше так -->
<audio autoplay src="podcast.mp3">

Опускайте атрибут type

Не нужно добавлять атрибут type в теги script и style. В некоторых сервисах, например, в W3C Validator, вы получите ошибку валидации при проверке вашего кода.

Проверяйте вашу разметку

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

Скажите «нет» встроенным стилям

В HTML-файле пишется контент. То, как он выглядит, это уже представление. Оставьте представление CSS и не используйте встроенные стили. Это поможет как разработчикам, которые будут работать с кодом в дальнейшем, так и браузерам.

Заключение

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

  • HTML best practices on GitHub
  • W3C school HTML style guide

Как написать HTML-код быстрее — TheFastCode

(Кредит на изображение: будущее)

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

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

HTML-теги правильный путь. Также см. Наше руководство по использованию HTML Boaterplate Отказ

Хотите отклонить код? Попробуйте это Строители сайта Отказ Или для дополнительной помощи по пути выберите веб хостинг Сервис с технической поддержкой.

Создать HTML на лету

При написании большого количества HTML за один ходи, написание каждого тега вручную может стать очень утомительным, очень быстро. Например, при написании списка ссылок нам нужно убедиться, что & lit; li & gt; и & lt; a & gt;

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

Ускорив свой рабочий процесс HTML и CSS с Emmet (Кредит на изображение: Emmet.io)

Как использовать Emmet

Чтобы убедиться, что вы уменьшаете шансы этого происхождения, вы можете использовать таланты Emmet. Отказ Это инструмент, который сэкономит вам много печати и значительно улучшит ваш HTML & AMP; Рабочий процесс CSS. Emmet позволяет вам создавать элементы, набрав селектор CSS. Затем он будет разбирать и расширить этот элемент в обычный HTML. Ниже приведен оригинальный элемент, созданный в Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet обнаружит этот элемент, анализируйте его, а затем преобразуйте элемент в стандартный HTML, как показано ниже. Быстрый взгляд на элемент Emmet предлагает, чтобы & lit; li & gt; умножается на ( * 3. ) и каждый & lit; li & gt; Экземпляр будет называться главой, а затем соответствующее число (до 3).

Обратите внимание, сколько символов содержит элемент Emmet и сколько стандартных HTML содержит. Даже этот маленький фрагмент кода демонстрирует, сколько времени может быть сохранено с помощью сокращения Emmet.

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 1
 из 3 & lt; / a & gt; / li & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 2
 из 3 & lt; / a & gt; / li & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 3
 из 3 & lt; / a & gt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet также знает о контексте. Например, если мы редактируем & lt; стол и GT; Скорее всего, мы захотим некоторые & lt; tr & gt; (Это строки) элементы, чтобы заполнить его. Все, что нам нужно было сделать, это указать, сколько нам нужно.

Это просто быстрый пример того, что может сделать Emmet, но есть еще много вариантов конфигурации. К ним относятся редактирование CSS, BEM (модификатор блочного элемента) класса и существует даже генератор LOREM IPSUM.

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

Используйте PUG для динамического контента

Пока Emmet идеально подходит для статического контента, что происходит, если контент должен быть более динамичным? Например, нам может потребоваться генерировать персонализированные домашние страницы, комплексные заказы или повторять общие блоки HTML. Это все возможно в JavaScript, но путем предварительной рендеринга этого контента мы можем получить дополнительную скорость повышения, не полагаясь на браузер пользователя. Помните, что у вас есть тяжелая страница Media, вы захотите поддержать его с надежным облачное хранилище Отказ

Шаг вперед мопс. Это инструмент шаблонов для HTML. Вы можете написать страницы в формате «.pug», и PUG будет прочитать этот файл, ввести некоторые динамические данные в него и возвращают стандартный HTML. Пример ниже — это то, как вы пишете код в PUG, чтобы создать тот же HTML, что и пример Emmet (выше).

 ул
  каждый вал в [1, 2, 3]
    лита
      A (Href = "", Class = "Глава") Глава
# {val} 3

Файл мопса использует только отступ для указывания вложенности.Он может повторять значения для генерации больших количеств HTML в одном проходе.Эти файлы «.PUG» предназначены для повторного использования в повторном использовании в проекте.

PUG доступен для установки из менеджера пакетов NPM ОтказНо, если вы хотите больше информации о том, как начать с мопса, вы получите посещение интернет сайт Отказ

Этот контент изначально появился в журнале Web Designer.

Прочитайте больше:

  • 10 лучших CSS Frameworks
  • CSS анимация Примеры для воссоздания
  • 8 HTML Теги, которые вы должны использовать (и 5, чтобы избежать)

Как писать HTML — Javatpoint

следующий → ← предыдущая

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

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

Шаг 1 — Откройте текстовый редактор для написания кода.

Хотя есть различные текстовые редакторы, которые могут быть легко загружены новичком, лучшим текстовым редактором является Блокнот (в Windows) и TextEdit (в Mac). В Windows текстовый редактор по умолчанию — 9.0008 Блокнот , а в Mac редактором по умолчанию является TextEdit. В окнах мы можем открыть редактор Notepad , нажав кнопку «Пуск» и набрав блокнот, как показано на скриншоте ниже —

.

Мы также можем использовать текстовый редактор Notepad++ в Windows для написания HTML-программ. Изучив основы, мы можем использовать другие профессиональные редакторы, такие как Notepad++, Sublime Text, Vim, и т. д.

Шаг 2 — Теперь начните писать HTML-программы в текстовом редакторе. Теги HTML заключены в открытые теги (<>) и закрытые теги (). Предположим, нам нужно создать абзац, поэтому в HTML абзац создается путем ввода тега открытого абзаца

, а затем ввода тега закрытого абзаца

.

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

Шаг 3: Сохраните файл либо с расширением . html , либо с расширением .htm , как показано на снимке экрана ниже.

Шаг 4: Теперь вы можете выполнить свой файл .html. Для этого вам нужно перейти в место, где вы сохранили свой файл. Затем выберите соответствующий файл, щелкните его правой кнопкой мыши и выберите нужный веб-браузер для запуска файла. Это может быть ясно из следующего скриншота —

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

Теперь давайте посмотрим, как мы можем начать с HTML или как писать HTML-программы.

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

<тело>

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

.

<голова> <название

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

,

,

,

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

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

Мы можем создавать абзацы в HTML, используя тег

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

    и
      . Изображение можно вставить с помощью тега .

      Чтобы добавить стиль к определенному тегу html или к группе тегов html, мы можем использовать CSS. Существует три способа использования CSS в HTML: встроенный CSS, внутренний или встроенный CSS и использование внешнего CSS. Давайте посмотрим краткое описание этих способов —

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

      Внутренний или встроенный CSS — Он определяет CSS с помощью