Как написать сайт на html с нуля - руководство для начинающих

Дата публикации: 16 ноября 2025

Дата обновления: 8 апреля 2026

Антон Маркин

10 503

Время прочтения: 30 минут

Хочешь самостоятельно запустить рост своего сайта по SEO?

Изучи бесплатный мини-курс "Вектор SEO" Маркина Антона

4 УРОКА

которые помогут тебе найти критические проблемы на сайте
и запустить его рост

Где тебе выслать уроки?!

Сегодня вы узнаете как создать сайт на html в блокноте. Мы расскажем основы написания веб-страниц в простой программе "блокнот", которая есть у каждого на ПК. Затем файл с кодом можно будет назвать index.html и перенести на хостинг. Так вы сделаете свой первый веб-сайт с полного нуля. И его верстка будет выглядеть профессионально.

HTML (HyperText Markup Language) является основным языком разметки, используемым для создания веб-страниц. Важность HTML в создании веб-страниц заключается в нескольких ключевых аспектах:

Структура и содержание

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

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

HTML обеспечивает основную структуру страницы, к которой затем применяется CSS (Cascading Style Sheets) для оформления и стилизации. Совместное использование HTML и CSS позволяет создавать красивые и эстетичные веб-дизайны.
Поддержка мультимедиа

HTML позволяет вставлять различные медиа на веб-страницы, такие как изображения, аудио и видео. Это существенно расширяет возможности передачи информации и позволяет создавать богатый контент для пользователей.
SEO (Search Engine Optimization)

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

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

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

HTML, созданный даже в обычном Блокноте, — это первый шаг к собственному сайту. Он даёт структуру и смысл каждой странице, делает контент доступным на любом устройстве, а вместе с CSS открывает путь к профессиональному дизайну. Именно с чистой разметки начинается ваше присутствие в интернете — без неё не работают мультимедиа, не строится SEO и не рождается настоящая свобода творчества.

— Основа веб‑разработки

Основы HTML

HTML (HyperText Markup Language) представляет собой основной язык разметки для создания веб-страниц. Вот некоторые из основных концепций и элементов HTML:

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

<tagname>Содержимое элемента</tagname>

Элементы: Код HTML состоит из открывающего тега, содержимого и закрывающего тега. Содержимое элемента - это текст, изображения, ссылки или другие компоненты, которые определяются внутри тегов. Например:

<h1>Заголовок страницы</h1>
<p>Это параграф с текстом.</p>
<img src="image.jpg" alt="Описание изображения">

Атрибуты: Атрибуты предоставляют дополнительную информацию для элементов. Они указываются внутри открывающего тега и содержат имя и значение. Например:

<a href="https://www.example.com">Ссылка на example.com</a>
<img src="image.jpg" alt="Описание изображения">

Структура страницы: Базовая структура веб-страницы в HTML включает <html>, <head>, и <body>. <html> определяет корневой элемент документа, <head> содержит метаданные страницы (например, заголовок и ссылки на стили), а <body> содержит видимое содержимое страницы.

<!DOCTYPE html>

<html>

  <head>

    <title>Заголовок страницы</title>

  </head>

  <body>

    <h1>Привет, мир!</h1>

    <p>Это моя первая веб-страница.</p>

  </body>

</html>

Семантические элементы: HTML5 код предоставляет семантические части, которые помогают обозначить смысловую структуру страницы, такие как <header>, <nav>, <main>, <footer>, <section>, <article>, и другие. Их использование помогает повысить доступность и улучшить SEO.

Ссылки и изображения: <a> используется для создания гиперссылок, которые ведут на другие веб-страницы или ресурсы, а <img> используется для вставки изображений на страницу.

Списки: <ul> используется для неупорядоченных списков, <ol> - для упорядоченных списков, а <li> - для элементов списка.

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

Формы: <form> используется для создания форм для ввода данных пользователем. Различные параметры формы, такие как <input>, <textarea>, <select>, используются для разных типов ввода данных.

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

Краткое описание HTML

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

HTML состоит из элементов, которые определяются с помощью тегов, обозначаемых угловыми скобками (< >). Они могут быть пустыми (например, <br>, для перевода строки) или иметь контент (текст, изображения и т. д.), заключенный между открывающим и закрывающим тегами.

HTML-документ начинается с <!DOCTYPE html>, после которого идет корневой элемент <html>, внутри которого находятся <head> и <body>. <head> содержит метаданные документа (например, заголовок, подключенные стили, мета-теги), а <body> содержит видимое содержимое страницы, которое отображается в браузере.

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

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

Категория	Элемент/Концепция	Описание	Пример использования	Поддержка браузеров
Структурные элементы	<!DOCTYPE>	Объявление типа документа, указывает браузеру версию HTML	<!DOCTYPE html>	✓ Все браузеры
Структурные элементы	<html>	Корневой элемент, содержащий весь HTML-документ	<html lang="ru">	✓ Все браузеры
Структурные элементы	<head>	Контейнер для метаданных, не отображается на странице	<head><title>...</title></head>	✓ Все браузеры
Структурные элементы	<body>	Содержит видимое содержимое веб-страницы	<body>Контент</body>	✓ Все браузеры
Семантические элементы HTML5	<header>	Определяет шапку документа или раздела	<header>Логотип</header>	✓ IE9+
Семантические элементы HTML5	<nav>	Контейнер для навигационных ссылок	<nav><ul>...</ul></nav>	✓ IE9+
Семантические элементы HTML5	<main>	Основное содержание документа (уникальное)	<main>Статья</main>	✓ IE11+
Семантические элементы HTML5	<article>	Независимый, самодостаточный контент	<article>Блог-пост</article>	✓ IE9+
Семантические элементы HTML5	<section>	Тематическая группа контента	<section>Глава</section>	✓ IE9+
Семантические элементы HTML5	<aside>	Побочный контент (боковая панель)	<aside>Реклама</aside>	✓ IE9+
Семантические элементы HTML5	<footer>	Подвал документа или раздела	<footer>Контакты</footer>	✓ IE9+
Текстовые элементы	<h1>-<h6>	Заголовки разных уровней (h1 - самый важный)	<h1>Главный заголовок</h1>	✓ Все браузеры
Текстовые элементы	<p>	Абзац текста	<p>Текст абзаца</p>	✓ Все браузеры
Текстовые элементы	<span>	Строчный контейнер для группировки	<span class="highlight">Текст</span>	✓ Все браузеры
Текстовые элементы	<div>	Блочный контейнер для группировки элементов	<div class="container">...</div>	✓ Все браузеры
Элементы форматирования	<strong>	Важный текст (обычно жирный)	<strong>Внимание!</strong>	✓ Все браузеры
Элементы форматирования	<em>	Выделенный текст (обычно курсив)	<em>Акцент</em>	✓ Все браузеры
Элементы форматирования	<mark>	Выделенный/помеченный текст	<mark>Поиск</mark>	✓ IE9+
Элементы форматирования	<code>	Фрагмент компьютерного кода	<code>print()</code>	✓ Все браузеры
Медиа элементы	<img>	Встраивание изображений	<img src="pic.jpg" alt="Описание">	✓ Все браузеры
Медиа элементы	<video>	Встраивание видео контента	<video controls><source src="movie.mp4"></video>	✓ IE9+
Медиа элементы	<audio>	Встраивание звукового контента	<audio controls><source src="sound.mp3"></audio>	✓ IE9+
Медиа элементы	<figure> & <figcaption>	Контейнер для медиа с подписью	<figure><img><figcaption>Подпись</figcaption></figure>	✓ IE9+
Таблицы	<table>	Контейнер для табличных данных	<table><tr><td>Ячейка</td></tr></table>	✓ Все браузеры
Таблицы	<thead>, <tbody>, <tfoot>	Группировка частей таблицы	<thead><tr><th>Заголовок</th></tr></thead>	✓ Все браузеры
Формы	<form>	Контейнер для элементов ввода данных	<form action="/submit">...</form>	✓ Все браузеры
Формы	<input>	Поле ввода различных типов	<input type="text" name="username">	✓ Все браузеры
Формы	<input type="email">	Поле для ввода email с валидацией	<input type="email" required>	✓ IE10+
Формы	<input type="date">	Выбор даты через календарь	<input type="date">	✓ IE14+
Формы	<textarea>	Многострочное текстовое поле	<textarea rows="4">Текст</textarea>	✓ Все браузеры
Формы	<select> & <option>	Выпадающий список вариантов	<select><option>Выбор</option></select>	✓ Все браузеры
Формы	<button>	Кнопка для отправки формы или действий	<button type="submit">Отправить</button>	✓ Все браузеры
Ссылки	<a>	Гиперссылка для навигации	<a href="https://example.com">Ссылка</a>	✓ Все браузеры
Ссылки	<a target="_blank">	Открытие ссылки в новой вкладке	<a href="url" target="_blank">Новое окно</a>	✓ Все браузеры
Списки	<ul> & <li>	Маркированный (неупорядоченный) список	<ul><li>Пункт</li></ul>	✓ Все браузеры
Списки	<ol> & <li>	Нумерованный (упорядоченный) список	<ol><li>Первый</li></ol>	✓ Все браузеры
Списки	<dl>, <dt>, <dd>	Список определений (термин и описание)	<dl><dt>HTML</dt><dd>Язык разметки</dd></dl>	✓ Все браузеры
Мета-теги	<meta charset>	Кодировка документа	<meta charset="UTF-8">	✓ Все браузеры
Мета-теги	<meta name="viewport">	Адаптивность для мобильных устройств	<meta name="viewport" content="width=device-width">	✓ Все браузеры
Мета-теги	<meta name="description">	Описание страницы для SEO	<meta name="description" content="Описание">	✓ Все браузеры
Атрибуты	id	Уникальный идентификатор элемента	<div id="main">	✓ Все браузеры
Атрибуты	class	Класс для группировки элементов	<div class="container box">	✓ Все браузеры
Атрибуты	style	Встроенные CSS стили	<p style="color: red">	✓ Все браузеры
Атрибуты	data-*	Пользовательские данные	<div data-id="123">	✓ IE11+
HTML5 API	Local Storage	Хранение данных в браузере	localStorage.setItem('key', 'value')	✓ IE8+
HTML5 API	Geolocation	Определение геопозиции пользователя	navigator.geolocation.getCurrentPosition()	✓ IE9+
HTML5 API	Canvas	Рисование графики через JavaScript	<canvas id="myCanvas"></canvas>	✓ IE9+
HTML5 API	Web Workers	Фоновые скрипты без блокировки UI	new Worker('script.js')	✓ IE10+
Доступность (a11y)	alt	Альтернативный текст для изображений	<img src="pic.jpg" alt="Описание">	✓ Все браузеры
Доступность (a11y)	aria-*	Атрибуты для скринридеров	<div aria-label="Меню">	✓ IE8+
Доступность (a11y)	tabindex	Порядок навигации клавишей Tab	<button tabindex="0">	✓ Все браузеры
Оптимизация	defer	Отложенная загрузка скриптов	<script src="app.js" defer></script>	✓ IE10+
Оптимизация	async	Асинхронная загрузка скриптов	<script src="analytics.js" async></script>	✓ IE10+
SEO	<title>	Заголовок страницы (важен для SEO)	<title>Название страницы</title>	✓ Все браузеры
SEO	<link rel="canonical">	Указание канонического URL	<link rel="canonical" href="https://...">	✓ Все браузеры
Валидация	required	Обязательное поле формы	<input type="text" required>	✓ IE10+
Валидация	pattern	Регулярное выражение для проверки	<input pattern="[A-Za-z]{3}">	✓ IE10+
Валидация	min/max	Минимальное/максимальное значение	<input type="number" min="1" max="10">	✓ IE10+

Разметка и структура веб-страницы

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

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

<h1>...<h6>

Теги заголовков, используются для обозначения заголовков разного уровня.
<p>

Тег абзаца, используется для отображения отдельных параграфов текста.
<img>

Тег изображения, используется для вставки изображений на страницу.
<a>

Тег ссылки, создает гиперссылки на другие веб-страницы или ресурсы.

Открывающие и закрывающие теги: В HTML коде обычно заключаются в пару тегов - открывающий <tag> и закрывающий </tag>. Открывающий тег указывает начало элемента, а закрывающий тег указывает его окончание. Например:

<h1>Заголовок</h1>
<p>Это абзац текста.</p>

Вложенные параметры: Они могут быть вложенными друг в друга. Например:

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

Структура страницы: HTML-документ обычно имеет следующую структуру:

<!DOCTYPE html>
<html>

<head>

</head>

<body>

</body>

</html>

Семантические элементы: Код HTML5 предоставляет семантические параметры, которые помогают обозначить смысловую структуру страницы. Например:

<header>

Заголовок страницы или раздела.
<nav>

Навигационное меню.
<main>

Основное содержимое страницы.
<footer>

Нижний колонтитул страницы.

Атрибуты: Код может иметь атрибуты, которые предоставляют дополнительную информацию. Например:

<a href="https://www.example.com">Ссылка на example.com</a>
<img src="image.jpg" alt="Описание изображения">

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

Использование тегов и атрибутов

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

Теги

<h1>, <h2>, ..., <h6>

Теги заголовков, используются для обозначения заголовков разного уровня. <h1> имеет наивысший уровень важности, а <h6> - наименьший.
<p>

Тег абзаца, используется для отображения отдельных параграфов текста.
<a>

Тег ссылки, используется для создания гиперссылок на другие веб-страницы или ресурсы. Атрибут href указывает адрес, на который должна вести ссылка.
<img>

Тег изображения, используется для вставки изображений на страницу. Атрибут src указывает путь к изображению, а alt - альтернативный текст, который отображается, если изображение не может быть загружено или не видно.
<ul> и <ol>

Теги неупорядоченных и упорядоченных списков соответственно. <li> - символы списка. Прописывается в html, а не в css.
<table>

Тег таблицы, используется для создания таблиц. Заголовки таблицы обозначаются с помощью элемента <thead>, строки - <tr>, ячейки - <td> или <th>.

Атрибуты

href

Используется в элементе <a> для указания URL-адреса, на который должна вести ссылка.
src

Используется в элементе <img> для указания пути к изображению.
alt

Используется в элементе <img> для предоставления альтернативного текста, который отображается, когда изображение недоступно.
width и height

Используются в элементе <img> для определения ширины и высоты изображения.
colspan и rowspan

Используются в элементе <td> или <th> для объединения ячеек в таблице по горизонтали или вертикали.
class и id

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

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

Хочешь запустить рост своего сайта по SEO?

Пройди бесплатный мини-курс "Вектор SEO" Маркина Антона

4 УРОКА

которые помогут тебе найти критические проблемы на сайте
и запустить его рост

Где тебе выслать уроки?!

Начало работы

Создание нового HTML-документа

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

1. Откройте текстовый редактор: Для создания HTML-документа можно использовать любой текстовый редактор, такой как Notepad (на Windows), TextEdit (на macOS) или любой другой предпочитаемый текстовый редактор.

2. Создайте новый файл: Нажмите на соответствующую команду "Создать новый файл" или используйте сочетание клавиш Ctrl + N (на Windows) или Cmd + N (на macOS).

3. Начните с базовой структуры HTML: Введите следующий код, чтобы начать с базовой структуры HTML:

<!DOCTYPE html>
<html>

<head>
<title>Заголовок страницы</title>
</head>

<body>

</body>

</html>

В этом коде <head> содержит метаданные страницы, а <body> - видимое содержимое страницы, которое будет отображаться в браузере.

4. Добавьте контент в <body>: Вставьте свой контент (текст, изображения, ссылки и т.д.) между открывающим и закрывающим тегами <body>. Например:

<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
<img src="image.jpg" alt="Описание изображения">
</body>

5. Сохраните файл: Выберите опцию "Сохранить" или используйте сочетание клавиш Ctrl + S (на Windows) или Cmd + S (на macOS). Убедитесь, что выбрано расширение .html и выберите имя для вашего HTML-документа (например, index.html).

6. Запустите HTML-документ в браузере: Чтобы просмотреть вашу веб-страницу, просто откройте сохраненный HTML-файл в вашем веб-браузере. Вы должны увидеть ваш контент, который вы добавили в <body>.

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

Определение базовой структуры страницы

Определение базовой структуры страницы с помощью тегов <!DOCTYPE>, <html>, <head> и <body> является ключевым шагом при создании веб-страницы с использованием HTML. Каждый из этих элементов выполняет определенную роль в организации структуры и содержания веб-документа. Вот более подробное описание каждого элемента:

<!DOCTYPE> (Объявление типа документа):

<!DOCTYPE> используется для указания типа документа (DTD - Document Type Definition), который определяет правила и стандарты, согласно которым будет интерпретироваться HTML-документ.
Этот элемент должен быть расположен в самом начале документа и является единственным элементом, располагающимся перед <html>.
Например, для HTML5, объявление типа документа будет следующим:

<!DOCTYPE html>

<html> (Корневой элемент HTML):

<html> является корневым элементом HTML-документа и содержит всё содержимое страницы.
Внутри <html> располагаются два основных элемента: <head> и <body>.
Начинается с открывающего тега <html> и заканчивается закрывающим тегом </html>.

<head> (Заголовочная секция):

<head> содержит метаданные (мета-теги, стили, скрипты и т. д.) и информацию, не отображаемую на веб-странице напрямую.
Здесь можно задать заголовок страницы, подключить стилевые файлы CSS, добавить мета-теги для SEO и другие настройки страницы.
Начинается с открывающего тега <head> и заканчивается закрывающим тегом </head>.

<body> (Тело страницы):

<body> содержит видимое содержимое веб-страницы, которое отображается в окне браузера.
Внутри <body> располагается текст, изображения, ссылки, таблицы, формы и другие субъекты, которые будут отображены на странице.
Начинается с открывающего тега <body> и заканчивается закрывающим тегом </body>.

Пример полной базовой структуры HTML-страницы:

<!DOCTYPE html>
<html>

<head>
<title>Заголовок страницы</title>

</head>

<body>

<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>

</html>

Каждый HTML-документ начинается с <!DOCTYPE html>. Это не просто формальность — именно эта строка указывает браузеру, как правильно читать и показывать страницу по современным стандартам HTML5. Без неё даже идеально написанный код может отображаться с ошибками. Начинайте с doctype, и ваш сайт будет работать там, где это важно.

— Правило вёрстки, которое нельзя пропустить

Подключение CSS и JavaScript

Подключение CSS (Cascading Style Sheets) и JavaScript - это важный аспект создания динамичных и стильных веб-страниц. CSS используется для стилизации элементов на странице, а JavaScript предоставляет возможность добавления интерактивности и функциональности. Вот как подключить CSS и JavaScript к HTML-документу:

Подключение CSS:

Для подключения CSS используется элемент <link> внутри раздела <head> документа.
Атрибут href определяет путь к файлу CSS, который необходимо подключить.
Атрибут rel указывает отношение между текущим документом и подключаемым файлом (в данном случае, тип связи - "stylesheet").

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

</body>

</html>

Здесь файл styles.css представляет собой файл CSS, который содержит стили для веб-страницы.

Подключение JavaScript:

Для подключения JavaScript используется элемент <script> внутри раздела <head> или <body> документа.
Атрибут src определяет путь к файлу JavaScript, который необходимо подключить.
Поместите <script> в раздел <head>, если скрипт должен быть доступен сразу после загрузки страницы, или в раздел <body>, если скрипт должен быть доступен после отображения содержимого страницы.

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>

<body>

</body>

</html>

Здесь файл script.js представляет собой файл JavaScript, который содержит скрипты для веб-страницы.

Замечание:

Вы можете подключать несколько файлов CSS и JavaScript, используя несколько элементов <link> и <script>.
Располагайте подключение CSS в разделе <head>, а подключение JavaScript - в разделе <head> или <body>, в зависимости от требуемого поведения скриптов.
Помните, что правильный порядок подключения имеет значение: сначала подключаются файлы CSS, а затем файлы JavaScript.

Заголовки и абзацы

Заголовки (Headings) и абзацы (Paragraphs) являются базовыми элементами HTML, которые используются для структурирования и форматирования текстового контента на веб-страницах. Они помогают разделить информацию на логические блоки и предоставляют иерархию важности для текстового содержания. Вот как использовать заголовки и абзацы в HTML:

Заголовки (Headings):

В HTML есть шесть уровней заголовков, обозначаемых тегами <h1> до <h6>. <h1> имеет наивысший уровень важности, а <h6> - наименьший. Вот примеры использования:

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>

Хорошей практикой считается использование <h1> только для основного заголовка страницы, который обозначает ее основной контент.

Абзацы (Paragraphs):

Для обозначения абзацев текста используется тег <p>. Внутри тега <p> вы можете разместить любой текст, который будет отображаться в виде отдельного параграфа.

<p>Это пример абзаца текста. Здесь вы можете добавить обычный текст.</p>
<p>Каждый тег <p> представляет новый абзац на странице.</p>

Заголовки и абзацы вместе:

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

<h1>Главный Заголовок страницы</h1>
<p>Это первый абзац текста.</p>
<h2>Подзаголовок</h2>
<p>Это второй абзац текста, который относится к подзаголовку.</p>
<h2>Еще один Подзаголовок</h2>
<p>И так далее...</p>

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

Ссылки и изображения

Создание гиперссылок с помощью тега <a> и атрибута href:

Тег <a> используется для создания гиперссылок на другие веб-страницы, файлы, электронные почты или другие ресурсы. Атрибут href указывает адрес (URL) ресурса, на который будет вести ссылка. Вот примеры использования тега <a> для создания гиперссылок:

<!DOCTYPE html>
<html>

<head>
<title>Пример гиперссылок</title>
</head>
<body>
<h1>Гиперссылки</h1>


<p><a href="https://www.example.com">Ссылка на Example.com</a></p>
<p><a href="page2.html">Перейти на страницу 2</a></p>
<p><a href="mailto:info@example.com">Написать нам</a></p>


<p><a href="documents/document.pdf" download>Скачать PDF</a></p>
</body>

</html>

Здесь:

Первая ссылка ведет на внешний веб-ресурс (https://www.example.com).
Вторая ссылка указывает на другую страницу в той же директории (page2.html).
Третья ссылка предназначена для отправки электронной почты (mailto:info@example.com).
Четвертая ссылка ссылается на файл document.pdf в поддиректории documents и предлагает его скачать пользователю (атрибут download).

Вставка изображений с использованием тега <img> и атрибута src:

Тег <img> используется для вставки изображений на веб-страницу. Атрибут src указывает путь к изображению (URL изображения или относительный путь к файлу).

Вот примеры вставки изображений:

<!DOCTYPE html>
<html>
<head>
<title>Пример вставки изображений</title>
</head>

<body>
<h1>Изображения</h1>


<img src="https://www.example.com/images/picture.jpg" alt="Описание изображения">


<img src="images/picture2.jpg" alt="Еще одно изображение">

</body>
</html>

Здесь:

Первая вставка использует абсолютный URL изображения (https://www.example.com/images/picture.jpg).
Вторая вставка использует относительный путь к файлу изображения в поддиректории images (images/picture2.jpg).

Обратите внимание, что атрибут alt используется для предоставления альтернативного текста, который отображается, когда изображение не может быть загружено или не видно. Это полезно для доступности и SEO.

Списки

Упорядоченные списки с тегом <ol> и элементами <li>

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

<!DOCTYPE html>
<html>
<head>
<title>Упорядоченные списки</title>
</head>

<body>
<h1>Упорядоченные списки</h1>

<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>

</html>

Здесь у нас есть упорядоченный список с тремя элементами. Браузер автоматически нумерует каждый элемент списка.

Неупорядоченные списки с тегом <ul> и элементами <li>

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

<!DOCTYPE html>
<html>

<head>
<title>Неупорядоченные списки</title>
</head>

<body>
<h1>Неупорядоченные списки</h1>

<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>

</html>

Здесь у нас есть неупорядоченный список с тремя элементами. Браузер автоматически добавляет маркеры для каждого элемента списка (обычно точки или другие символы).

Оба типа списков (<ol> и <ul>) могут содержать любой текст, изображения, ссылки и другие параметры HTML кода внутри каждого элемента списка <li>. Они предоставляют удобный способ организации информации в структурированном виде на веб-страницах.

Таблицы

Тег <table> используется для создания таблиц на веб-страницах. Внутри тега <table> мы определяем заголовки таблицы <thead>, строки таблицы <tr>, а также ячейки таблицы <td> (обычные ячейки) или <th> (ячейки заголовков). Вот пример создания таблицы с заголовками:

<!DOCTYPE html>
<html>

<head>
<title>Пример таблицы</title>
</head>
<body>
<h1>Таблица</h1>

<table>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
<th>Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Алиса</td>
<td>25</td>
<td>Нью-Йорк</td>
</tr>
<tr>
<td>Боб</td>
<td>30</td>
<td>Лондон</td>
</tr>
<tr>
<td>Карл</td>
<td>22</td>
<td>Париж</td>
</tr>
</tbody>
</table>

</body>
</html>

Здесь мы создали простую таблицу с тремя столбцами: "Имя", "Возраст" и "Город". Внутри <thead> определяется заголовочная строка с тегом <tr>. В заголовочной строке содержатся ячейки заголовков <th>, которые обозначают названия столбцов.

Далее, внутри <tbody> определяются строки таблицы с тегами <tr>. Каждая строка содержит ячейки с тегами <td>, представляющие данные в соответствующих столбцах.

Основное правило: Заголовочные ячейки <th> используются для заголовков столбцов, а обычные ячейки <td> для данных в таблице.

Также можно использовать другие теги, такие как <tfoot> для определения подвала таблицы, если это необходимо. В приведенном примере мы использовали только <thead> и <tbody>, так как это наиболее часто используемая структура для простых таблиц.

Формы

Тег <form> используется для создания формы для ввода данных на веб-странице. Формы позволяют пользователям вводить и отправлять данные на сервер для обработки. Внутри тега <form> мы используем различные детали формы, такие как <input>, <textarea>, <select> и другие, чтобы собрать данные от пользователя. Вот пример создания простой формы с различными элементами:

<!DOCTYPE html>
<html>
<head>
<title>Пример формы</title>
</head>

<body>
<h1>Форма для ввода данных</h1>

<form action="/submit_form" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<label for="gender">Пол:</label>

<select id="gender" name="gender">
<option value="male">Мужской</option>
<option value="female">Женский</option>
<option value="other">Другое</option>
</select>

<input type="submit" value="Отправить">
</form>

</body>
</html>

Здесь у нас есть поле ввода имени: <input> с типом text. Атрибут required указывает, что это поле обязательно для заполнения. Остальные атрибуты смотрите ниже:

<input> с типом email

Поле ввода для адреса электронной почты. Тип email позволяет проверить, соответствует ли значение адресу электронной почты.
<textarea>

Поле ввода для длинного текста, например, для ввода сообщения. Атрибут rows задает высоту текстовой области в строках.
<select> с <option>

Выпадающий список для выбора пола. <option> определяет отдельные элементы списка.
<input> с типом submit

Это кнопка отправки формы.

Когда пользователь заполняет форму и нажимает кнопку "Отправить", данные будут отправлены на сервер по указанному в атрибуте action адресу. Метод указан в атрибуте method (в данном случае "post"). В реальном примере сервер будет обрабатывать отправленные данные, но в данном примере адрес action просто задан для демонстрации.

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

HTML5 ввел множество семантических элементов, таких как <header>, <nav>, <main>, и <footer>, которые помогают лучше определить структуру веб-страницы и повысить ее семантическую ценность. Использование этих элементов способствует более четкому пониманию содержания страницы как людьми, так и поисковыми системами. Вот краткое введение в семантические элементы и их практическое использование:

<header>:

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

Пример использования:

<header>
<h1>Логотип или название сайта</h1>
<nav>

</nav>
</header>

<nav>:

Элемент <nav> используется для определения навигационного меню на странице. Это может быть главное меню сайта или другие навигационные ссылки.

Пример использования:

<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</nav>

<main>:

Элемент <main> предназначен для определения основного содержания страницы. Он содержит уникальное для каждой страницы содержание, которое является основной целью посещения этой страницы.

Пример использования:

<footer>:

Элемент <footer> определяет подвал или нижнюю часть страницы. Здесь обычно располагаются контактная информация, ссылки на социальные сети, авторские права и другие вспомогательные атрибуты блога.

Пример использования:

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

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

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

Практические примеры

Пример простой веб-страницы с основными элементами HTML:

<!DOCTYPE html>
<html>

<head>
<title>Пример простой веб-страницы</title>
</head>

<body>
<h1>Привет, мир!</h1>
<p>Это пример простой веб-страницы с основными элементами HTML.</p>

<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
<a href="https://www.example.com">Ссылка на Example.com</a>
<img src="https://www.example.com/images/picture.jpg" alt="Описание изображения">

</body>
</html>

Пример формы обратной связи с элементами ввода и кнопкой отправки:

<!DOCTYPE html>
<html>

<head>
<title>Пример формы обратной связи</title>
</head>

<body>
<h1>Форма обратной связи</h1>
<form action="/submit_form" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="Отправить">
</form>
</body>

</html>

Пример таблицы для отображения данных:

<!DOCTYPE html>
<html>

<head>
<title>Пример таблицы данных</title>
</head>

<body>
<h1>Таблица данных</h1>
<table>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Алиса</td>
<td>25</td>
<td>alice@example.com</td>
</tr>
<tr>
<td>Боб</td>
<td>30</td>
<td>bob@example.com</td>
</tr>
<tr>
<td>Карл</td>
<td>22</td>
<td>carl@example.com</td>
</tr>
</tbody>
</table>
</body>

</html>

Здесь у нас есть три примера:

Простая веб-страница с заголовком, абзацами, списком, ссылкой и изображением.
Форма обратной связи с полями ввода для имени, электронной почты и сообщения, а также кнопкой "Отправить".
Таблица с данными, состоящая из трех столбцов: "Имя", "Возраст" и "Email".

Основные рекомендации и советы

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

Семантика

Используйте семантические элементы HTML (например, <header>, <nav>, <main>, <footer>, <section>, <article>, <aside>, <figure>, <figcaption>) для более понятной структуры страницы и улучшения доступности.
Валидность

Проверяйте валидность вашего HTML-кода с помощью проверки на соответствие стандартам W3C. Это поможет избежать проблем с отображением и повысит совместимость с различными браузерами.
Соответствие атрибутов

Соблюдайте соответствие атрибутов элементам HTML. Например, использование for для атрибута id в элементе <label>.
Атрибут alt

Всегда добавляйте атрибут alt к изображениям, чтобы обеспечить доступность и улучшить SEO.
Адаптивный дизайн

Учитывайте адаптивность и отзывчивость вашего дизайна, чтобы страницы хорошо отображались на разных устройствах (мобильных телефонах, планшетах, компьютерах).
Избегайте стилей в HTML

Разделяйте содержимое (HTML) и стили (CSS). Используйте таблицы стилей (CSS) для управления внешним видом страницы.
Отзывчивые изображения

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

Используйте теги заголовков <h1> до <h6> и следуйте иерархии важности заголовков на странице.
Избегайте устаревших элементов

Избегайте использования устаревших элементов HTML, таких как <font>, <center>, <strike> и т. д. Используйте CSS для стилизации вместо них.
Комментарии

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

Тестируйте вашу веб-страницу на разных браузерах и устройствах, чтобы убедиться, что она хорошо работает в различных ситуациях.
SEO

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

Будьте осторожны с пользовательскими данными, отправленными через формы. Внимательно обрабатывайте данные и предотвращайте уязвимости XSS и другие атаки.
Поддержка

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

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

Поддержка различных браузеров

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

Использование семантических элементов

Используйте семантические элементы HTML для ясной структуры страницы. Семантические элементы помогают браузерам лучше понимать ваш контент.
CSS Reset или Normalize

Используйте CSS Reset или Normalize для сброса стилей по умолчанию браузера и обеспечения более предсказуемого поведения на разных браузерах.
Проверка валидности

Проверьте ваш HTML-код и CSS на соответствие стандартам W3C, чтобы убедиться, что ваш код корректен и не вызовет проблем с отображением на различных браузерах.
Прогрессивное улучшение (Progressive Enhancement) и Деградация (Graceful Degradation)

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

Тестируйте ваш сайт на различных браузерах, таких как Google Chrome, Mozilla Firefox, Microsoft Edge, Safari и Opera, чтобы убедиться, что он хорошо отображается и функционирует на всех популярных браузерах.
Адаптивный дизайн

Создавайте адаптивные и отзывчивые дизайны, которые лучше адаптируются к различным размерам экранов и устройствам.
Префиксы CSS и полифиллы

При использовании новых свойств CSS или JavaScript API, убедитесь, что вы предоставляете соответствующие вендорные префиксы для поддержки старых браузеров и используйте полифиллы, если необходимо.
Используйте стандарты и версии браузеров

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

Вовлекайте тестовые группы пользователей, чтобы проверить ваш сайт на различных устройствах и браузерах и получить обратную связь.
Обновления

Постоянно отслеживайте изменения и обновления в браузерах и адаптируйте свой код при необходимости.

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

Валидация HTML-кода

Валидация HTML-кода - процесс проверки кода веб-страницы на соответствие стандартам и правилам языка HTML, установленным организацией W3C (World Wide Web Consortium). Валидный HTML-код соответствует указанным стандартам и обеспечивает правильное отображение и интерпретацию страницы в различных браузерах и устройствах.

Для валидации HTML-кода можно использовать различные инструменты и онлайн-сервисы. Вот несколько популярных способов валидации HTML-кода:

W3C Markup Validation Service

Официальный сервис W3C, который позволяет проверить HTML-код на соответствие стандартам HTML и XHTML. Вы можете вставить свой код в форму на веб-сайте: https://validator.w3.org/
Nu Html Checker (v.Nu)

Это валидатор HTML, разработанный и поддерживаемый W3C и WHATWG (Web Hypertext Application Technology Working Group). Он обеспечивает проверку соответствия кода HTML5 спецификации HTML5 и выдачу детализированных сообщений об ошибках. Вы можете использовать онлайн-версию валидатора: https://validator.nu/
HTML Tidy

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

Многие редакторы кода предоставляют расширения, которые позволяют валидировать HTML-код прямо внутри редактора. Например, расширение "HTMLHint" для Visual Studio Code.

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

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

W3C Markup Validator — 40%

Nu Html Checker (v.Nu) — 25%

Расширения редакторов (HTMLHint и др.) — 20%

HTML Tidy — 10%

Встроенные инструменты IDE/CMS — 5%

Важность оптимизации изображений и других медиа-ресурсов

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

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

Экономия трафика

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

Оптимизированные медиа-ресурсы улучшают адаптивность и отзывчивость сайта, позволяя ему лучше адаптироваться к различным устройствам и разрешениям экранов.
SEO-оптимизация

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

Оптимизированные медиа-ресурсы лучше совместимы с различными браузерами и устройствами, что обеспечивает более надежное и предсказуемое отображение на всех платформах.
Доступность

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

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

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

Заключение

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

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

Для управления внешним видом сайта, обратите внимание на свойства CSS, такие как margin и padding, чтобы достичь желаемого отображения. Используйте meta теги для указания различной информации о вашем сайте и его авторе.

Наконец, помните, что при желании можно дополнить сайт с помощью PHP, добавив динамический контент или интерактивные элементы. Для этого вам понадобится знать не только HTML, но и основы PHP программирования.

Таким образом, создание сайта на HTML – это увлекательное дело, доступное даже тем, кто ранее не имел опыта в веб-разработке. Используйте данные темы, а также самостоятельно изучайте новые возможности и применяйте их в своем проекте, чтобы получить впечатляющий результат.

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

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

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

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

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

📚

Для написания этой статьи использовали литературу

1

Дудкин А. Ю. «SEO-продвижение сайта как эффективный метод стимулирования спроса на гостиничные услуги» // Сервису и туризму-инновационное развитие. – 2018. – С. 34-37.
2

Элиханов В. Г., Магомедов И. А., Багов А. М. «Продвижение сайта и оптимизация конверсии» // Экономика: вчера, сегодня, завтра. – 2020. – Т. 10. – №. 12-1. – С. 19-24.
3

Насиров Э. Ф., Кириллов Д. С. «SEO продвижение и продвижение бизнеса в интернете» // ВЫСОКИЕ ТЕХНОЛОГИИ, НАУКА И ОБРАЗОВАНИЕ: АКТУАЛЬНЫЕ ВОПРОСЫ, ДОСТИЖЕНИЯ И ИННОВАЦИИ. – 2019. – С. 73-76.

Антон Маркин

Автор этой статьи, SEO-эксперт & наставник

SEO с 2009 года, автор курсов по продвижению сайтов, основатель закрытого сообщества для SEO-специалистов.

Ведет блог в Telegram, где делится инсайтами и практическими кейсами.

Как написать сайт на html с нуля - руководство для начинающих

Структура и содержание

Кросс-платформенность

Визуальное оформление

Поддержка мультимедиа

SEO (Search Engine Optimization)

Доступность

Основы HTML

Краткое описание HTML

Разметка и структура веб-страницы

<h1>...<h6>

<p>

<img>

<a>

<header>

<nav>

<main>

<footer>

Использование тегов и атрибутов

<h1>, <h2>, ..., <h6>

<p>

<a>

<img>

<ul> и <ol>

<table>

href

src

alt

width и height

colspan и rowspan

class и id

Начало работы

Создание нового HTML-документа

Определение базовой структуры страницы

Подключение CSS и JavaScript

Заголовки и абзацы

Ссылки и изображения

Списки

Упорядоченные списки с тегом <ol> и элементами <li>

Неупорядоченные списки с тегом <ul> и элементами <li>

Таблицы

Формы

<input> с типом email

<textarea>

<select> с <option>

<input> с типом submit

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

Практические примеры

Основные рекомендации и советы

Семантика

Валидность

Соответствие атрибутов

Атрибут alt

Адаптивный дизайн

Избегайте стилей в HTML

Отзывчивые изображения

Теги заголовков

Избегайте устаревших элементов

Комментарии

Тестирование

SEO

Безопасность

Поддержка

Поддержка различных браузеров

Использование семантических элементов

CSS Reset или Normalize

Проверка валидности

Прогрессивное улучшение (Progressive Enhancement) и Деградация (Graceful Degradation)

Тестирование на различных браузерах

Адаптивный дизайн

Префиксы CSS и полифиллы

Используйте стандарты и версии браузеров

Используйте тестовые группы

Обновления

Валидация HTML-кода

W3C Markup Validation Service

Nu Html Checker (v.Nu)

HTML Tidy

Расширения для редакторов кода

Важность оптимизации изображений и других медиа-ресурсов