Как сделать правильную табуляцию в html?

Question

[Anna0802]

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

Comments

[VoidVolker]

Anna0802 https://qna.habr.com/help/rules#3.8, будьте любезны исправьте вопрос в соответствии с правилами.

[Ankhena]

Сделала дз, преподаватель придрался к табуляции, не отформатирован код.
Неужели всё настолько плохо?

Преподаватель неговорящий? У него нельзя спросить что именно не так, по его мнению?

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

Форматировала через prettier, он не исправил ничего, якобы всё хорошо.

Prettier не очень удобное средство для форматирования html.
Настраивайте editorconfig.

p.s. div main-block, наверное, должен быть тегом main.
При нормальном именовании секций нет смысла в комментариях. У вас вполне нормальное именование. Вы пишете sleep-tracker, какой смысл выше писать по-русски тоже самое?

[Anna0802]

Ankhena, кодгайд он не дал. Сказал, что код должен быть красивым и читабельным. Мой код выглядит аналогично его коду, как он показывал на лекции.
По поводу комментариев согласна, они лишние, там и так всё понятно. Но это тоже по его требованию выполнено. «Оставляйте четкие комментарии, чтобы я понимал, что и где находится»

[Ankhena]

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

Answer 1

[Виктор Кожухарь]

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

Исходя из этого можно заключить, что любые style guides, которых придерживаются программисты, - это просто соглашение, действующее в рамках какой-то одной организации либо сообщества. Вы устраиваетесь на работу и там вам дадут документ либо конфигурационный файл, в котором будут перечислены все правила, которых придерживаются в данной организации: 2, 4, 8 пробелов, символ табуляции, полное отсутствие пробелов между тегами. И вот этих правил надо придерживаться.

Таким образом, в вашей ситуации случилось одно из двух:

• преподаватель изначально дал вам список всех правил, но вы просто забыли об этом либо пропустили это занятие. Тогда преподаватель прав, и вам надо уточнить у него весь этот список правил и сказать, что больше так не будете.
  
• преподаватель не дал вам этот список, поэтому, если у вас во всём проекте одинаковое количество пробелов в отступах в HTML, то правы вы, и вы можете потребовать от преподавателя предоставить вам список правил, которые он требует, и вежливо пояснить ему, что он не прав, критикуя вас за выбор количества пробелов без предварительного предоставления подробных style guides.
  

Comments

[Anna0802]

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

[Виктор Кожухарь]

Anna0802, Поздравляю! Ваш преподаватель плохой.
Понятие "красиво" неприменимо, потому что у всех разные идеалы красоты.
Любой, самый плохонький программист знает, что между людьми идёт нескончаемая война о том, что лучше: табы или пробелы. И такая же война идёт между теми, кто использует разное количество пробелов для отступов. Но самое интересное, что все они правы, потому что у каждого своя "красота".
И единственное, что сдерживает команды разработчиков от бардака - это style guides.
А когда требуешь какую-то "красоту" от неопытного начинающего программиста, это совсем ни в какие ворота. Ведь начинающий не видел много кода в своей жизни, он толком не знает, что такое "красиво".
Хороший преподаватель должен на первых же занятиях рассказать пару баек про оформление кода, про важность того, чтобы все сотрудники использовали единые правила, и должен дать ученикам эти самые правила.

[Anna0802]

Виктор Кожухарь, он объясняет очень плохо. Скачет от темы к теме, занятие не структурировано. На вопросы отвечает не охотно, ссылается на презентацию, типа «читайте после лекции, там всё написано». Практики у нас нет на занятиях. Только домашние задания дает.
Поэтому приходится заниматься самообучением, потому что по лекциям вообще ничего не понятно и сумбурно

[Виктор Кожухарь]

Anna0802, Охх, удачи вам.
Я раньше думал, что ИИ заменит начинающих программистов. А вот ваш случай дал мне понять, что раньше он заменит плохих преподавателей. Вполне возможно, что он уже лучше)

[Anna0802]

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

[Виктор Кожухарь]

Anna0802, Это очень правильно. Код пишите только сами. Иначе не научитесь. ИИ просто использовать вместо Гугла.
Совет: когда будете учить CSS, нет ничего лучше, чем изучать чужую работу. Находите что-то прикольное в интернете, и смотрите, как они это сделали. Там просто масса идей, которым вас никто не научит

[Anna0802]

Коды да, сама люблю писать. Только так можно выучиться на своих ошибках.
А с css да, подглядываю в чужие оформления. Там много интересного и красивого.
Но у нас на изучение html и css только две недели. Со следующей недели уже js. А мы столько всего не освоили.
Стараюсь хоть что-то почерпнуть сама

Answer 2

[Nikita Komissarov]

Попробуй показать преподавателю примерно так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="features">
        <!-- блок с секциями -->
        <div id="main-block">
            <!-- секция с показателями кислорода -->
            <section class="oxygen-saturation">
                <img src="assets/services/heart.svg" alt="Сердце" width="45px">
                <h2>Измерение уровня кислорода в крови</h2>
                <p>Измеряйте уровень насыщения крови кислородом в любой момент прямо со своего запястья.</p>
            </section>
            <!-- секция с отслеживанием сна -->
            <section class="sleep-tracking">
                <img src="assets/services/clock.svg" alt="Часы" width="45px">
                <h2>Отслеживание сна</h2>
                <p>Настройте цель сна, время отхода ко сну и время пробуждения, а также отслеживайте свой прогресс.</p>
            </section>
            <!-- секция с обнаружением мытья рук -->
            <section class="hand-washing-detection">
                <img src="assets/services/wash.svg" alt="Мыло" width="45px">
                <h2>Обнаружение мытья рук</h2>
                <p>Часы автоматически обнаруживают, что вы начали мыть руки, и устанавливают таймер на 20 секунд.</p>
            </section>
        </div>
    </div>
</body>
</html>

Comments

[Anna0802]

Он ругается на большие отступы. Якобы такого быть не должно. Поэтому мне стало интересно, допустимы ли такие отступы или это всё же ошибка

[Nikita Komissarov]

В HTML и вообще в веб-разработке нет строгих стандартов на размер отступов. Обычно используются отступы в 2/4 пробела или табуляцию. Если препод ругается, используй 2 пробела. У Prettier есть настройка "Tab Width" (VSCode: @ext:esbenp.prettier-vscode tabWidth)

[Anna0802]

не знала даже, сейчас сделаю. спасибо большое за ответ!

[historydev]

Anna0802, идиот он, не слушай. Стандартный отступ = TAB = 4 пробела. Если он привык в своём vim отступать по пробелу или вовсе без них - это не объективная причина.

[Anna0802]

historydev, у него как раз 4 пробела, на лекциях сам же показывал. А на нас ругается

[historydev]

Anna0802, За те самые 4 пробела?
А. Вы потеряли деньги - если такое продолжится, смиритесь и уходите.
B. Это бесплатно - вам пора уходить.
C. Это платно и можно вернуть все деньги - берите и бегите.

Выберите вариант и избавьтесь от лишних проблем.

[Anna0802]

historydev, да дело в том, что я учусь на Python.
И слава богу, он у нас его не будет вести. Он нас по фронтэнду гоняет