Notes
Notes - notes.io |
<ul id="navigation">
<li> <a class="navlink" href="/home.html"> home </a> </li>
</ul>
</div> <!-- end menu -->
The main navigation. Helpfully put into another containing div, called "menu". More on this later, too.
</div> <!-- end topbar -->
So many divs require numerous comments to keep track of your website. Not good, they increase bandwidth needed.
<div id="content">
Can sometimes be a useful way of separating the top info from the main content. But not really Laughing out loud
<div id="news">
<div class="headline"> News item 1 </div>
<div class="newsstory"> story here </div>
<div class="headline"> News item 2 </div>
<div class="newsstory"> story here </div>
</div> <!-- end news div -->
Classic Laughing out loud Any time you see a div or span with an ID or Class containing the word "head" you can guarantee it should be replaced with a heading tag.
</div> <!-- end content div -->
as above.
<div id="footer">
<div class="smalltext"> copyright &copy; 2005 some guy </div>
</div>
The footer div isn't so bad in itself, what's bad is the nested "smalltext" div inside.
</div> <!-- end container div-->
</body>
</html>
Now lets see if we can condense each bit down, shall we?
The container div
Usually a container div is used to "contain" the entire site. It is usually a fixed width (bad) and centred with margin: auto; and the text-align: center; hack (if you're supporting IE5 - which, let's face it, is pants Laughing out loud)
Now keep in mind the "container" tag will hold all of your HTML.
Hang on a minute, what's that tag before the "container"?
A <body> tag?
Yes, often overlooked is the humble <body> tag, which does exactly what your container div does - holds all your HTML.
Speaking of HTML, the <html> tag could also be used as a container. But let's stick with <body> for now.
The Header div
<div id="header">
<img src="/logo.jpg" width="400" height="150" />
</div> <!-- end header -->
Sigh, this is often where newbies to CSS go wrong - wrapping everything in a div and giving it an ID.
There are a whole list of XHTML tags that many people do not know exist over at the W3C - for example, the <acronym> tag, the <cite> citation tag, and even the <q> quotation tag.
The easiest way to remedy this problem is to think - "What is the point of this div?" It is to give a main headline, often including the logo. Because of this, and for the benefit of screen readers (as well as people with styles turned off) it is best to separate the presentation from the content and move the image to the CSS and the text to the HTML, like so:
<h1> Your Company Name</h1>
That's it. Honest, guv - that's all you need.
Want to make it bold? Why bother wrapping it in <b> tags when you can add this to the css:
h1 {font-weight: bold;}
(NB Headings are bold by default, this is just an example)
Want to add a logo? Simple! As headings (along with <p>s) are block-level by default, you can give them a width and height matching your logo, and set it as the background:
h1 {
background: #ccc url(yourlogo.jpg) no-repeat;
width: 762px;
height: 187px;
}
To remove the text, add the following: text-indent: -9999em; which will pull it off the page.
A note about text replacement
There are many methods for replacing text with images; a simple Google for "css image replacement" will bring up a plethora of links. Some are more accessible than others; there is the text-indent method, the <span> method, the AP method, heck even the flash image replacement method! This method comes recommended by our members as an alternative to the text-indent one.
The Navigation List
<div id="menu">
<ul id="navigation">
<li> <a class="navlink" href="/home.html"> home </a> </li>
</ul>
</div> <!-- end menu -->
Here we go again - wrapping everything in a div and naming it Tongue
ULs are, by default, block level elements - so are the LIs contained within. Because of this, like we did with the header, we can give the <ul> and each <li> if we want, a width and height - thereby eliminating the need for a containing div, "menu".
unless you have more than one list on the page, there is also no need to give it an ID - it can simply be targeted with the CSS code:
ul { }.
Note the class on the list item anchor? Often used to separate an anchor in a list to other anchors on the page, again it is unnecessary when you can target it with this:
ul li a {styles: here;}
Because of this, we can shrink our list down to this:
<ul>
<li> <a href="/home.html"> home </a> </li>
</ul>
If you have multiple lists on your page, give each one a meaningful id (for example, #mainlinks instead of #bluetextlinks or #rightcolumn_nav). Then you can target the list items with:
ul#mainlinks li { }
which reduces the need to give every link a class.
The Content Div
<div id="content">
<div id="news">
<div class="headline"> News item 1 </div>
<div class="newsstory"> story here </div>
<div class="headline"> News item 2 </div>
<div class="newsstory"> story here </div>
</div> <!-- end news div -->
</div> <!-- end content div -->
More divs!
The #content div can actually be useful, as it groups the content of the site and separates it from the other divisions - header, footer and other columns. Because of this, we're leaving it in.
The #news div is a similar case to the #content div - it separates the news articles from the other content, and can be used as a container if you use an RSS or XML feed for your news. In this case, it is up to you to decide whether it's really needed, or not.
<div class="headline"> News item 1 </div>
<div class="newsstory"> story here </div>
The sub-divs in the news division are another classic case of divitis. Remember what we learnt about the original
which contained the logo? This comes into play here. Remember about the <ul> not needing to be wrapped in a <div>? That comes in here as well.
This is where the phrases "structural markup" and "semantic html" come into discussion. The headline is a headline of an article, or, if you will, a sub-header of the main title. Can you see where this is going?
Use the <h> tags! Determine the level needed - <h1> should only be used once per page for the main title, <h2s> for sub headings, <h3> for sub-sub headings, and so on, up to <h6>. In this case I would suggest a <h3>.
Next is the news itself. Wrapped in a div? Why! It's a paragraph of text! Use the <p> tags!
The Footer Div
As with the content, and in some cases columns, a div can be useful here to group any footer content and separate it from the other divisions. So leave the #footer div in place. What isn't needed, is the span, and even less the class.
Remember how we targeted the list-items in the navbar section? That's what to use here.
#footer p {
styles here
}
Conclusion
I know this has been a long read for you, but hopefully you've learnt about divitis and how to cure yourself from it. A quick way to check if you're on the right track is to disable styles on your page. If it flows properly - a big main title of the site, lists of navigation items, smaller subheadings for sections, news - and makes sense, then you're doing fine.
Have fun!
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
