Содержание

  1. 1. Основы Разметки в HTML: Первые Шаги
  2. 2. Теги и Атрибуты
    1. 2.1. Что такое Теги?
    2. 2.2. Атрибуты
  3. 3. Таблицы: создание и форматирование
  4. 4. Семантическая разметка в HTML
Планируете заказать верстку сайта по макету, но не знаете с чего начать?
Эксперты Ворк24 помогут!
Хотите начать зарабатывать с помощью HTML-верстки?
Регистрируйтесь на бирже Ворк24!

обложка_Знакомство с HTML.png

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

HTML, сокращенно от HyperText Markup Language, является универсальным языком разметки для создания веб-страниц. Он дает возможность разработчикам формировать структуру информации на сайтах через элементы, такие как заголовки, абзацы, списки и гиперссылки. Простота HTML сочетается с глубокими возможностями: он лежит в основе сложных технологий, таких как CSS (стилизация) и JavaScript (добавление интерактивности).

Основы Разметки в HTML: Первые Шаги

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

  1. В HTML всё строится на основе тегов, которые диктуют браузеру способы отображения контента. Каждый документ HTML начинается с тега <html> и заканчивается таким же тегом, между которыми размещается весь остальной контент страницы.
  2. Документ HTML состоит из двух основных разделов: <head> и <body>. В <head> находятся метаданные, включая заголовок страницы <title>, отображаемый в вкладке браузера. Секция <body> содержит все, что видит пользователь: тексты, изображения, ссылки и другие элементы.
  3. Элементы разметки.
  • Заголовки. HTML предлагает шесть уровней заголовков от <h1> до <h6>. <h1> – самый важный или главный заголовок на странице, используется один раз.
  • Абзацы и текст. Для создания абзацев используется тег <p>. Это элемент для представления текста на странице.
  • Ссылки. Чтобы добавить ссылку, используется <a>, например, <a href=“https://www.example.com”>Посетить сайт</a>.
  • Изображения. Для вставки изображений применяется <img>, например, <img src=“image.jpg” alt=“Описание”>. Атрибут alt важен для описания содержимого изображения.

Пример веб-страницы:

20231124_113125.png

20231124_113423.png

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

Что такое Теги?

Теги

— это элементы HTML, задающие браузеру правила для отображения содержимого страницы. Так, <p> используется для обозначения текстового абзаца, в то время как <h1> служит для выделения заголовка самого высокого уровня.

Большинство тегов имеют открывающий и закрывающий элементы, например <p>…</p>. Но некоторые, такие как <img> —- самозакрывающиеся.

Атрибуты

Атрибуты в HTML служат для добавления дополнительных сведений об элементе. Располагаются они в начале тега и обычно формулируются как пара «ключ=значение» .

Примеры:

  • Ссылка. Здесь href указывает адрес, на который будет осуществлен переход.
    20231124_114357.png

20231124_114413.png

  • Изображение. Атрибут src указывает путь к файлу изображения, а alt — текстовое описание для случаев, когда изображение не может быть отображено.

20231124_114740.png

20231124_114757.png

  • Список. Здесь <ul> определяет неупорядоченный список, а <li> — элементы списка.

20231124_114921.png

20231124_114930.png

Таблицы: создание и форматирование

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

  • Структура. Основой таблицы является тег <table>. Внутри него размещаются строки (<tr>), ячейки (<td>). Каждая строка <tr> может содержать одну или несколько ячеек , которые представляют собой данные таблицы.
  • Заголовки. Для обозначения заголовков колонок используется тег <th>. Эти ячейки автоматически выделяются жирным шрифтом и центрируются, чтобы отличать их от обычных ячеек данных.
  • Разделение секции. Таблицу можно разделить на три секции: <thead> (заголовок), <tbody> (основное тело) и <tfoot> (нижний колонтитул). Это помогает организовать данные и улучшает читаемость таблицы.

20231124_115323.png

20231124_115257.png

Семантическая разметка в HTML

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

Что такое Семантическая Разметка?

Семантическая разметка использует HTML-теги, которые точно описывают свое содержание. Это противоположность использованию таких тегов, как <div> и <span>, которые ничего не говорят о своем содержимом.

Семантические элементы:

  • <header>: обозначает заголовочную часть веб-страницы или раздела.
  • <footer>: используется для нижней части страницы или раздела, содержит информацию об авторских правах, контактные данные и ссылки.
  • <article>: предназначен для самостоятельного содержимого, например, статьи, блога или комментария.
  • <section>: определяет раздел в документе, например, главы, заголовки, футеры или любые другие разделы содержимого.
  • <nav>: предназначен для навигации.
  • <aside>: используется для контента, косвенно связанного с содержимым страницы, например, боковая панель.

Примеры:

20231124_121448.png

20231124_121503.png

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

Ищите вакансии для фриланса удаленно или заказать верстку сайта по макету?

Комментарии

Нет комментариев

Предыдущая статья

Тег <datalist> в HTML

Следующая статья

CSS-свойство color
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 1 дня
Безопасная сделка
Прямой эфир