Using <div> ID tags (for CSS purposes) with nav, aside, footer tags, etc.

Question

Using <div> ID tags (for CSS purposes) with nav, aside, footer tags, etc.
------------------------------------------------------------------------------------------

Is it better to put the <div id> (or class) tags inside the <nav>, <aside>, <footer> and other common identifier tags? Or is better to put the the <div> tags inside the <nav> tags, etc?

Or is it better not to use the nav, aside, footer and similar tags at all, when using <div> tags for CSS purposes?

I'm a bit confused by this. Thanks in advance for any help you could provide, I appreciate it. :-)

Answer 1

Websites with proper semantic tags are good for ranking higher on search engine and better organisation of the contents

Here the website layout sample that utilities header, ariticle, aside and footer tags.
https://code.sololearn.com/W87tMtRyJ1j5/?ref=app

Answer 2

James,

I'm creating a website divided into sections in order to make it easier to style with CSS.

Under <div> tags I've called the sections 'Container' (the whole website in the centre of the screen which contains all the other content), 'Header', 'Menu', 'MainBody', 'Sidebar' (contains contact form & will eventually also contain social media icons later on) and the final one is "<div id="Footer">My name ©</div>".

But I've also added other tags to make it easier to see exactly which section is which when reading the HTML script. The <div id> tags above are just to make it easier to style on an external CSS style sheet. For example, in the "<div id="Menu>" tag I've also put a single <nav> tag inside it (because that's what it is, basically).
I've also put the "<div id="Sidebar">" tags inside a single "aside" tag, as that's the best category in which to put the contact form and social media icons. I've just used the "<div id="Sidebar">" tags for CSS purposes alone, to make it easier to style.

Answer 3

No problem, Janning. Before I post it, let me just say that this website has been constructed with the intention of learning HTML and CSS, not to create a full-fledged website. Thanks - here goes:

https://code.sololearn.com/WHyb2J7qS2RJ

Edit: I posted the text here before realising that you wanted it in Code Playground. Sorry to anyone who read this before I edited.

Answer 4

The way you are doing it seems good. I see no problems with mostly using divs. The layout is up to you, so whatever seems comfortable. I would just try to keep it consistent.

Answer 5

Having nav inside or outside the div gives the same result. You will find some differences in the CSS selectors though, like selecting "div nav" for a nav rested inside a div.

I don't know much about the function of nav, though. Whether it impacts other non-positioning uses, I don't know.

Answer 6

Hi Mathew McRae,

I have a much better grasp of what you're asking for now. Thanks for posting the code. (Cute disclaimer too. ☺)

I agree with James that there's nothing wrong with the way you're doing it. I try not to put only one div in any other div (regardless of whether or not they are semantic divs). The semantic divs are (supposedly) useful for SEO, so it would typically be okay just to go with nav and pretend it's unique (or specify with id/class if you have more than one nav). There are cases when you get into CSS more where you may want a div inside another div for specific layout issues (e.g. establishing a parent with relative positioning for a child with absolute positioning, etc.) but you'll figure it out when you get there.

Answer 7

No problem. Happy to help!

It seems like you already have a fairly thorough understanding of why you're doing what you're doing and you are extremely thoughtful and intentional. This is good. With that being said, take any advice I might give with a grain of salt. Use your own best judgment.

To your first point, yes, I understand having a reasonably narrow max-width to ease eye-strain and maximize readability and it makes sense for text-heavy sites (such as blogs or a repository for academic research papers). It is a very Wix approach. I also appreciate your conscientiousness around closing tags.

Having a container (or wrapper) div in body generally makes sense because quite often a developer will put JavaScript at the end of body and I prefer to keep those areas separated.

Also, your stylesheet link looks perfect.

I look forward to seeing the nifty things you'll do once you learn responsive design and @media in CSS. ☺

Keep up the good work! 👍

Answer 8

You've got a solid plan there, Mathew McRae! ☺ I don't see a need to change that plan. You'll probably pick up on some other interesting tools along the way too. Some of the things I didn't originally plan on learning but ended up finding nifty:
- Markdown
- GitHub/GitLab (& regular Git)
- YAML (as an alternative to JSON)
- SCSS (you can use LESS or SASS too as they are not that different from each other)
- jQuery (some find this to be a bit arcane)
- Bootstrap & Font Awesome
- Angular & React
- SQL (with a bias toward PostgreSQL)

Yeah, it's too tempting for me to look at other people's code, find something interesting, then go down deep rabbit holes tracking down what it is. 😋

I found that pairing w3schools with CSS Tricks provided a fairly solid foundation. Occasionally, I find that some of the techniques there are outdated, so my fallback is MDN web docs. If I run into something incredibly nuanced, I look up the specifications and documentation for the language, or rummage through StackOverflow.

Answer 9

Hi Mathew McRae,

Congratulation on walking again! I wish you a well-paced recovery and balanced physical therapy sessions. ☺

MDN Web Docs made a big push in 2016 to broaden its scope, but yeah, I was concerned too at first. ( https://hacks.mozilla.org/2018/01/introducing-the-mdn-product-advisory-board/ ) They have a browser compatibility section at the bottom of each article. Another good resource for checking compatibility is CanIUse ( https://caniuse.com/ ).

Languages come in all shapes and sizes, but the vast majority of this list consists of different tools. For example, Markdown is easy to pick up because it's intuitive and self-contained (and not what programmers call true programming). CSS preprocessors compile to CSS, so it's more like you're extending what you already knew in CSS. Git was the only thing on the list that is a whole 'nother technology. The rest are libraries (like premade stuff for when you've finally given up reinventing the wheel). No need to be overwhelmed at all. ☺👍

Answer 10

It depends on what you are using them for. They all have their own niche.

Answer 11

Hi Mathew McRae,

Can you put your code into Code Playground and link here so we can see what you're talking about?

Typically I try to think about functionality as a somewhat separate issue from readability. Readability can come in the form of good variable (or, in this case, id/class) naming and commenting (sometimes full lines or paragraphs). The BEM model is one of the simpler philosophies/approaches for this.

Once you start over-using id's, you also start losing specificity weapons in your arsenal to trump any cascading issues that come up.

But, again, I'm saying all this without having actually looked at your code.

Answer 12

Thanks James, you made me feel better about it all. There are so many options and it can sometimes be confusing as somebody who only started self-teaching HTML and CSS a few weeks ago.

Answer 13

I forgot to ask something. Regarding what you've seen, does it make any difference if I were to alternatively use the <nav> tags (as an example) inside the <div id="Menu"> tags instead of outside them? Assume I wanted to change it to reflect that, would there be any problems in your experience?

Answer 14

Thanks again, James. :-)

Answer 15

Thanks for taking the time to help me out here, Janning.

I've put the 'Container' div tag as a parent div to all the other div tags because I want the effect of an 800px website where the whole website is central to the screen. I always make sure that the tags are opened and closed correctly (& are related to each other correctly) before saving my work in Notepad++.

Would you therefore advise abandoning the 'Container' div tag and instead use the body tag when editing in the CSS stylesheet? I hope you know what I mean when I'm talking about a central website that's only 800px-wide? It's often the way that blogs or news websites are positioned - positioned centrally and not taking up the whole screen. I saw a YouTube video on somebody else's laptop that explains how to position the 'Container' div centrally and that's 800px-wide. But because I wasn't logged into my account, I've lost the video. But I like styling my HTML into div tags that are then used to organise my website into boxes for the purpose of styling with CSS.

I would really appreciate if you could answer me another question, in addition to that one? Can you tell me if the link between my HTML and CSS documents is correct? They are located in the same folder and therefore I've just stated the name of the CSS stylesheet:

<link rel="stylesheet" type="text/css" href="style.css" />

Thanks again.

Answer 16

Update: I've now updated my CSS so that my website is 800px-wide and is aligned centrally. Here's the link (although you can't see the effect as much on SoloLearn's Code Playground due to there being 1/2 screen):

https://code.sololearn.com/WHyb2J7qS2RJ

Answer 17

Thanks, Janning. :-)

After learning CSS I intend to start learning about Javascript, then PHP and then Python. Do you recommend substituting one of those for another? My goal is just to learn code in general so that I can create my own websites from scratch, apps, games, etc. There's no particular goal.

Can you also recommend another free self-teaching site for code, apart from SoloLearn? There's Khan Academy and W3Schools. Do you recommend one over another, or a source that I've not mentioned?

Don't worry though, I won't any more questions after this. I don't want to be demanding! :-)

Answer 18

Hi Janning,

Sorry for the delay in getting back to you. I've just started walking again after having a below-knee amputation (long story).

Thanks for providing that information for me. Can I just ask whether you think that MDN Web Docs would be just as helpful for somebody using Google Chrome instead of Firefox? I presume so but I'm not certain.

It's sound daunting when you mention all the languages that you didn't originally intend on learning. It must have taken you years to learn all the languages you know? I presume that it takes practice and repetition to learn so many different languages and not to feel overwhelmed.