Пишите HTML в стиле HTML (не в стиле XHTML)

Верстка HTML и CSS

Вы можете не использовать XHTML (больше), но когда вы пишете HTML, XHTML может оказывать на вас большее влияние, чем вы думаете. Скорее всего, вы пишете HTML в стиле XHTML.

Что такое способ написания HTML в XHTML и способ написания HTML в HTML? Давайте посмотрим.

HTML, XHTML, HTML

В 1990-х появился HTML. В 2000-х появился XHTML. Затем, в 2010-х, мы снова переключились на HTML. Это простая история.

Вы можете определить это и по приблизительным датам спецификаций: HTML «1» 1992 г., HTML 2.0 1995 г., HTML 3.2 1997 г., HTML 4.01 1999 г.; XHTML 1.0 2000, XHTML 1.1 2001; «HTML5» 2007 г.

XHTML стал популярен, когда все считали, что XML и его производные — это будущее. «Все в XML». Для HTML это оказало глубокое влияние: мы научились писать в стиле XHTML.

XHTML-способ написания HTML

Способ XHTML хорошо документирован, потому что XHTML 1.0 очень подробно описывает в разделе «Различия с HTML 4»:

  • Документы должны быть правильно оформлены.
  • Имена элементов и атрибутов должны быть в нижнем регистре.
  • Для непустых элементов требуются конечные теги.
  • Значения атрибутов всегда должны быть заключены в кавычки.
  • Минимизация атрибутов не поддерживается.
  • Пустые элементы необходимо закрыть.
  • Обработка пробелов в значениях атрибутов осуществляется в соответствии с XML.
  • Элементы скрипта и стиля нуждаются в разделах CDATA.
  • Исключения SGML невозможны.
  • Элементы с атрибутами id и name, такие как a, applet, form, frame, iframe, img, and map, должны использовать только id.
  • Атрибуты с предопределенными наборами значений чувствительны к регистру.
  • Ссылки на объекты в виде шестнадцатеричных значений должны быть в нижнем регистре.

Это выглядит знакомо? За исключением маркировки содержимого CDATA, а также работы с исключениями SGML, вы, вероятно, следуете всем этим правилам. Все они.

Хотя XHTML мертв, многие из этих правил больше никогда не подвергались сомнению. Некоторые даже были повышены до «лучших практик» для HTML.

Это XHTML-способ написания HTML и его продолжительное влияние на эту область.

HTML способ написания HTML

Один из способов вернуть нас назад — отказаться от правил, налагаемых XHTML. Давайте на самом деле сделаем это (без части SGML, потому что HTML больше не основан на SGML):

  • Документы могут быть неправильно оформлены.
  • Имена элементов и атрибутов не должны быть в нижнем регистре.
  • Для непустых элементов конечные теги не всегда требуются.
  • Значения атрибутов не всегда могут быть заключены в кавычки.
  • Поддерживается минимизация атрибутов.
  • Пустые элементы не нужно закрывать.
  • Обработка пробелов в значениях атрибутов не соответствует XML.
  • Элементы скрипта и стиля не нуждаются в разделах CDATA.
  • Элементы с атрибутами могут использовать не только name или id.
  • Атрибуты с предопределенными наборами значений не чувствительны к регистру.
  • Ссылки на объекты в виде шестнадцатеричных значений могут быть не только в нижнем регистре.

Давайте удалим эзотерические вещи; вещи, которые кажутся неуместными. Это включает в себя обработку пробелов XML, разделы CDATA, удвоение nameзначений атрибутов, случай предопределенных наборов значений и шестнадцатеричные ссылки на сущности:

  • Документы могут быть неправильно оформлены.
  • Имена элементов и атрибутов не должны быть в нижнем регистре.
  • Для непустых элементов конечные теги не всегда требуются.
  • Значения атрибутов не всегда могут быть заключены в кавычки.
  • Поддерживается минимизация атрибутов.
  • Пустые элементы не нужно закрывать.

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

«Документы могут быть неправильно сформированы» предполагает, что это нормально, если код HTML недействителен. Для XHTML было нормально указать на корректность из-за строгой обработки ошибок XML. Но хотя HTML-документы работают, даже если они содержат серьезный синтаксис и проблемы с правильностью форматирования, ни профессионалу, ни нашей области нецелесообразно использовать и злоупотреблять этой устойчивостью.

Таким образом, способ HTML не предполагает, что «документы могут быть неправильно сформированы». Также было бы ясно, что не всегда требуются не только конечные, но и начальные теги. Перефразируя и переупорядочивая, вот суть:

  • Начальный и конечный теги не всегда обязательны.
  • Пустые элементы не нужно закрывать.
  • Имена элементов и атрибутов могут быть в нижнем или верхнем регистре.
  • Значения атрибутов не всегда могут быть заключены в кавычки.
  • Поддерживается минимизация атрибутов.

Примеры

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

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Praesent augue nisl</li>
<li>Lobortis nec bibendum ut</li>
<li>Dictum ac quam</li>
</ul>

Однако в HTML вы можете написать их, используя только этот код (который действителен):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
<li>Praesent augue nisl
<li>Lobortis nec bibendum ut
<li>Dictum ac quam
</ul>

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

<br />

Это то, что XHTML привнес в HTML, но поскольку косая черта не влияет на пустые элементы, вам нужно только это:

<br>

В HTML вы также можете просто написать все заглавными буквами:

<A HREF="https://css-tricks.com/">CSS-Tricks</A>

Похоже, ты кричишь, и тебе это может не нравиться, но писать так — нормально.

Если вы хотите сжать эту ссылку, HTML предлагает вам возможность опустить определенные кавычки:

<A HREF=https://css-tricks.com/>CSS-Tricks</A>

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

Наконец, HTML–HTML, а не XHTML–HTML, также позволяет минимизировать атрибуты. То есть вместо того, чтобы помечать элемент input как обязательный и доступный только для чтения, например:

<input type="text" required="required" readonly="readonly">

Вы можете минимизировать атрибуты:

<input type="text" required readonly>

Если вы не только воспользуетесь тем фактом, что кавычки не нужны, но и тем, что здесь атрибут text по умолчанию используется для type (таких ненужных комбинаций атрибут-значение больше), вы получите пример, который показывает HTML во всех его проявлениях. минимальная красота:

<input required readonly>

Пишите HTML, как HTML

Вышеприведенное не является представлением о том, где был HTML в 90-х. В то время HTML был загружен элементами <table> для макета, упакован презентационным кодом, в значительной степени недействительным (как и сегодня), с сильно различающейся поддержкой пользовательского агента. Тем не менее, это суть того, что мы хотели бы сохранить, если бы не появились XML и XHTML.

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

  1. Соблюдайте синтаксис и семантику.
    • Проверьте свой HTML и отправляйте только действительный HTML.
  2. Используйте параметры HTML, если вы делаете это последовательно.
    • Помните, что имена элементов и атрибутов могут быть строчными или прописными.
  3. Сведите использование HTML к абсолютному минимуму
    • Помните, что презентационная и поведенческая разметка должна обрабатываться CSS и JavaScript.
    • Помните, что начальный и конечный теги не всегда обязательны.
    • Помните, что пустые элементы не нужно закрывать.
    • Помните, что некоторые атрибуты имеют значения по умолчанию, которые позволяют опустить эти пары атрибут-значение.
    • Помните, что значения атрибутов не всегда могут быть заключены в кавычки.
    • Помните, что минимизация атрибутов поддерживается.

Это не совпадение, что это напоминает три основных правила для HTML, что он работает с предпосылкой о том , что меньшая полезная нагрузка также приводит к более быстрым сайтам, и что это следует школе минимальной веб-разработки. Ничто из этого не ново — наша область может просто решить заново открыть это. Инструмент также доступен: html-minifier, вероятно, наиболее устоявшийся и способный обрабатывать все оптимизации HTML.

Вы изучили HTML способом XHTML. HTML — это не XHTML. Откройте для себя заново HTML и помогите сформировать новый, современный способ написания HTML, который признает, но не обязательно основан на XML.

Оцените статью
Adblock
detector