Как писать html код: HTML — правила оформления кода

Leave a Comment / Html / By /

Содержание

HTML — правила оформления кода

HTML — правила оформления кода

1. Синтаксис

1.1 Два пробела в качестве отступа

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

Хорошо
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ваша страница</title>
  </head>
  <body>
    <h2>Страница</h2>
    <p>Текст</p>
  </body>
</html>
Плохо
<!DOCTYPE html>
<html lang='ru'>
<head>
	<meta charset='UTF-8'>
    <title>Ваша страница</title>
</head>
<body>
<h2>Страница</h2>
<p>Текст</p>
</body>
</html>

1.2 Теги и атрибуты записываются в нижнем регистре

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

Хорошо
<div>
  <img src="./i/userpic.png" title="Иванов Иван">
  <a href="/profile/">Перейти в профиль</a>
</div>
Плохо
<DIV>
  <Img Src="./i/userpic.png" titLE="Иванов Иван">
  <A href="/profile/">Перейти в профиль</a>
</DIV>

1.3 Отдельные логические блоки отбиваются пустой строкой

Это облегчает работу с кодом и визуально создает структуру документа.

Хорошо
<h2>Заголовок первого уровня</h2>
<p>Первый параграф</p>
<h3>Заголовок второго уровня</h3>
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>
<h4>Заголовок третьего уровня</h4>
<figure>
  <figcaption>Блок с картинкой</figcaption>
  <img src="../img/image.jpg">
</figure>
Плохо
<h2>Заголовок первого уровня</h2>
<p>Первый параграф</p>
<h3>Заголовок второго уровня</h3>
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>
<h4>Заголовок третьего уровня</h4>
<figure>
  <figcaption>Блок с картинкой</figcaption>
  <img src=".
  ./img/image.jpg">
</figure>

1.4 Используйте только двойные кавычки

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

Хорошо
<div>
  <img src="first-img.jpg" alt="Первая картинка">
</div>
Плохо
<div>
  <img src='first-img.jpg' alt='Первая картинка'>
</div>

1.5 Не ставим пробелов перед и после символа =

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

Хорошо
<p>Это хороший пример</p>
Плохо
<p id ="first" class= "post">Это плохой пример</p>

1.6 Между атрибутами один пробел

Не используем переносов строк между атрибутами, только один пробел. Перенос строк принят в css-документах, но не в html-разметке. Пишите все атрибуты элемента в строку.

Хорошо
<figure>
  <img src="logo. jpg" alt="Логотип">
  <figcaption>Логотип компании</figcaption>
</figure>
Плохо
<figure>
  <img
  src="logo.jpg"
  alt="Логотип">
  <figcaption>Логотип компании</figcaption>
</figure>

2. Валидность

Html-документ должен проходить проверку на валидность. Для проверки используйте валидатор.

3. !DOCTYPE

Первой строчкой в HTML-документе должен идти актуальный doctype. Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.

<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>

4. Кодировка

Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.

<head>
  <meta charset="utf-8">
  <title>Заголовок</title>
</head>

5.

Подключение стилей

Файлы со стилями подключаются внутри тега <head> при помощи <link>. Атрибут type для тега <link> указывать не нужно, так как значение text/css устанавливается по умолчанию.

Хорошо: стилевой файл подключён в секции head
<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>…</body>
</html>
Плохо: стилевой файл подключён в секции body
 
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>
    <link rel="stylesheet" href="style.css">
  </body>
</html>

6. Подключение скриптов

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

При подключении скриптов в теге <script> атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.

Хорошо: скрипт подключается перед </body>
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>
    <!-- Содержимое страницы -->
    <script src="app.js"></script>
  </body>
</html>
Плохо: скрипт подключается в секции
<head>
<!DOCTYPE html>
<html lang="ru">
  <head>
    <script src="app.js"></script>
  </head>
  <body>…</body>
</html>

7. Атрибуты и их порядок

У HTML-элементов атрибут class пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.

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

<a href="/" data-name="element">Ссылка</a>
<input type="text" name="test">
<img src="img.jpg" alt="Картинка">

8.

Логические атрибуты

Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.

<!-- checked="checked" необязательно -->
<input type="checkbox" required checked>
<input type="text" disabled>
<select>
  <option value="1" selected>1</option>
</select>

9. Подписи

input

Для улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега <label>.

Хорошо: элемент формы radio связан с подписью через id и for
<input type="radio">
<label for="choose">Радио кнопка</label>
Хорошо: элемент формы radio и подпись обёрнуты в label
<label>
  <input type="radio"> Радио кнопка
</label>
Плохо: подпись не связана с элементом формы
<input type="radio"> Радио кнопка

10.

Атрибут языка

Для элемента <html> в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.

 <!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>

Как написать HTML-код быстрее — TheFastCode

(Кредит на изображение: будущее)

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

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

Отказ

Хотите отклонить код? Попробуйте это Строители сайта Отказ Или для дополнительной помощи по пути выберите веб хостинг Сервис с технической поддержкой.

Создать HTML на лету

При написании большого количества HTML за один ходи, написание каждого тега вручную может стать очень утомительным, очень быстро. Например, при написании списка ссылок нам нужно убедиться, что & lit; li & gt; и & lt; a & gt; Теги все открыты и закрываются в нужном месте. В противном случае ссылки могут не работать, и всю планировку страницы пойдут полностью Haywire.

Ускорив свой рабочий процесс HTML и CSS с Emmet (Кредит на изображение: Emmet.io)

Как использовать Emmet

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

Отказ Это инструмент, который сэкономит вам много печати и значительно улучшит ваш HTML & AMP; Рабочий процесс CSS. Emmet позволяет вам создавать элементы, набрав селектор CSS. Затем он будет разбирать и расширить этот элемент в обычный HTML. Ниже приведен оригинальный элемент, созданный в Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet обнаружит этот элемент, анализируйте его, а затем преобразуйте элемент в стандартный HTML, как показано ниже. Быстрый взгляд на элемент Emmet предлагает, чтобы & lit; li & gt; умножается на ( * 3. ) и каждый & lit; li & gt; Экземпляр будет называться главой, а затем соответствующее число (до 3).

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

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 1
 из 3 & lt; / a & gt; / li & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 2
 из 3 & lt; / a & gt; / li & gt;
    & lt; href = "" Class = "Глава" & gt; Глава 3
 из 3 & lt; / a & gt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet также знает о контексте. Например, если мы редактируем & lt; стол и GT; Скорее всего, мы захотим некоторые & lt; tr & gt; (Это строки) элементы, чтобы заполнить его. Все, что нам нужно было сделать, это указать, сколько нам нужно.

Это просто быстрый пример того, что может сделать Emmet, но есть еще много вариантов конфигурации. К ним относятся редактирование CSS, BEM (модификатор блочного элемента) класса и существует даже генератор LOREM IPSUM.

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

Используйте PUG для динамического контента

Пока Emmet идеально подходит для статического контента, что происходит, если контент должен быть более динамичным? Например, нам может потребоваться генерировать персонализированные домашние страницы, комплексные заказы или повторять общие блоки HTML. Это все возможно в JavaScript, но путем предварительной рендеринга этого контента мы можем получить дополнительную скорость повышения, не полагаясь на браузер пользователя. Помните, что у вас есть тяжелая страница Media, вы захотите поддержать его с надежным облачное хранилище Отказ

Шаг вперед мопс. Это инструмент шаблонов для HTML. Вы можете написать страницы в формате «.pug», и PUG будет прочитать этот файл, ввести некоторые динамические данные в него и возвращают стандартный HTML. Пример ниже — это то, как вы пишете код в PUG, чтобы создать тот же HTML, что и пример Emmet (выше).

 ул
  каждый вал в [1, 2, 3]
    лита
      A (Href = "", Class = "Глава") Глава
# {val} 3

Файл мопса использует только отступ для указывания вложенности.Он может повторять значения для генерации больших количеств HTML в одном проходе.Эти файлы «.PUG» предназначены для повторного использования в повторном использовании в проекте.

PUG доступен для установки из менеджера пакетов NPM ОтказНо, если вы хотите больше информации о том, как начать с мопса, вы получите посещение интернет сайт Отказ

Этот контент изначально появился в журнале Web Designer.

Прочитайте больше:

  • 10 лучших CSS Frameworks
  • CSS анимация Примеры для воссоздания
  • 8 HTML Теги, которые вы должны использовать (и 5, чтобы избежать)

HTML Урок 5: Как написать код HTML, чтобы ваши страницы можно было легко стилизовать с помощью CSS Позже

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

Где стиль?

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

Другой язык: CSS

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

Наша задача на сегодня

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

Встреть своего лучшего друга; Элемент

Хотя элемента HTML для создания столбца не существует, элемент

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

Начнем программировать! Я призываю вас следовать инструкциям, набирая или копируя и вставляя сегодняшний код по ходу дела (узнайте, как создать HTML-файл). Мы начнем с нашего типичного начального HTML-файла, о котором мы узнали в уроке 2: 9.0003

 



    <голова>
        <мета-кодировка="utf-8">
        Мой первый макет
    

    <тело>

Время добавить контент — наш первый столбец

Теперь давайте начнем добавлять наш контент; мы начнем с нашего первого раздела (или столбца) контента. Разместим в этой колонке список ссылок; добавьте следующий код прямо под нашим начальный тег:

В этом коде нет ничего удивительного. Вы должны узнать формат создания списка из Урока 2 и формат создания ссылки из Урока 3, и, как мы узнали всего несколько минут назад, Элемент

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

Наш второй столбец

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

 

     
Образец заголовка
 

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


     
Чуть менее важный заголовок
 

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

Наш третий столбец

Далее, наш третий столбец будет почти идентичен первому; простой список ссылок:

Наш нижний колонтитул

Наконец, мы добавим нижний колонтитул.

 <дел>
    
Авторское право 2011 г. Изучение веб-кода

Маркировка наших элементов

Теперь мы собираемся пометить наши элементы

, назначив им определенные классы и идентификаторы , поэтому добавление стиля к нашей странице с помощью CSS быть быстрым и легким. Для этого мы будем использовать атрибуты и значения HTML (Урок 3: Атрибуты и значения).

Ярлык боковой колонки

Мы начнем с нашей первой колонки; наш стартовый тег

для первого столбца теперь будет выглядеть так:

Мы используем атрибут «id» и присваиваем ему значение «side-column». Это позволит нам добавить стиль к этому столбцу с помощью CSS на следующем уроке.

Метка основного столбца

Мы также отредактируем начальный тег для нашего второго

:

Метка другого бокового столбца

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

Не забудьте нижний колонтитул

Наконец, мы назовем нашу секцию нижнего колонтитула:

 

    
Авторское право 2011 г. Изучение веб-кода

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

 


    <голова>
        <мета-кодировка="utf-8">
        Мой первый макет
    

    <тело>
        <дел>
            <ул>
                
  • Пример первой ссылки
    • 
                
  • Пример второй ссылки
    • 
                
  • Пример третьей ссылки
    • 
                
  • Пример четвертой ссылки
    •
    <дел>

    Образец заголовка

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

    Чуть менее важный заголовок

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

    <дел> <ул>
  • Пример пятой ссылки
  • Пример шестой ссылки
  • Пример седьмой ссылки
  • Пример восьмой ссылки
    • <дел>

    Авторское право 2009 г.Изучите веб-код

    Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и изучите HTML, CSS и адаптивный дизайн на профессиональном уровне.

    Как писать HTML — Javatpoint

    следующий → ← предыдущая

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

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

    Шаг 1 — Откройте текстовый редактор для написания кода.

    Хотя есть различные текстовые редакторы, которые могут быть легко загружены новичком, лучшим текстовым редактором является Блокнот (в Windows) и TextEdit (в Mac). В Windows текстовый редактор по умолчанию — Notepad , а в Mac — TextEdit. В окнах мы можем открыть редактор Notepad , нажав кнопку «Пуск» и набрав блокнот, как показано на скриншоте ниже —

    Мы также можем использовать текстовый редактор Notepad++ в Windows для написания HTML-программ. Изучив основы, мы можем использовать другие профессиональные редакторы, такие как Notepad++, Sublime Text, Vim, и т. д.

    Шаг 2 — Теперь начните писать HTML-программы в текстовом редакторе. Теги HTML заключены в открытые теги (<>) и закрытые теги (). Предположим, нам нужно создать абзац, поэтому в HTML абзац создается путем ввода тега открытого абзаца

    , а затем ввода тега закрытого абзаца

    .

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

    Шаг 3: Сохраните файл либо с расширением .html , либо с расширением .htm , как показано на снимке экрана ниже.

    Шаг 4: Теперь вы можете выполнить свой файл .html. Для этого вам нужно перейти в место, где вы сохранили свой файл. Затем выберите соответствующий файл, щелкните его правой кнопкой мыши и выберите нужный веб-браузер для запуска файла. Это может быть ясно из следующего скриншота —

    После нажатия браузера отобразится веб-страница с выводом вашего файла.

    Теперь давайте посмотрим, как мы можем начать с HTML или как писать HTML-программы.

    Для любого документа HTML в основном мы можем начать документ с типа документа, то есть с тега , тега и тега . Мы должны закрыть теги по и теги. Запишется так —

    <тело>

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

    .

    <голова> <название

    В HTML есть различные теги для выполнения разных задач. В HTML есть шесть заголовков,

    ,

    ,

    ,

    ,
    и
     . Эти заголовки должны быть закрыты соответствующими закрывающими тегами.

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

    Мы можем создавать абзацы в HTML, используя тег

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