По внешнему виду html страницы из браузера восстанови и допиши пропущенные теги

Обновлено: 02.07.2024

Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.

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

Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег <h1> и в конце закрывающий тег </h1> (об открывающих и закрывающих тегам мы поговорим чуть ниже).
Подобным же образом можно выделять подзаголовки других уровней (от <h2> до <h6>).
Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги <p> и </p> соответственно (открывающий и закрывающий теги).
Чтобы сделать перенос строки, достаточно просто поставить тег <br> там, где он необходим.

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

Теперь перейдем к более детальному описанию нюансов работы с HTML.

Структура страницы

Любая страница на сайте - это текстовый файл с расширением .html.

Именно внутри этого файла лежит все содержимое страницы - тексты, теги и т.д.

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

<!DOCTYPE html> в начале документа.
<html> в начале и </html> в конце документа - между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
<head> в начале и </head> в конце перечисления служебных тегов.
- <title> - служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
- <meta> - служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:

Атрибуты и теги

Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как <html>, <head> и <body>.

Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега <body>).

Для начала расскажем, что такое теги и что такое атрибуты.
- Тег - это именно то, что заключено в угловые скобки, например <b>. Чаще всего теги существуют в паре - открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег <b>, а в конце </b> - весь текст между <b> и </b> будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег <br> для переноса строки - его достаточно просто вставить в нужное место).
- Атрибут - дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: <a href = "https://megagroup.ru" >Наш сайт </a>. Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги <a> и </a> - именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href="тут вставляется ссылка". Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.
Основные теги

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

Предполагают работу с открывающим и закрывающим тегами:
- <p> - тег для обозначения абзаца в тексте. Весь абзац обрамляется в <p> и </p>
- <h1> , <h2> , <h3> , <h4> , <h5> , <h6> - теги для создания заголовков разного уровня в тексте. В заголовке h1 рекомендуется прописывать основной заголовок всей страницы, в h2 - название блоков страницы, в h3 - название подблоков и т.д.
- <b> - тег для выделения текста жирным шрифтом.
- <i> - тег для выделения текста курсивом.
- <a> - тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: < a href = " http:// site.ru " > наш сайт </ a >
Самозакрывающиеся теги (не требуют закрывающегося тега):
- <br> - перенос строки.
- <hr> - тег для вставки горизонтальной линии в текст.
- <img> - тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как < img src= "URL картинки" alt= "альтернативный текст" >.
Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между , у Вас должно получиться следующее:

Это лишь некоторые из возможных тегов.

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

Списки в HTML

Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.

Для создания нумерованного списка Вам понадобятся теги <ol> (в начале и закрывающий </ol> в конце списка) и <li> (в начале и закрывающий </li> в конце каждого пункта). Таким образом у Вас должен получиться список примерно следующего вида.

Для создания же маркированного списка Вам понадобятся теги <ul> и <li> соответственно.

Таблицы в HTML

Основным тегом в таблице будет <table>. Именно между <table> и </table> будет заключена вся информация о ячейках.

Следующим тегом, будет тег <tr>. Между <tr> и </tr> будет лежать информация о рядах таблицы.

Внутри каждого ряда должны быть теги <td>. Соответственно, между <td> и </td> необходимо указывать содержимое ячеек ряда.

Таким образом, в итоге таблица в HTML будет выглядеть примерно так:

Как можно заметить, в самом начале у тега <table> есть атрибут border - в нем указывается толщина рамки в пикселах.

Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т.д.

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

Дополнительная информация

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

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

Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title .

abbr часто используется совместно с тегом dfn , идентифицирующим понятие или термин:

address

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

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

Для определения аудио-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type ).

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

В настоящее время поддерживается три формата аудио: MP3 , WAV и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления (без этого атрибута элемент audio , скорее всего, не будет отображаться на странице)
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с аудио с помощью JavaScript
- src — путь к аудиофайлу
video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Для определения видео-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type ).

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

В настоящее время поддерживается три формата видео: MP4 , WebM и OGG .
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
- preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с видео с помощью JavaScript
- src — путь к видеофайлу
- poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
- width — ширина элемента в пикселях
- height — высота элемента в пикселях
DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video .

Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
- href — основной путь
- target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank , _parent , _self и _top
blockquote и cite

Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite .

Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.

Тег code используется для определения части компьютерного кода:

Для форматирования блока кода code часто используется совместно с тегом pre :

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.

Атрибут id тега datalist должен совпадать с атрибутом list тега input .

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

dl , dt и dd

Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt , определяющим понятие или термин, и dd , определяющим описание термина.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.

details

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

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Для отображения заголовка details используется тег summary .

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]') ).

dialog

Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

Индикатором активного состояния dialog является атрибут open .

Для управления объектом Dialog с помощью JavaScript используются такие методы как show() , close() и showModal() , а также свойство open .

figure

Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

Для добавление подписи к figure используется тег figcaption .

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

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

Для обеспечения доступности совместно с meter рекомендуется использовать тег label .
- value — текущее числовое значение между min и max
- min — нижняя числовая граница диапазона
- max — верхняя числовая граница диапазона
- low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min , но меньше high и max
- high — нижняя числовая граница верхнего предела диапазона
- optimum — оптимальное числовое значение между min и max . Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low , значит, предпочтительным является нижний диапазон
- form — определяет элемент form , с которым связан meter
Так можно записать уровень заряда батареи вашего устройства в значение meter :

progress

Тег progress определяет процесс выполнения задачи.

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

Для обеспечения доступности совместно с progress рекомендуется использовать тег label .
- max — максимальное значение. По умолчанию равняется 1
- value — текущее значение
Так можно реализовать десятисекундный таймер:

output

Тег output используется для представления результата вычислений.
- for — определяет связь между результатом и элементами, используемыми для его выичсления
- form — определяет элемент form , которому принадлежит output
- name — название элемента output
picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент picture содержит два тега: один или более source и один img .

Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source .

Путь к изображению указывается в атрибуте srcset , а медиа-запрос — в атрибуте media .

template

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

Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).

Контент внутри template может быть отрендерен с помощью JavaScript .

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

noscript

Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript . Он может использоваться как в теге head , так и в теге body . В первом случае noscript может содержать только такие теги как link , style и meta .

Другие теги в форме шпаргалок

Семантическое "секционирование" страницы

Стилизация текста

Форма

Символ / означает или .

Поля для ввода данных
- accept — MIME-тип принимаемых файлов (только для type="file" ). Значения: расширение, например, .jpg , audio/* , video/* , image/* , медиа тип, например, json
- alt — подпись
- autocomplete — on / off
- autofocus
- checked — только для type="checkbox" или type="radio"
- disabled
- form
- formaction — только для type="submit" или type="image"
- formenctype — только для type="submit" или type="image" . Значения: application/x-www-form-urlencoded , multipart/form-data , text/plain
- formmethod — только для type="submit" или type="image" ( get / post )
- formnovalidate — отключает проверку элементов формы
- formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type="submit" или type="image" ). Значения: _blank , _self , _parent , _top , название фрейма
- height — высота в пикселях (только для type="image" )
- list
- max — максимальное значение (число или дата)
- maxlength — максимальная длина строки (количество символов)
- min — минимальное значение (число или дата)
- minlength — минимальная длина строки (количество символов)
- multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
- name
- pattern — регулярное выражение для проверки значения поля
- placeholder
- readonly
- required
- size — количество символов, определяющее ширину поля
- src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type="image" )
- step — интервал (шаг) между min и max
- type
- value
- width — ширина поля в пикселях (только для type="image" )
Пример валидации адреса электронной почты и пароля:

Таблица

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

Послесловие

Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area , но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas , предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).

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

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Существуют глобальные атрибуты, их можно применять ко всем тегам: список глобальных атрибутов.

Некоторые глобальные атрибуты:
- class определяет класс, значение – имена классов;
- id – идентификатор, значение – уникальный идентификатор;
- style – стили, значение – код CSS;
- hidden – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля display: none;
- title – дополнительная информация в виде всплывающей подсказки, значение – текст.
Основные теги

Семантические теги по свойствам повторяют тег div.

Сколько всего тегов HTML?

Спецсимволы HTML

Спецсимволы – запоминающиеся (мнемонические) обозначения символов вида &слово;. Они входят в стандарт HTML.

Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:
- Знак меньше: <, мнемоника < Потому что с него начинаются теги. , мнемоника  . Потому что в коде HTML игнорируется более одного пробела подряд.
Другие часто используемые спецсимволы:
- Знак больше >: >
- короткое – тире – и длинное — тире —
- двойные угловые кавычки, или французские кавычки, или «ёлочки»: « и » &: & ©: ©
Чем заполняют макеты?

Текстом Lorem ipsum, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога.
Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.
- В оригинале: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit . »
- Перевод: «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль. »
Первые 100 слов, вызываются сокращением Emmet lorem100:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?

Альтернативы HTML?

Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует SGML (Standard Generalized Markup Language), стандартный обобщённый язык разметки.

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

Markdown – облегчённый язык разметки, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). Подходит для самых простых страниц, но требует конвертации в HTML.

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

Итак, ниже представлены описания распространенных html тегов, которые используются чуть ли не на каждой странице сайта. Поверьте, их уже хватит, чтобы написать целый сайт.

Оглавление
1. <p></p> — создание абзацев на странице
2. <b> и </strong> — выделение жирным
3. <i> — курсивный шрифт
4. <u> — подчеркнутый шрифт
5. <a> — создание гиперссылок
6. <h1> — заголовки в контенте
7. <center> — выравнивание по центру
8. <sub> — подстрочный шрифт
9. <sup> — надстрочный шрифт
10. <big>, <small> — уменьшить/увеличить размер шрифта
11. <ul> — создание списка
12. <table> — создание таблиц
13. <br> — перенос строки
14. <hr> — горизонтальная линия
15. <img> — вывод изображения
16. <font> — для форматирования текста
17. <form> — вывод форм
18. <div> — блочный элемент
19.  — комментарии в коде
Список тегов html

1. HTML тег <p></p> (для абзацев)

<p></p> — выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).

Например, html код:

Преобразуется на странице в следующее:

Текстовый абзац номер один

А это другой абзац

К тегу можно ещё приписать параметр style:

С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font.

Также можно прописать атрибуты CLASS и ID . Например:

2. HTML тег <b> и </strong> (выделение жирным)

<b></b> и <strong></strong> — два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет.

Приведем пример. Html код:

Преобразуется на странице в следующее:

Также можно прописать атрибуты CLASS и ID (как и в случае с <p>).

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

3. HTML тег <i> (создание курсива)

<i></i> — курсивный шрифт (допускает параметр style, class, id)

Например, html код:

Преобразуется на странице в следующее:

4. HTML тег <u> (подчеркнутый текст)

<u></u> — подчеркнутый шрифт (допускает параметр style, class, id)

Например, html код:

Преобразуется на странице в следующее:

5. HTML тег <a> (создание гиперссылки)

<a href="links"></a> — создает ссылку на странице (допускает параметр style, class и другие).

Например, html код:

Преобразуется на странице в следующее:

Все параметры и атрибуты тега <a> будут рассмотрены в отдельном уроке: html тег <a>.

6. HTML тег <h1> (заголовки в контенте)

<h1></h1>. <h6></h6> — заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.

Например, html код:

Тег <h1> используют для названия страницы (также как и тайтл)

Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги <h1></h1>. <h6></h6> имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.

Более подробно про эти теги читайте в 14 уроке: HTML теги h1-h6

7. HTML тег <center> (выравнивание)

<center></center> — выравнивает контент по центру.

Например, html код:

Преобразуется на странице в следующее:

Рекомендуется не использовать тег <center></center> , а вместо него использовать такие конструкции:
- <p style="text-align:center">. </p> — для текста
- <div style="text-align:center">. </div> — для всего (например, изображение)
8. HTML тег <sub> (подстрочный текст)

<sub></sub> — выводит подстрочный шрифт.

Например, html код:

Преобразуется на странице в следующее:

9. HTML тег <sup> (надстрочный текст)

<sup></sup> - выводит надстрочный шрифт.

Например, html код:

Преобразуется на странице в следующее:

10. HTML тег <big>, <small>

<big></big>, <small></small> — выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).

Например, html код:

Преобразуется на странице в следующее:

11. HTML тег <ul> (создание списков)

<ul><li>. </li></ul> — выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li> .

Например, html код:

Преобразуется на странице в следующее:
- первый элемент списка
- второй элемент списка
Более подробно про списки читайте в 13 уроке тег <ul> — создание списков в HTML

12. HTML тег <table> (создание таблиц)

<table></table> — создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами <tr></tr> , а столбец <td></td> .

Например, html код:

Преобразуется на странице в следующее:

1-строка 1 элемент 1-строка 2 элемент

1-строка 1 элемент 1-строка 2 элемент

Все возможности тега <table> будут рассмотрены в отдельном уроке: html тег <table>.

13. HTML тег <br> (перенос строки)

<br/> — переход на следующую строку, представляет собой одиночный тег.

Например, html код:

Преобразуется на странице в следующее:
1-Строка
2-строка
3-строка А этот текст будет на 3ей строке, поскольку перехода не было
14. HTML тег <hr> (горизонтальная линия)

<hr/> — чертит линию, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

Преобразуется на странице в следующее:
Какой-то текст над линией А этот текст будет уже под линией
15. HTML тег <img> (вывод картинки)

<img src="https://zarabotat-na-sajte.ru/uroki-html/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D0%BD%D0%B0_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5"> — выводит изображение, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

Преобразуется на странице в следующее:

Все возможности тега <img> будут рассмотрены в отдельном уроке: html тег <img>.

16. HTML тег <font> (форматирование текста)

<font></font> — для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.

Например, html код:

Преобразуется на странице в следующее:

Аналогичным тегом является <span></span> .

Более подробно с font можете ознакомиться в статье: тег <font>

17. HTML тег <form> (создание формы)

<form></form> — создание формы на странице (допускает параметр style, class).

Например, ввод логина и пароля, любые кнопки, любая форма регистрации — все это формы.

Подробное описание этого тега читайте: тег <form> — создание html форм.

18. HTML тег <div> (создание блоков)

<div></div> — служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.

Подробное описание этого тега читайте в статье: html тег <div>.

19. HTML тег  (комментарии)

 — служит для добавления комментариев в коде html. Все, что заключено между  является комментарием и не отображается на интернет странице.

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

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

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

Читайте также:

1-строка 1 элемент	1-строка 2 элемент
1-строка 1 элемент	1-строка 2 элемент

По внешнему виду html страницы из браузера восстанови и допиши пропущенные теги

Структура страницы

Атрибуты и теги

Основные теги

Списки в HTML

Таблицы в HTML

Дополнительная информация

address

audio

video

blockquote и cite

datalist

dl , dt и dd

details

dialog

figure

meter

progress

output

picture

template

noscript

Другие теги в форме шпаргалок

Семантическое "секционирование" страницы

Стилизация текста

Форма

Поля для ввода данных

Таблица

Послесловие

Основные теги

Сколько всего тегов HTML?

Спецсимволы HTML

Чем заполняют макеты?

Альтернативы HTML?

Список тегов html

1. HTML тег <p></p> (для абзацев)

2. HTML тег <b> и </strong> (выделение жирным)

3. HTML тег <i> (создание курсива)

4. HTML тег <u> (подчеркнутый текст)

5. HTML тег <a> (создание гиперссылки)

6. HTML тег <h1> (заголовки в контенте)

7. HTML тег <center> (выравнивание)

8. HTML тег <sub> (подстрочный текст)

9. HTML тег <sup> (надстрочный текст)

10. HTML тег <big>, <small>

11. HTML тег <ul> (создание списков)

12. HTML тег <table> (создание таблиц)

13. HTML тег <br> (перенос строки)

14. HTML тег <hr> (горизонтальная линия)

15. HTML тег <img> (вывод картинки)

16. HTML тег <font> (форматирование текста)

17. HTML тег <form> (создание формы)

18. HTML тег <div> (создание блоков)

19. HTML тег  (комментарии)