semmypurewal/LearningWebAppDev

main nav is not using a list

Closed this issue · 7 comments

anthonybrown commented

I think the nav should be:


      <nav>
        <ul>
          <li><a href='#'>home</a></li>
          <li><a href='#'>FAQ</a></li>
          <li><a href='#'>support</a></li>
        </ul>
      </nav>

Since it is a list

anthonybrown commented

not to mention all the missing stuff in the head for a minimal HTML5 document like <meta charset='utf-8'>

Just trying to be helpful

semmypurewal commented

Thanks for the feedback, Tony!

I'm not aware of any required children elements for the head except title. In fact, in the W3C spec, there's an example in the specification that looks like this:

<!doctype html>
<html>
 <head>
  <title>A document with a short head</title>
 </head>

You can read the spec (with that example) here: http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-head-element

In the second example, there is a meta element that specifies the character encoding, but it doesn't appear that it's required.

I also checked against the current form of the w3c's HTML5 validator (found here: http://validator.w3.org). It doesn't seem to require a meta tag in order to pass validation (although it does give a warning that it is recommended).

If that info is outdated, please let me know and I can update it for the first ebook update!

What are the other children elements that you're thinking of? I'd be glad to look into those as well.

semmypurewal commented

Thanks for the suggestion on making the nav a list! It makes sense, but wouldn't you need to wrap the li elements in a top-level list element first (like a ul)?

<nav>
  <ul>
    <li>...</li>
  </ul>
</nav>

I would say that's probably preferable to a series of a tags, but I chose not to do that in order to simplify the styling section in Chapter 3.

Do you think it's an egregious enough problem to warrant fixing in the second edition? Thanks!

anthonybrown commented

I was in a rush when I wrote this, I have updated the nav structure.
AFAIK the minimum HTML5 doctype is

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

It might not need the utf-8 meta tag but since you are teaching beginners why not teach best practices?, as far as the navigation structure, it is a list, therefore it should be contained in the<ul></ul> tag, again, I believe this to be a best practice and have really never seen a main navigation done without an un-ordered list

semmypurewal commented

In the case of the meta element in the head, I didn't see its omission as a particularly bad thing (since it's not required by the HTML5 spec).

That said, I didn't completely ignore the issue. Please see the note on page 37 where it says:

If you're interested, one of the warnings links to a brief
tutorial on character encoding that will show you how to
specify a character encoding in your HTML document.

I think an interested reader could easily follow that tutorial to learn about it in more detail without me adding a bunch of ancillary detail and unexplained code in the book. What do you think?

As far as the nav element goes, the spec doesn't require it to contain a list. It's explained in detail here: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

A nav element doesn't have to contain a list, it can contain other kinds of content as well.

That quote is followed by an example nav element that contains prose!

In our case, I decided that it was easier to not include the list since I didn't cover the difference between block and inline elements until later in Chapter 3.

Thank you for your feedback and I hope this helps! Please let me know if you have any other questions or comments.

anthonybrown commented

I'm sorry I have not had time to read the book in it's entirety, I'm sure you did a fine job. I love web development, I learn something new each day, sometimes they are the proverbial "Ah-ha" moments but mostly it's the little things. I am aware of the specs you linked to:link

In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

You left that part off of the quote, but like you said :

I think an interested reader could easily follow that tutorial to learn about it in more detail
without me adding a bunch of ancillary detail and unexplained code in the book

I have not had the time to read the book, I thought the book was targeted at a more intermediate audience, but I still want to read it. Thanks again for sharing your insight with the community

semmypurewal commented

My pleasure, and feel free to follow-up with any other comments or thoughts!

Thanks!