img
img
16 апреля 2022
16 апреля 2022
6 мин
180

Что такое HTML: основные теги

С помощью HTML структурируют страницу на сайте, добавляют картинки, таблицы, списки.

img

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Этот стандарт применяют, когда разрабатывают веб-страницы. Он не относится к языкам программирования, на которых пишут программы и приложения. В нём есть только теги — они говорят браузеру, как отображать сайт. HTML — это старт в профессиях верстальщика и веб-программиста.

Зачем нужен HTML

Когда пользователь открывает сайт в браузере, в ответ он получает HTML-страницу, файлы стилей CSS и скрипты JS, если они есть на странице. Браузер обрабатывает полученные данные и отрисовывает страницу по заданным правилам.

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

 <h2>Это заголовок второго уровня</h2>.

А так делают параграф:

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

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

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

Любая современная HTML-страница начинается с тега <!DOCTYPE html>. Это указывает браузеру на последнюю версию HTML5. Без этого тега страница отобразится некорректно.

Структура HTML довольно проста: весь код находится внутри тега <html></html>. В блоке <head></head> подключают стили, указывают метатеги и метаописание. Устанавливают тайтл <title></title> — название, которое отобразится на вкладке в браузере. В блоке <body></body> располагают контент страницы, ее видимую часть: текст, картинки, видео, ссылки.

Пример простой страницы:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Это название страницы</title>

</head>

<body>

<h1>Это заголовок первого уровня</h1>

<p>Размещаем текст, а далее изображение</p>

<img src="/media/image.png">

<p>Таких тегов может быть сколько угодно</p>

</body>

</html>

К основным тегам, с помощью которых структурируют документ, относят теги для отображения медиа, работы с текстом, гиперссылками. А еще теги, чтобы создавать списки, заголовки, кнопки, формы и пользовательские блоки — div-контейнеры.

🚀 Для текста

Кроме тега параграфа <p> чаще используют <span>. Это специальный строчный тег, с помощью которого у части текста меняют форматирование. То есть выделяют часть информации внутри других тегов и устанавливают стиль. Внутри абзаца меняют цвет и размер первой буквы: добавляют начальный и конечный тег <span> и определяют для него стиль текста. Например, делают его жирным, курсивным или цветным.


<p><b>Этот текст будет написан жирным</b></p> — благодаря тегу форматирования </b>.

<p>Часть текста <i>будет курсивной</i></p> — этого добиваемся с помощью тега <i>.

<p>Пример с <span style="color: red;"><i>красным курсивом</i></span><br>и переносом строки</p>

🚀 Для изображений

Тег <img> используют, чтобы добавить картинку. Его атрибуту src устанавливают значение, в котором — путь до нужного файла. Например, чтобы отобразить изображение 200 на 200 пикселей, напишите:


<img src="путь_к_картинке.png" width=200 height=200> — width и height — атрибуты тега <img>.

🚀 Для сложной структуры данных

К такой структуре относят маркированные и нумерованные списки. Для каждого есть свой тег: <ul> — для маркированного, <ol> — для нумерованного. А чтобы обозначить элемент списка, используют тег <li>. Для таких списков есть правило: внутри <ul> и <ol> не должно находиться ничего, кроме <li>.


<h2>Маркированный список</h2>

<ul>

<li>Элемент 1</li>

<li>Элемент 2</li>

<li>Элемент 3</li>

</ul>


<h2>Нумерованный список</h2>

<ol>

<li>Элемент 1</li>

<li>Элемент 2</li>

<li>Элемент 3</li>

</ol>

Как сделать маркированный и нумерованный список в HTML

Результат

Еще более сложная структура — таблица. Ее описывают внутри тега <table>. Чтобы определить названия столбцов, создайте элемент <tr> и поместите теги табличного заголовка <th> с названием столбцов. Значения добавляйте с тегом табличных данных <td>.


<!-- Здесь описывают столбцы таблицы -->

<table border="1">

<caption>Теги html</caption>

<tr>

<th>ТЕГ</th>

<th>ДЛЯ ЧЕГО НУЖЕН</th>

<th>ОПИСАНИЕ</th>

</tr>

<!-- Далее идут значения -->

<tr>

<td>caption</td>

<td>Таблицы</td>

<td>Создает заголовок таблицы</td>

</tr>

<tr>

<td>a</td>

<td>Гиперссылки</td>

<td>Создают ссылки на другие документы</td>

</tr>

<tr>

<td>br</td>

<td>Перенос</td>

<td>Переносит текст на новую строку</td>

</tr>

<tr>

<td>img</td>

<td>Изображение</td>

<td>Содержит ссылку на изображение</td>

</tr>

</table>

Как сделать таблицу в HTML

Результат кода

HTML и другие технологии

HTML — фундаментальная технология, но для разработки сайтов используют не только ее. С помощью CSS описывают внешний вид элементов страницы, адаптируют сайт под просмотр с компьютера и смартфона. А с JavaScript делают страницу динамической: то есть оживляют кнопки, изображения, карточки товаров.

Страница Яндекса без разметки

Так выглядит страница яндекса, если из нее убрать CSS

Изучите HTML, CSS и JavaScript на курсе «Веб-разработчик» онлайн-университета профессий Skypro. Познакомитесь и поработаете с GIT, GitHub, линтерами, форматтерами, пакетными менеджерами, фреймворком React, backend-разработкой.

Осваивать теорию будете по видеоурокам, вебинарам и конспектам. Отрабатывать — с помощью домашек: проверяют их только практикующие разработчики. Сложные темы разберете онлайн, за 12 месяцев учебы сделаете 7 проектов в портфолио.

Главное об HTML

  • HTML — это язык гипертекстовой разметки страницы. Он состоит из тегов — команд браузеру, как отображать страницу.
  • С помощью HTML делают текст жирным, курсивным, подчеркнутым, меняют его цвет. Ставят абзацы, обозначают заголовки, таблицы, списки. Размещают не только текст, но и ссылки или изображения.
  • Полный список тегов — на сайте HTML5Book. А закрепить навыки можно в онлайн-редакторе Сodesandbox.
  • HTML отвечает за структуру и контент — не за форматирование элементов страницы или динамику сайта. Поэтому разработчику нужно знать и другие технологии: CSS и JavaScript.
img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Дадим нужные знания и поможем получить работу!
    Регистрируйтесь на курс и учитесь у экспертов-практиков.
    Навык
    за 2 месяца
    Excel для анализа данных

    Excel — незаменимый инструмент для бухгалтеров, экономистов, маркетологов, менеджеров, предпринимателей и аналитиков. Но мало кто умеет профессионально им пользоваться. После курса вы поймете, что Excel — это не только таблицы.

    6 320 ₽
    Ещё по теме
    Что такое Agile

    Agile — это группа гибких методов, чтобы улучшать продукт.

    20 июня 2022
    4 мин
    5 причин освоить Python

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

    Как отбирают кандидатов в IT-компаниях

    IT-рекрутер обращает внимание на то, как вы мыслите и рассуждаете.

    5 причин научиться программировать на Java

    Этот язык постоянно развивается, но остается стабильным, на нём кодят уже 27 лет.

    Как работать со словарями в Python

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

    Каково быть тестировщиком: 4 истории о боли и радости

    Рассказы тестировщиков: какие ошибки они замечают в обычной жизни.

    Что такое Node.js и зачем ее изучать

    Node.js — платформа с открытым исходным кодом для работы с JavaScript.

    09 июня 2022
    5 мин
    Что такое массивы в Java и как с ними работать

    Массив — это набор однотипных элементов, упорядоченных по номерам.

    Как написать тест-кейс

    Создавайте простые тест-кейсы и учитывайте интересы пользователя.

    06 июня 2022
    6 мин
    Мифы о программистах

    Есть стереотипы, что программисты — это мужчины, всемогущие хакеры и интроверты.

    17 мая 2022
    2 мин
    Код: что ты такое

    Код определяет внешний вид и внутреннюю логику программ, сайтов.

    17 мая 2022
    2 мин
    7 англоязычных подкастов для тех, кто хочет прокачаться в IT

    Про Python, frontend-разработку, мягкие навыки, работу над проектами.

    17 мая 2022
    3 мин
    6 ютуб-каналов для разработчиков

    Ответы на вопросы новичков, интервью успешных спецов, полезные советы.

    17 мая 2022
    2 мин
    Женщины в IT

    Достижения и цитаты шести героинь, которые не побоялись попробовать себя в IT.

    17 мая 2022
    2 мин
    Почему IT — сфера будущего

    Информационные технологии помогают бизнесу зарабатывать и упрощают жизнь.

    IT-компания — это не только Google

    Рассказываем про «Тинькофф», «Билайн» и другие компании.

    16 мая 2022
    2 мин
    Как составить и оформить баг-репорт

    Указывайте в отчете только одну ошибку, прикладывайте скрины, сообщения и коды.

    04 мая 2022
    6 мин
    Как работать со списками в Python

    Учимся добавлять и изменять элементы, объединять и копировать списки.

    02 мая 2022
    5 мин
    Цикл for в Java: что это, как с ним работать

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

    Как работать с модулем JSON в Python

    JSON часто применяют, когда разрабатывают API и веб-приложения.

    25 апреля 2022
    9 мин
    Как IT-специалисту из России найти работу за рубежом в 2022 году

    Есть сервисы, платформы и телеграм-каналы с вакансиями по всему миру.

    21 апреля 2022
    6 мин
    Как работает цикл for в Python

    Цикл for используют, когда количество повторов известно заранее.

    Комьюнити для разработчика

    Есть комьюнити на платформах, под эгидой компаний или самоорганизующиеся.

    07 апреля 2022
    6 мин
    Гайд: как определить, какое направление в IT тебе подходит

    Обязанности и зарплата аналитика, Python- и Java-разработчиков и не только.

    Правильное питание на удаленке. Почему это важно?

    Правильное питание — это не о жестких диетах и полном отказе от любимых продуктов.

    01 апреля 2022
    7 мин
    Как я нашла время на учебу, когда времени не было совсем

    Благодаря методу «круга-пирога» увидите свое время и возьмете его под контроль.

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

    Ищите мотивацию, хвалите себя, визуализируйте план и результат.

    Как больше успевать: зачем есть по одной лягушке в день и как справиться со слоном

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

    Как поставить цель и не бросить на полпути

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

    Кто такой менеджер проектов, чем занимается и как им стать

    Этот специалист контролирует все этапы проекта и приводит его к успеху.

    30 марта 2022
    8 мин
    Как не угробить здоровье на удаленке

    Советы всем удаленщикам — больше двигаться, делать зарядку, разминку для глаз.

    30 марта 2022
    9 мин
    Junior, Middle, Senior в разработке — кто есть кто и как перейти на уровень выше

    Junior зарабатывает от 40 000 ₽, Middle от 100 000 ₽, а Senior от 250 000 ₽ и выше.

    29 марта 2022
    12 мин
    Как банковская служащая в 32 года с нуля перешла в IT и в 40 открыла свою компанию по разработке онлайн-игр

    Совет от героини: сделайте первый шаг, дальше будет проще; учитесь и идите вперед.

    Пять приложений, чтобы не отвлекаться от учебы и работы

    Фишки и стоимость Forest, WaterDo, SleepTown, Alarmy, Pomodoro Timer Lite.

    29 марта 2022
    5 мин
    Язык SQL: что это такое и зачем он нужен

    SQL используют в банках, торговле, перевозках: везде, где много информации.

    29 марта 2022
    7 мин
    Как освоить c нуля IT-профессию и перейти на новую работу без опыта

    Сначала поставьте цель: выберите сферу и определите, кем видите себя через 10 лет.

    Словарь IT-сленга

    Термины разработки, Scrum, неформального общения, организационных процессов.

    29 марта 2022
    13 мин
    Подборка: 33 книги и подкаста для начинающих программистов

    Узнаете о работе программиста и поймете, как писать хороший код.

    28 марта 2022
    10 мин
    Хакнуть мозг: как современные знания помогают мозгу развиваться и учиться

    Мозг меняется всю жизнь. Мы можем на него влиять: изучать новое, развивать навыки.

    28 марта 2022
    8 мин
    Что такое CSS и как с ним работать

    С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.

    16 марта 2022
    9 мин
    css
    Как создать телеграм-бота на Python

    Python — самый популярный язык программирования в феврале 2022 года.

    16 марта 2022
    9 мин
    Какие профессии в IT подойдут гуманитарию

    Гуманитарию подойдут профессии тестировщика, веб-дизайнера и не только.

    15 марта 2022
    9 мин
    Frontend или backend: чем отличаются и какой вид разработки выбрать

    Фронтендер создает интерфейс продукта, бэкендер работает с серверной частью.

    15 марта 2022
    7 мин
    Кто такой Java-разработчик, чем занимается и как им стать

    Обязанности Java-разработчика — писать код, тестировать и улучшать его.

    15 марта 2022
    7 мин
    Что такое IT-сфера и почему она сейчас так популярна

    IT-отрасль привлекает удаленкой, карьерным ростом, высоким доходом.

    04 марта 2022
    7 мин
    it
    Как установить Python на компьютер и начать на нём писать

    Воспользуйтесь Google Colab, онлайн-интерпретаторами или скачайте Python.

    Postman: как пользоваться программой для тестирования API

    Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.

    04 марта 2022
    6 мин
    api
    Google Colab: что это такое и как с ним работать

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

    04 марта 2022
    4 мин
    Как перейти в разработчики из другой профессии

    Освоить новую профессию реально с нуля в любом возрасте, главное — мотивация.

    03 марта 2022
    8 мин
    Как помочь ребенку выбрать профессию

    Не выбирайте по принципу «чем проще, тем лучше» и уважайте желания ребенка.

    03 марта 2022
    7 мин
    Нужно ли высшее образование программисту: сравниваем все «за и «против»

    Важнее опыт и проекты в портфолио, но иногда высшее образование все-таки нужно.

    02 марта 2022
    5 мин
    Стоит ли переходить на удаленку: плюсы и минусы

    Сегодня удаленка доступна для разных сфер: ИТ, маркетинг, сервис, продажи.

    02 марта 2022
    6 мин
    Какой язык программирования выбрать новичку

    Выбирайте по уровню спроса у работодателей и направлению в программировании.

    24 февраля 2022
    7 мин
    Фильмы про программистов: лучшие фильмы и сериалы про компьютерных гениев

    20 фильмов и сериалов для тех, кому интересен мир информационных технологий.

    24 февраля 2022
    7 мин
    Фронтенд-разработчик: кто это такой и как им стать с нуля

    Frontend-разработчик создает внешнюю — пользовательскую часть веб-ресурса.

    24 февраля 2022
    8 мин
    Backend-разработчик: кто это такой и чем он занимается

    Backend-разработчик отвечает за внутреннюю — серверную сторону веб-ресурса.

    24 февраля 2022
    9 мин
    Что такое спринты в программировании и как их выполнять

    Спринты используют в долгих проектах и сложных продуктах.

    Как начать изучать Python

    Преимущества Python — понятный синтаксис и читаемость, готовые библиотеки.

    24 февраля 2022
    9 мин
    Jupyter Notebook: что это такое и как им пользоваться

    Jupyter-ноутбуки применяют для визуализации данных в big data и data science.

    24 февраля 2022
    7 мин
    Как развить soft skills

    Soft skills помогают развивать компетенции, осваивать новые тенденции в работе.

    24 февраля 2022
    11 мин
    Как начать изучать Java

    На Java разрабатывают всё: от приложений и ПО до технологий Big Data.

    kralbetbetturkeyikimislibahis1xbetm.infohipas.infohttps://www.wiibet.com/restbetcdn.com
    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить