Что такое спецификация и как её читать
- 13 апреля 2023
Спецификация — это совокупность всех правил языка программирования, собранных в единый документ. Спецификации создаются в специальных организациях — W3C, WHATWG, Ecma International, OpenJS Foundation и других.
Спецификация HTML
HTML Living Standard — это документ, который определяет официальные правила для написания веб-страниц на HTML. Стандарт постоянно обновляется и развивается, чтобы отражать изменения в технологиях и инструментах веба.
Цель спецификации — создать единый язык разметки веб-страниц, который будет работать на всех платформах и устройствах.
Сегодня спецификация HTML разрабатывается организацией WHATWG. Раньше HTML занималась W3C, но затем она заморозила работу и продолжила развивать другие документации, например, CSS-спецификацию.
Стандарт включает в себя описание элементов HTML, их атрибутов и правил использования. Также он содержит информацию о том, как браузеры отображают веб-страницы, какие функции и возможности HTML используются для создания веб-приложений.
Каждое обновление в спецификации сопровождается подробной документацией и примерами использования. Новые элементы и атрибуты сразу же добавляются в HTML Living Standard. Например, в марте 2023 года появился новый тег <search>
для создания элемента поиска на веб-сайте или в приложении.
Спецификация CSS
Спецификации по CSS представляют собой официальные документы, определяющие стандарты и правила использования языка CSS. Они описывают, как должен вести себя браузер при отображении CSS-кода и какие стили будут применяться к элементам веб-страницы.
Раньше CSS-спецификация развивалась в едином документе. На версии 2.1 стало понятно, что спецификация получается слишком громоздкой, её трудно поддерживать. Поэтому приняли решение разбить её на части.
Теперь каждая часть спецификации, которая является обновлением версии 2.1, например, Color, развивается по уровням — Level 3, Level 4, Level 5. Если же часть абсолютно новая, например, Transform, то отсчёт начинается с Level 1 и идёт по порядку.
Как работать со спецификацией на примере HTML Living Standard
Ознакомьтесь с общей структурой документа. HTML Living Standard состоит из разделов, которые относятся к различным составляющим HTML.
Изучайте поэтапно. В спецификации собрана вся информация об актуальных тегах и их атрибутах. Выберите часть тегов, которые важно освоить в первую очередь. Дайте себе достаточно времени, чтобы прочитать их документацию, познакомиться со всеми атрибутами и особенностями. Затем переходите к следующим.
Смотрите примеры использования. Спецификация содержит множество примеров кода, которые помогут вам лучше понять, как применять теги на практике.
Изучайте возможности языка. После того как вы освоите документацию по тегам, переходите к информации о различных возможностях HTML — работе с формами, мультимедиа, встроенными стилями. Изучите эти возможности, чтобы расширить свой набор инструментов в разработке.
Читайте спецификацию регулярно. Постоянно изучайте новые возможности, чтобы оставаться в курсе последних изменений в языке.
✅ Совет по работе с CSS-спецификацией
Читайте спецификацию в статусе Editor’s Draft — это текущая рабочая версия документа, над которым ещё продолжается работа редакторов.
Создатели браузеров ориентируются на Editor’s Draft, чтобы получить информацию об изменениях и функциях, которые будут добавлены в следующей версии спецификации.
Чтение Editor’s Draft помогает разработчикам лучше понимать, какие новые функции и изменения будут внедрены в будущих версиях стандарта, чтобы поддерживать свои приложения и сайты.
Использование документации помогает создавать высококачественные веб-сайты и приложения, которые соответствуют стандартам и работают на разных платформах.
Если вы только начинаете изучать HTML и CSS, рекомендуем почитать наш небольшой справочник, который даст вам уверенную базу по тегам и их использованию.
Ссылкина спецификации:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport
.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport
, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport
, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport
тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class
используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>
, <cite>
и <q>
. Давайте разберёмся в их различиях.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1>
до <h6>
. Каждый уровень заголовка имеет свой семантический вес, где <h1>
имеет наибольший вес, а <h6>
— наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
<svg width="20">
<rect fill="#fc0"
width="20"
height="20"/>
<line stroke="black"
x1="0" y1="0"
x2="20" y2="20"/>
</svg>
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023