noiiyfdedvv on Show HN: magick.css – Minimalist CSS for Wizards

Comment on Show HN: magick.css – Minimalist CSS for Wizards

There’s a little typo in the simple example:

    <main>
      <header> </header>
      <section> </section>
      <section> </section>
      <section> </section>
      <footer> </footer>
    </header>

Note closing header not main.

fbdab103 2y

If we are going to add some notes...

I appreciate it if sites demoing their CSS embed the non-minimized version. I wanted to take a quick peek at what it looked like, but instead I have to go through a few additional hops to grab the source. Or at least just a clickable link directly to the unprocessed form.

qingcharles 2y

I use the <article> tag for the main content of the page, and then <section> for related but extra content, such as the comments section, tags, etc.

alberth 2y

Another thing, semantically - the HEADER and FOOTER should go before & after, respectively, the MAIN tag

noiiyfdedvv 2y

I was curious so I checked. According to MDN:

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

I think you can use a header more or less anywhere, and it is a header for content contained by its parent.

eddd-ddde 2y

I think it is more related to whether your header and footer are actually the main content of your page, which may vary from page to page.

noiiyfdedvv 2y

Good point. Apparently (MDN) there should only be 1 main on a page, and it should not include sidebars, generic headers/footers repeated on other pages, etc.

So, you might have a site-wide header, a main containing a content-specific header / content / footer, and then a site-wide footer.

Not sure how useful that would be, but interesting to me as a sometime web hacker.

Comments