Базовые теги в HTML
❮ Назад Вперед ❯
Как мы уже отмечали ранее, теги заключаются в угловые скобки <>. В закрывающем теге также используется косая черта (слеш) </>. Ниже приведем теги, которые используются чаще других.
- Теги <h2>-<h6> для заголовков
- Тег <p> для обозначения абзаца
- Тег <img/> для вставки изображений
- Тег <a> для вставки ссылок
Теги <h2> to <h6> используются для структурирования заголовков. В HTML используются 6 уровней HTML заголовков, от <h2> до <h6>. <h2> используется для обозначения самого важного, а <h6> наименее важного заголовков.
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы </title> </head> <body> <h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> <h5>Заголовок четвертого уровня</h5> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6> </body> </html>
Попробуйте сами!
Результат
Парный тег <p> используется для разграничения абзацев. Браузеры по умолчанию добавляют отступы до <p> и после </p>
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы </title> </head> <body> <h2>Пример использования тега <br></h2> <p> Внутри абзаца мы можем вставить тег <br />, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p> </body> </html>
Попробуйте сами!
Результат
Для вставки HTML изображений используется одинарный тег <img/>.
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы </title> </head> <body> <h2>Пример изображения</h2> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7. jpeg" alt="Aleq"/> </body> </html>
Попробуйте сами!
Результат
Для создания HTML ссылок используется тег <a> (также известный как анкор).
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы </title> </head> <body> <a href="https://www.w3docs.com/">https://ru.w3docs.com</a> </body> </html>
Попробуйте сами!
Результат
Работа с основными HTML тегами и атрибутами для новичков
Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Блок . Структура простейшей страницы
Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> — для основного текста, который и виден на экране браузера.
В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).
Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — <!DOCTYPE html>.
Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> Это основное содержимое страницы.</body> </html>
Как выглядит этот пример в браузере смотрите по данной ссылке.
Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:
Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.
Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.
Блок . Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега <p> таким образом:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это абзац. </p> <p> Это еще один абзац. </p> <p> И еще один абзац. </p> </body> </html>
Так код будет выглядеть в браузере:
Это абзац.
Это еще один абзац.
И еще один абзац.
Блок . Заголовки h2, h3, h4, h5, h5, h6
Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги — каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 — название блоков страницы, в h4 — название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> <p>Это первый абзац.</p> <p>Это второй абзац.</p> <p>Это третий абзац. </p> </body> </html>
Так код будет выглядеть в браузере:
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h5
Заголовок h6
Это первый абзац.
Это второй абзац.
Это третий абзац.
Блок . Жирный
Вы уже знаете, что заголовки по умолчанию жирные
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это обычный текст, а это <b>жирный</b> текст. </p> </body> </html>
Так код будет выглядеть в браузере:
Это обычный текст, а это жирный текст.
Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.
Блок . Курсив
Кроме жирного можно сделать также и курсив с помощью тега <i>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это обычный текст, а это <i>курсивный</i> текст. </p> </body> </html>
Так код будет выглядеть в браузере:
Это обычный текст, а это курсивный текст.
Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы — это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <ul> <li>Первый пункт списка.</li> <li>Второй пункт списка.</li> <li>Третий пункт списка.</li> </ul> </body> </html>
Так код будет выглядеть в браузере:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.
Давайте сделаем упорядоченный список, используя тег ol:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <ol> <li>Первый пункт списка. </li> <li>Второй пункт списка.</li> <li>Третий пункт списка.</li> </ol> </body> </html>
Так код будет выглядеть в браузере:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место — и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).
Блок . Ссылки
Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было — интернет был бы просто набором страниц, никак не связанных друг с другом.
Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a> </body> </html>
Так код будет выглядеть в браузере:
Ссылка на сайт phphtml.net.
Ссылки бывают абсолютные и относительные, кроме того, они могут вести как на ваш сайт, так и на чужой. Эти сложные моменты лучше показывать, а не описывать текстом, поэтому я снял для вас следующее видео. Посмотрите его и только потом переходите к дальнейшему чтению:
Тут скоро будет видео про ссылки абсолютные и относительные
Блок . Картинки
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.
Как это работает, посмотрим на следующем примере:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <img src="smile. png"> </body> </html>
Так код будет выглядеть в браузере:
Обратите внимание на то, что тег <img> не требует закрывающего тега.
Блок . Ссылки в виде картинок
Ссылкой может быть не только текст, но и картинка — для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку — и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку — нажмите кнопку «назад» в браузере):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <a href="http://phphtml.net"><img src="smile.png"></a> </body> </html>
Так код будет выглядеть в браузере:
Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца рядом — в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Давайте убедимся в этом на следующем примере:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p>Это первый абзац.</p> <p>Это второй абзац.</p> </body> </html>
Так код будет выглядеть в браузере:
Это первый абзац.
Это второй абзац.
Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.
Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.
Давайте посмотрим на его работу на следующем примере:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p>Это первая строка текста, <br> а это вторая. </p> </body> </html>
Так код будет выглядеть в браузере:
Это первая строка текста,
а это вторая.
Блок . Комментарии HTML
Практически во всех языках программирования есть такое понятие как «комментарии». Комментарии — это такой текст, который будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.
Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса — <!—, потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <!-- Это комментарий HTML - на странице сайта он не отображается. --> Это основное содержимое страницы. </body> </html>
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
← Предыдущая страница Следующая страница →
Основные теги HTML | Карьера Карма
Понимание основных тегов HTML является основополагающим навыком веб-разработки. Если веб-сайт представляет собой дом, каждый HTML-тег подобен кирпичу, придающему ему форму. Точно так же, как вы не можете понять, как построить дом, не понимая, как возводить структуру, вы не можете понять, как создавать хорошие веб-сайты, не разбираясь в HTML.
Поскольку веб-разработка является одной из лучших технических профессий 2022 года, освоение основных HTML-тегов — идеальное место для начала обучения.
Найдите подходящий учебный лагерь
- Career Karma подберет для вас лучшие технологические учебные курсы
- Доступ к эксклюзивным стипендиям и подготовительным курсам
Выберите свой интерес
Разработка программного обеспеченияДизайнОбработка и анализ данныхАналитика данныхПродажиUX-дизайнКибербезопасностьЦифровой маркетингИмя
Фамилия
Электронная почта
Номер телефона
Продолжая, вы соглашаетесь с нашими Условиями обслуживания и Политикой конфиденциальности, а также соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.
Что такое теги HTML? На фото: рождение веб-сайта. Вы читаете эту статью на сайте. Вы когда-нибудь задумывались, откуда компьютер знает, какой контент отображать и как его отображать? Что делает некоторые тексты жирными, курсивными, а некоторые содержат ссылку на другую веб-страницу?
Частью ответа являются теги HTML. Когда-то HTML составлял большую часть кода в Интернете. Хотя это изменилось, HTML по-прежнему является важной частью получения контента в Интернете.
HTML — это язык разметки. После того, как человек напишет контент, ему нужно будет разметить его с помощью HTML, чтобы, например, отличить заголовок от абзацев. Большая часть этого делается путем вставки тегов по всему контенту.
HTML-тег — это специальное ключевое слово, заключенное в острые скобки < и >, например:
. Теги почти всегда идут парами, с одним начальным тегом и одним конечным тегом. Разница в том, что закрывающие теги имеют дополнительную косую черту внутри скобок: <пример>Первый тег — это начало, а второй — конец.
Вот 10 распространенных HTML-тегов , о которых должен знать любой веб-разработчик, и они особенно важны для тех, кто только начинает изучать HTML.
1.
Это тег корневого элемента. Это означает, что все, что заключено в эти скобки, содержит HTML-код.
Этот тег отличает заголовок веб-страницы от содержимого. Здесь вы размещаете код Javascript или предоставляете «мета» информацию о веб-сайте.
3.
Вы заметили, что вкладки браузера содержат текст, который дает вам обзор веб-сайта? Этот текст записывается как заголовок сайта с этим тегом.
4.
Тег body определяет фактическое содержание веб-сайта.
Это тег заголовка, который создает заголовок, увеличивая текст и выделяя его жирным шрифтом. Имеется шесть тегов заголовков: h2, h3, h4, h5, h5, h6, в порядке убывания размера.
6.
Этот тег указывает, что данный раздел должен быть отдельным абзацем. Браузеры обычно вставляют пробелы между абзацами, облегчая чтение текста.
7.
Этот тег позволяет нам создать ссылку с атрибутом href, например:
8. Тег image позволяет вставлять изображения на веб-страницу.
9.
Теги Div группируют несколько фрагментов контента в один контейнер, что позволяет выполнять такие действия, как применение отдельных стилей только к этому контенту
Span — это уменьшенная версия div, используемая для оформления встроенного содержимого или взаимодействия с ним. Вы можете добавить всего пару слов в определенный класс (Text), что, опять же, отлично подходит для стилизации и повышения отзывчивости контента.
Этого должно быть более чем достаточно, чтобы вы начали создавать потрясающие веб-сайты!
О нас: Career Karma — это платформа, предназначенная для того, чтобы помочь соискателям найти, изучить и подключиться к программам профессионального обучения для продвижения по карьерной лестнице. Узнайте о публикации CK.
Теги HTML
Об авторе
Трент Фаулер
Писатель Career Karma
Трент Фаулер — исследователь данных и писатель, интересующийся машинным обучением, технологиями блокчейна и футуризмом. читать дальше
Подробнее читайте Трент Фаулер
Поделись этим
Основные HTML-теги — 1Keydata HTML Tutorial
Учебное пособие по HTML > HTML-теги > Основные HTML-теги
Основные теги включают,
Этот тег используется для указания того, что это HTML-документ. Большинство HTML-документов должны начинаться и заканчиваться этим тегом.
<заголовок>Этот тег используется для обозначения раздела заголовка HTML-документа, который обычно включает теги
Это указывает на заголовок этой HTML-страницы. Название — это то, что отображается в верхнем левом углу браузера при просмотре веб-страницы. Например, прямо сейчас вы можете увидеть там «Основные теги: html, head, title, meta, body». Это название этой страницы.
Тег title важен, когда речь идет о ранжировании в поисковых системах. Многие поисковые системы уделяют особое внимание тексту в теге
Информация тега не отображается напрямую при отображении страницы в браузере. Скорее, это используется автором HTML-страницы для записи информации, связанной с этой страницей. Два общих атрибута: name и content . Тег раньше имел большое значение в поисковой оптимизации, и авторы тщательно продумывали, что находится внутри тега, чтобы получить лучший рейтинг в поисковых системах, но в последнее время его важность неуклонно снижается.
<тело>Тег