Technical Documentation [feedback appreciated]

Hello there again campers,

I would really appreciate if you could give me your feedback on my Technical Documentation and how I could improve my code.

https://codepen.io/fbclh/full/VgyMdG

nice work!

your use of <header> is incorrect. header is a semantic tag that is meant to replace div overuse. it should be used similar to how you are using the nav and main tags. think of a header as what exists at the top of a page which may contain nav or the sites main navigation. items that may exist in a header would be things like the sites logo. also, you should have only one header element on a page.

you can replace your first header tag with an h1 and the rest with h2's quite easily then replace one of your top divs with header where it makes sense.

(looking closer i’m not sure you even have a need for a header since there is no “header” on the page.)

i might also suggest moving your main tag to wrap around all of the content on the main page (minus the list on the left). but there is an argument to keep it where you have it.

Hello there and thank you, I am not sure what you mean! As I followed the instructions here: https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page

#3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.

And I also have looked at the code example here: https://codepen.io/freeCodeCamp/pen/NdrKKL

Now if you have any source that could point that the way we have been doing it is incorrect I would appreciate it. Because I just follow the instructions and I also did look at the example.

that’s very interesting.


https://www.w3.org/TR/html50/sections.html#the-header-element
https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html

i took that language to mean a heading but it does say header. i might argue this is incorrect usage according to accessibility and the specification.

<header> was introduced with a bunch of other semantic elements in HTML5 for accessibility reasons mostly as well creating better documentation markup.

edit: i suppose if you assume that each link could lead to a new page, as many technical documents do, this may make sense as each page would require its own header and content. its just strange seeing it outlined like this in a single document. there is nothing mechanically wrong with your design, however. just curious why freedcodecamp chose this path for this project.

1 Like