Лица, изучающие основы веб-дизайна, могут захотеть иметь под рукой список кодов HTML для справки и понимания того, для чего предназначены теги. Знание их назначения поможет вам создать оптимизированную для SEO структуру вашего сайта.
HTML-коды, используемые в веб-дизайне
При обучении дизайну веб-страницы проще, если вы понимаете основы HTML, даже если вы используете редактор или конструктор веб-сайтов . Знание основ поможет вам понять, как страница читается браузерами.
Если вам нужна помощь в загрузке списка для печати, ознакомьтесь с этими Руководство по Adobe Printables .
Все веб-страницы имеют этот базовый код:
<!DOCTYPE html>: этот тег был упрощен в HTML5, так как множественные объявления <doctype> были исключены — осталось только одно: html. В HTML 4.01 объявления <doctype> включают: строгое, переходное, набор фреймов и объявления XHTML 1.0 строгого, переходного, набора фреймов и XHTML 1.1.
<HTML> : начинает ваш документ
<HEAD> : содержит информацию о странице, такую как META-теги и заголовок; это не отображается в веб-браузере
<TITLE> : название вашей страницы — отображается на вкладке браузера.
<TITLE /> : Закрывает <TITLE> Тег
<HEAD /> : Закрывает <HEAD> Тег
<BODY> : это область содержимого вашей веб-страницы, где вы будете размещать текст, изображения, графики и т. д.
Все, что находится внутри тега <body>, видно в браузере. В конце вашей HTML-страницы вам нужно закрыть открытые теги, используя:
</BODY>, чтобы закрыть тег <BODY> и
</HTML>, чтобы закрыть тег <HTML> .
Список тегов, представленных в HTML5
Большинство тегов, представленных в HTML5, предназначены для адресации содержимого, которое не было распространено при создании HTML 4.01. Эти новые теги имеют дело с таким контентом, как медиа, или теги — лучший способ определить структуру страницы. Вот теги, представленные в HTML5.
- <!DOCTYPE HTML> Определяет тип документа — html — единственный тип в HTML5.
- <article> </article> Определяет статью
- <aside> </aside> Определяет боковую панель или в сторону статьи.
- <audio> </audio> Обозначает звуковые файлы
- <bdi> </bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении, чем текст за ее пределами.
- <canvas> </canvas> Это контейнер, содержащий любой язык сценариев, используемый для рисования графики на лету.
- <command> </command> Определяет командную кнопку, которую пользователи могут нажать — внутри формы
- <datalist> </datalist> Используется в форме. Он обозначает список предопределенных опций для ввода
- <details> </details> Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть.
- <dialog> </dialog> Определяет диалоговое окно или окно.
- <embed> </embed> Это контейнер для внешнего (не HTML) приложения, например видео
- <figcaption> <figcaption> Подпись к содержимому <figure>
- <figure> </figure> Указывает автономный контент, такой как изображение
- <header> </header> Определяет заголовок документа или раздел внутри документа.
- <keygen> </keygen> Используется для определения поля генератора пары ключей в формах.
- <mark> </mark> Определяет выделенный или отмеченный текст
- <meter> </meter> Определяет скалярное измерение в пределах известного диапазона (датчик) — например, 2 из 10.
- <nav> </nav> Навигационные ссылки
- <output> </output> Определяет вывод вычисления
- <progress> </progress> Представляет ход выполнения задачи
- <rp> </rp> Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации.
- <rt> </rt> Определяет объяснение/произношение символов (для восточноазиатской типографики)
- <ruby> </ruby> Определяет рубиновую аннотацию (для восточноазиатской типографики)
- <section> </section> Определяет определенный раздел внутри документа
- <source> </source> Определяет несколько медиа-ресурсов для таких медиа-элементов, как <video> или <audio>.
- <summary> </summary> Определяет видимый заголовок для элемента <details>
- <time> </time> Дата и время
- <track> </track> Определяет текстовые дорожки для медиа-элементов, таких как <video> или <audio>
- <video> </video> Фильм или видео
- <wbr> </wbr> Определяет возможный разрыв строки
Список тегов HTML 4.01, не поддерживаемых в HTML5
Некоторые теги были удалены из HTML5 из-за того, что они не использовались, или потому, что они использовались не по назначению.
- <acronym> <acronym> Определяет акроним
- <basefont> </basefont> Определяет цвет, размер и шрифт по умолчанию для текста документа.
- <big></big> Увеличивает размер текста
- <center></center> Центрирует текст
- <dir> </dir> Список каталогов
- <font> </font> Используется для определения цвета, размера и шрифта внутри документа.
- <frame> </frame> Определяет фрейм внутри набора фреймов
- <frameset> </frameset> Определяет набор фреймов
- <noframes> </noframes> Определяет альтернативный контент для пользователей, которые не поддерживают фреймы
- <strike> </strike> Зачеркнутый текст
- <tt> </tt> Текст телетайпа
Список HTML-кодов, совместимых с HTML 4.01 и HTML5
Ниже приведен список тегов HTML 4.01, которые также являются частью стандарта HTML5:
- <!—…—> Определяет комментарий
- <a> </a> Гиперссылка
- <abbr> </abbr> Аббревиатура
- <address> </address> Определяет адресную информацию владельца документа
- <applet> </applet> Определяет встроенный апплет
- <area> </area> Определяет область внутри карты-изображения.
- <base> </base> Базовый URL/цель для всех относительных URL в документе
- <bdo> </bdo> Переопределяет текущее направление текста
- <blockquote> </blockquote> Раздел, цитируемый из другого источника
- <body> </body> Определяет тело документа
- <br> Разрыв строки
- <button> </button> Определяет нажимаемую кнопку
- <caption> </caption> Определяет заголовок таблицы
- <cite> </cite> Название произведения
- <code> </code> Компьютерное кодирование
- <col> </col> Столбцы в таблице
- <colgroup> </colgroup> Группа из одного или нескольких столбцов в таблице
- <dd></dd> Описание определения
- <del> </del> Текст удален из документа
- <dfn> </dfn> Термин определения
- <dl></dl> Список определений
- <div> </div> Раздел в документе
- <dt><dt> Термин определения
- <em></em> Акцент
- <embed></embed> Встроить элемент
- <fieldset> </fieldset> Группирует связанные элементы в форме
- <form></form> Форма
- <a name=»»></a> якорь
- <h1></h1> Заголовок 1; используйте 2, 3, 4 и т. д. для разных размеров
- <hr> Горизонтальное правило
- <i></i> Курсив
- <img src=»»> Изображение
- <ol></ol> Нумерованный список
- <ul></ul> Ненумерованный список
- <li></li> Элемент списка
- <marquee></marquee> Прокручиваемый текст
- <meta> Используется для указания описания страницы, ключевых слов, автора и другой важной информации о странице.
- <p> Абзац
- <small></small> Уменьшает размер текста
- <таблица></таблица> Таблица
Полезные фрагменты <html>
Возможно, одним из наиболее часто используемых тегов HTML является <table>. В большинстве таблиц используются три основных тега: один для контейнера, один для информации внутри таблицы и один для обозначения строки внутри таблицы.
HTML-таблица
Чтобы построить таблицу с двумя строками и двумя столбцами, вы используете все три тега. Хотя вы можете стилизовать внутри тега, например, <table border=»1″>, предпочтительнее управлять внешним видом с помощью CSS.
<table>
< tr>
< td>Это первое поле в строке 1</td>
< td> Это второе поле в строке 1</td>
</tr>
< tr>
< td>Это первое поле в строке 2</td>
< td> Это второе поле в строке 2</td>
</tr>
</table>
Та же таблица со столбцом заголовка, который охватывает оба столбца, будет выглядеть так.
<table>
<tr>
<th colspan=»2″>Эта строка простирается на обе строки ниже нее.</th> <th> — заголовок таблицы — выделяется жирным шрифтом и центрирует текст.
</tr>
< tr>
< td>Это первое поле в строке 1</td>
< td>Это второе поле в строке 1</td>
</tr>
< tr>
< td>Это первое поле в строке 2</td>
< td>Это второе поле в строке 2</td>
</tr>
</table>
Список дел
Используя преимущества локального хранилища, последняя версия Google Chrome и других браузеров позволяет создавать список, который можно редактировать в браузере пользователя. Чтобы настроить его, вам нужно связать атрибут contenteditable со списком.
<h2>Мой редактируемый список</h2>
<ul contenteditable=»true»>
<li>Пойти в продуктовый магазин</li>
<li>Отдать документы в офис</li>
<li>Выполнить поручения</li>
</ul>
Когда пользователи получают доступ к приведенному выше коду из новых браузеров (не Internet Explorer), они могут редактировать и изменять список по своему усмотрению.
Как CSS взаимодействует с HTML
HTML — это язык разметки, и его роль заключается в структурировании страницы. Поскольку язык разметки читается браузером сверху вниз, более важная информация должна быть вверху страницы и заключена в соответствующий тег. Верхний заголовок всегда должен быть тегом — обычно
или
, абзацы идут внутрь
и т. д. Таким образом, браузер (и поисковые системы) могут проверять иерархию важности текста на странице.
Поскольку HTML следует использовать только для структуры документа, CSS используется для дизайна и внешнего вида . Несмотря на то, что некоторые HTML-теги могут быть минимально оформлены без CSS, лучше всего управлять дизайном вашего сайта с помощью CSS. CSS работает, создавая имена для различных типов контента на вашей странице. Когда браузер читает «имя» CSS, он применяет стиль, связанный с этим именем, к содержимому.
Не можете вспомнить все теги?
Хорошо, что вам это не нужно — вы можете использовать справочный список, подобный этому, чтобы перепроверить, для чего предназначен тег — или использовать HTML-редактор со встроенным справочником, например HTML-Kit . Что более важно, чем запоминание всех тегов, так это проектирование страниц с учетом текущих и будущих браузеров. Таким образом, когда пользователи догонят и установят самую последнюю версию браузера, новые теги уже будут на месте и будут работать так, как задумано.