Member Avatar for lithium1976

Hello this is my first post here :)

I have designed my site layout completely from Divs and CSS style it.

I have scince realised that I should'nt have used just divs so I am trying to reduce the amount of divs on the page and use other html tags where possible but keep the original div apperance.

I have a few questions to ask -

  • Can I place a <h1>, <h2> etc inside a Div?
  • I understand I cannont place a <p> inside a <h1> or <h2>, is this correct?
  • I understand I cannot put a <ul> inside a <h1> or <h2>, is this correct?
  • I had a navigation div which housed an SSI CSS tab menu floated to the left, and a three item vertical list (ul li) floated to the right of the navigation div. I want to know if I can remove the navigation div and just use another <ul><li> as the navigation area? I cant put the SSI or vertical list in say a <h1>.
  • Finally, I can't place a Div, <ul>, <li> or <h1>etc inside a <p>, is this correct?

Tom

  • 3 Contributors
  • 4 Replies
  • 111 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A short, practical plan for reducing "divitis" while keeping the same look and avoiding layout breakage.

Replace purely structural divs with semantic HTML5 elements where they make sense: header, nav, main, section, article, aside, footer. That improves document structure, screen-reader navigation and future maintenance. Keep a plain div when there is no semantic match. As observed, divs are not inherently bad—use semantics to clarify intent, not just to remove wrappers.

If your navigation originally had a floated tab menu left and a vertical list on the right, the simplest semantic switch is a nav containing two uls and using Flexbox for layout. Example:

<nav class="site-nav">
  <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
  </ul>
  <ul class="side-items">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</nav>

.site-nav { display: flex; justify-content: space-between; align-items: flex-start; }
.site-nav .tabs { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav .side-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

Practical checklist before refactoring: 1) Inventory each div and pick a semantic tag or keep a div. 2) Replace wrappers one area at a time and update CSS selectors (tag names may change). 3) Prefer Flexbox/Grid over floats for predictable alignment; see MDN on Flexbox for examples. 4) Validate the page and test accessibility (W3C validator and assistive tech). 5) If you must support very old browsers, add ARIA roles (for example role="navigation") as a fallback.

For reference on semantics and layout primitives, see the MDN entry for nav (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav), the Flexbox guide (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), and the W3C validator (https://validator.w3.org/). and already touched on nesting rules and inline vs block differences; when in doubt consult the element docs on MDN to confirm permitted content.

Recommended Answers

All 4 Replies

Member Avatar for Fungus1487

Can I place a <h1>, <h2> etc inside a Div?

answer: yes

I understand I cannont place a <p> inside a <h1> or <h2>, is this correct?

answer: correct. it is not valid html4.01

I understand I cannot put a <ul> inside a <h1> or <h2>, is this correct?

answer:correct ^ as above

I had a navigation div which housed an SSI CSS tab menu floated to the left, and a three item vertical list (ul li) floated to the right of the navigation div. I want to know if I can remove the navigation div and just use another <ul><li> as the navigation area? I cant put the SSI or vertical list in say a <h1>

answer: you should be able to use ul to suit your needs.

Finally, I can't place a Div, <ul>, <li> or <h1>etc inside a <p>, is this correct?

answer: correct not valid html

divs are not that bad interms of coding practice. it simply depends whether they are positioned absolutely. as this is a bad coding practice

Member Avatar for lithium1976

Thankyofor your reply!

Tom :)

Member Avatar for Fungus1487

no trouble

Member Avatar for MidiMagic

The key fact is that you can't put a box object inside an inline object.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.