Jump to content
Stef's Coding Community
TECKSPEED

<Div Id="header"> Vs <Div Id="wrapper">

Recommended Posts

Hi all, 

 

Recently joined this forum and let me tell you what a great place for information on Web Development topics.  First off I am relatively new to coding in CSS but not HTML.  I would like to know if there are certain benefits to using the header, body, and footer id's in div tags rather than using a wrapper within a div and then placing your divs inside of that 

 

For example:

<div id="wrapper">
     <div id="header">
        <div/>
        <div id="body">

As you can see above I placed a wrapper id around all of my other divs for certain formatting.  Are there advantages for doing it this way rather than using the header and body id itself as the styling tag?

 

Thanks in advance,

 

TECK 

 

 

Share this post


Link to post
Share on other sites

In general, you want to make your code as simple and as straightforward as possible, so make sure you're not adding in unnecessary elements.

 

From a styling perspective, it shouldn't really matter significantly. From a functionality perspective, you'll often see wrapper divs because a developer wanted to have one element that had a set width that would contain the entire site (often to center position it in the browser).

Share this post


Link to post
Share on other sites

Instead of using ids step up to html5.  For example instead of <div id="header"> use <header>.

 

Here are more html5 examples:

 

<article></article>

<nav></nav>

<aside></aside>

<section></section>

<header></header>

<footer></footer>

<address></address>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...