Jump to content
  • 0

Про необязательные тэги и необязательность закрытия всех тэгов — беспардонное враньё?

swetlana

Asked by swetlana,

 Share

Question

swetlana Explorer

swetlana

Posted
Posted

Всегда ранее я предпочитала строгий синтаксис xhtml, считая вольный html с незакрытыми тэгами чем-то абсолютно недостойным.

Но в конце концов стало интересно: ведь как-то же люди и такой синтаксис используют, и всё работает, да и спецификациями одобрено.

Но однако что замечено:

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

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

если не закрывать <p> (или любой другой типа не требующий закрытия тэг), и за этим незакрытым элементом закрывается </section> или </aside>, то FF игнорирует эти закрывающие тэги, считая их продолжением содержимого <p>. В результате страницу перекашивает напрочь, хотя валидатор на неё продолжает радостно казать зелёным.

Значит всё чушь? Нельзя, получается, допускать такие вольности в реальных проектах?

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
arez Explorer

arez

Posted
Posted
Значит всё чушь? Нельзя, получается, допускать такие вольности в реальных проектах?

А зачем в реальных проектах допускать такие вольности? На мой взгляд пора бы уже забыть, закрывать тег или нет, есть много инструментов (DSL языков например) которые не заставляют верстальщика думать об этом.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
  • Author
Posted

да обычно-то и не думается.

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

Бездумное следование привычкам к застою ведёт. А так что-то новое (для себя) попробовать. А вдруг окажется интересно?

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

Опять же HTML5 - это еще не стандарт, так что с какой радости производители браузеров должны его поддерживать?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

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

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

Это проблема скриптов. IE вообще сурово обращается с тегами <body>. Видимо, без явного <body> что-то из того, что по уму должно быть в head, неявно проваливается в body, и приаттачить documentElement-у новый body (что, как я понял, пытается делать html5shiv) он уже не может (впрочем, это лишь предположение, детально не копал, буду благодарен за живой пример).

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

Судя по всему, наследие темных веков, когда все незнакомые теги считались аналогами <span>. В FF4 должно быть пофикшено, там, AFAIK, по дефолту HTML5-парсер. В вебкитных, по логике, тоже.

Опять же HTML5 - это еще не стандарт, так что с какой радости производители браузеров должны его поддерживать?

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

Тоже придерживаюсь такого же мнения.

Опять же HTML5 - это еще не стандарт, так что с какой радости производители браузеров должны его поддерживать?

А почему бы и нет? Если это никак не портит каши и при этом делает код логичнее и красивее?

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
А почему бы и нет? Если это никак не портит каши и при этом делает код логичнее и красивее?

Это я к тому, что нефиг удивляться: "Как же так, на W3C такая-то фича описана, а в Опере она не работает!"

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted

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

Да, при этом стоит придерживаться стандарта HTML 4.01, ну и в IE бывают проблемы без body (в некоторых случаях даже заранее предсказуемые, ну и заранее известно, как лечить, если очень надо :)

А по поводу конфликтов с новыми тегами HTML5 — так нужно дождаться HTML5-прарсеров.

И вообще, теги наподобие aside или section ничем не отличаются в лучшую сторону от <div class="aside"> и т. д. Так что увлечение ими выглядит странно, особенно при необходимости костылей для IE (пусть и минимальных).

Если субъективно — вижу красоту в минималистичности, а избыточность XML-подобных синтаксисов — фе…

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
  • Author
Posted
…буду благодарен за живой пример…

Живой пример был здесь. Но пофикшен.

Если интересно, могу сделать копию, но с упорством в ереси, то есть со строго незакрытыми <p> и без <body>

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Спасибо, если отличие только в этом — вечером сам повоспроизвожу. Хотя, если сильно не затруднит... ;)

Вообще, сходу могу назвать минимум одну ситуацию, когда возможность явно не закрывать <li> полезна — горизонтальные списки на инлайн-блоках, разом решается проблема мешающих пробелов (отпадает нужда бороться с ними нелогичными и ненадежными CSS-выкрутасами) и сохраняется читабельность исходника. Злоупотреблять, конечно, не стоит, но иметь в арсенале и такой прием — почему бы нет? :)

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
  • Author
Posted

Сделана копия.

Отсутствует <body> и строго не закрыты все <p>.

В вебкитах и опере всё нормально, в FF и IE наблюдаются вышеописанные проблемы.

SelenIT, я вот как раз об этом же: наверняка есть практическое применение нестрогого синтаксиса. И вот пример.

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Светлана, спасибо за пример! В FF4b, как я и предполагал, всё нормально. А вот в Опере 11 (WinXP) распепячило еще хлеще FF3.6 (правая колонка тоже провалилась под основную). В IE8, да, со скриптом траблы, но решаются грубым дописыванием к скрипту document.write('<body>'); :)

Насчет побочных эффектов — конкретно в случае с li, имхо, их быть не должно. Особенно с учетом того, что IE7- и так закрывающие </li>, </dt> и </dd> игнорирует. И в <option>-ы у <select>-ов, имхо, ничего постороннего заведомо не влезет, тоже можно экономить.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
  • Author
Posted

кстати, да. Действительно в Опере проблемы. Видимо это я уже после ФФ в Опере смотрела, вот и запомнила, будто там всё в порядке.

А для IE интересное решение. Костыль, но очень интересный. Чувствую, существуют в природе случаи, где это может оказаться полезным.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept