Code review html, css

pytanie zadane 11 grudnia 2020 w HTML i CSS przez DominikPie Użytkownik (770 p.)

Cześć, proszę o codereview ze zwróceniem uwagi na to czy dobrze użyłem znaczników html(czasami mam z tym problem) link github: https://github.com/Vadgame/single-price-grid-component-master link do strony: https://single-price-grid-component-master-bjcatve8h.vercel.app/

1 odpowiedź

odpowiedź 11 grudnia 2020 przez niezalogowany

Znacznik <main> nie powinien zawierać znacznika <header>

Najpierw <header> potem <main> .

https://developer.mozilla.org/pl/docs/Web/HTML/Element/main

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

https://www.freecodecamp.org/news/semantic-html5-elements/

Tutaj masz linki które powinieneś zbadać i przeczytać skoro wiesz że masz z tym problem zajrzyj tam i wyeliminuj problem!!!

Dobrą praktyką jest odseparowanie <style> do osobnego pliku : "style.css" lub main.css" wedle uznania reszta wygląda Super jak na moje oko !

Pozdrawiam Serdecznie !

komentarz 11 grudnia 2020 przez DominikPie Użytkownik (770 p.)

Dziękuję za opinię i pomoc :)

komentarz 11 grudnia 2020 przez niezalogowany

Nie ma sprawy !

Pozdrawiam

komentarz 11 grudnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Znacznik <main> nie powinien zawierać znacznika <header>

@niezalogowany, a nie na odwrót?

https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element

https://www.w3.org/TR/html52/sections.html#ref-for-content-model%E2%91%A0%E2%91%A5

komentarz 11 grudnia 2020 przez DominikPie Użytkownik (770 p.)

Z tego co doczytałem(1 link Maria) i wiem to nie powinno się stosować ani headera wewnątrz maina ani maina wewnątrz headera.

komentarz 11 grudnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

MDN z parentów <header> wyklucza:

inny <header>
<footer>
<address>

Permitted parents Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.

Brak <main> w wykluczonych parentach. Jest natomiast wzmianka o byciu potomkiem <main>

Implicit ARIA role banner, or no corresponding role if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region

Specka HTML 5.2 wyklucza <main> z potomków <header>, ale (z tego co widzę) nie zabrania umieszczania <header> w <main>:

Content model:

Flow content, but with no main element descendants, or header, footer elements that are not descendants of sectioning content which is a descendant of the header.

Są też wzmianki o relacji <header> do <main>:

The header element represents introductory content for its nearest ancestor main element or sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

Z powyższego rozumiem, że <header> może być potomkiem <main>.

When a header element’s nearest ancestor sectioning root element is the body element, and it is not a descendant of the main element or a sectioning content element, then that header is scoped to the body element and represents introductory content for the page as a whole.

A tutaj rozumiem, że jest warunek, który mówi, że gdy <header>a najbliższym przodkiem będącym sekcyjnym elementem źródłowym jest <body> i nie jest on potomkiem <main> to <header> jest w zasięgu <body> i reprezentuje wprowadzającą treść dla całej strony.

W specce HTML Living Standard również nie widzę wzmianki o zakazie umieszczania <header> wewnątrz <main>. Jest natomiast zakaz umieszczania w nim <footer> i innego <header>:

Content model:

Flow content, but with no header or footer element descendants.

W specce HTML LS jest natomiast napisane, że przodkami <main> mogą być tylko: html, body, div, form. Potwierdza to specka HTML 5.2. Zatem <main> nie można umieścić wewnątrz <header>.

Więc, jeśli dobrze rozumiem, to <header> może być umieszczony wewnątrz <main>, ale <main> nie może być w <header>.

komentarz 11 grudnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

@niezalogowany,

Dobrą praktyką jest odseparowanie <style> do osobnego pliku : "style.css" lub main.css"

byłbym z tym ostrożny... wydaje mi się, że lepiej robić nazwy hashowane i być bezpiecznym ze wszelkimi cache przeglądarek itp. itd. jeśli zajdzie potrzeba zmiany tych plików. Osobiście unikam raczej produkcyjnie robienia takich "statycznych" nazw, od takich rzeczy są narzędzia, np. webpack.