SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Default html settings

    This post may get moved but I think it's relevant and goes along with the recent discussions we've all had about CSS Resets. Plus, I'm eager to know what you guys think on the matter because I've come to deeply respect your thoughts and opinions. I was reading the post recently made by Dan in the CSS Reset thread and it got me thinking?

    He Said
    The other thing is that a CSS reset is only as good as the HTML code that goes along with it.
    Thats true! And I'd like to better mine. As you can see, it's completely basic! Void of any meta tags or any of that good stuff. However, like I said, I'd like to improve upon mine and possibly add things such as meta tags and such. However, I have no idea really whats needed or what would be beneficial in regards to matters such as those.

    What originally got me thinking about this a few months ago was this thread made at KillerSites. However, the amount of meta tags seems a little over kill to me. But then again, I wouldn't really know one way or the other. So... I was hoping to get your guys thoughts on the matter. What do you use, and what do you think is beneficial to your html template, search engines, load time, etc... etc...? Thanks for your thoughts!
    Last edited by PicnicTutorials; Aug 23, 2008 at 14:20.

  2. #2
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer to use microformats in the body of my document to add semantics and meta data. I keep the head of my document as empty as possible. I use only the elements required to validate the document and declare the character encoding.

    Data in the head of my documents is invisible and often gets forgotten. I forget to update the info when my pages change. It's also a pain to update all those elements in the document head if I make a significant change. It's much easier and more practical for me to put all that semantic richness right in the body where everyone can see it.

    Search engines also like visible data. They assume you're telling the truth if you're showing it to your users rather than hiding it in the head.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hey Chris

    Quote Originally Posted by c.t.c. View Post
    I prefer to use microformats in the body of my document to add semantics and meta data. I keep the head of my document as empty as possible. I use only the elements required to validate the document and declare the character encoding.
    What are microformats?

    Data in the head of my documents is invisible and often gets forgotten. I forget to update the info when my pages change. It's also a pain to update all those elements in the document head if I make a significant change. It's much easier and more practical for me to put all that semantic richness right in the body where everyone can see it.
    Are you talking about meta tags? I so, why do they need to be updated?

    Search engines also like visible data. They assume you're telling the truth if you're showing it to your users rather than hiding it in the head.
    Ya so far thats all I've been doing. Quality Content - content - content!

  4. #4
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Eric,

    Microformats use HTML elements and attributes to add extra semantics to your documents--more than HTML alone can provide. Once you've marked up your document with microformats, certain data (such as contact information or calendar events) become both human and machine readable. Parsers can extract data and display it or use it separate from your website.

    For example, if you have your contact info on a web page, you can mark it up using the hcard microformat. Then you can provide a link to a microformat parser that will automatically convert your contact info into a vcard for your users. They can click a link and automatically add your info to their address book.

    There are many different microformats, each for marking up different kinds of data. I've found that any type of data I would want to include in the head of a document (keywords, copyright, geographic location) can all be represented in the body of your document instead and marked up with microformats. This way, the content is visible to anyone that views the page and extractable by anyone that can parse the page.

    Microformats are very cool. I'd check out the microformats home page, the wikipedia entry, and the Operator extension to Firefox.

  5. #5
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    Are you talking about meta tags? I so, why do they need to be updated?
    I forgot to answer this. Over the lifetime of a website, some of the info you've embedded in the head is likely to change. If the content of your page changes, you'll need to update the keywords and description. If the site maintainer changes, you'll need to update your author. If the website changes ownership, you'll need to update copyright info.

    Most of the time, when this type of information changes, the meta elements in the document head to not get updated. Also many people flat out lie when putting meta data in the header.

    If you put this information in the body of your web page, rather than the head, the meta information is visible to your users. In this case, you are much more likely to update something that has changed, and you are not as likely to lie since you're users will see the lie. Microformats allow you to properly mark up this data in the body of your document so that search engines and 3rd party parsers know what the data are.
    Last edited by c.t.c.; Aug 24, 2008 at 15:00. Reason: Fixed grammatical error.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just follow the normal source code order - header, menu(s), content, sidebar(s), footer.

    I put an image to handle the logo inside the header, the menu comes afterword, followed by the content and sidebar(s), and finally the footer.

    As for the <head></head> section, I DO use the META tags - especially the META description; used properly it can help improve your search engine conversions when people are reading the description of your site's page (or your site if it's the home page) to determine if the site really will meet their needs before they "click that link".

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I just follow the normal source code order - header, menu(s), content, sidebar(s), footer.
    I object to the notion that this is the 'normal' source order!
    Birnam wood is come to Dunsinane

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know what I mean, boss.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for all the info. Tommy, Dan, anybody, do you guys mind showing me an example of your meta tags that you regularly use? Or a couple links of some sites you've done that would give a good example of what I'm looking for. Sorry, like I stated above, I don't know much about the html. Thanks for any guidance.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My templates have them. One of them is at http://www.dan-schulz.com/temp/4columnlayout/

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only meta tag I normally use is 'description' (and the Content-Type HTTP equivalent).
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Alright! Thanks guys - I appreciate the info. Have a good one!

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I object to the notion that this is the 'normal' source order!
    I am playing around with naming conventions. Here is something I threw together quickly:

    I just feel that wrapper and all these other presentational names need to go. I can actually say I'm looking forward to microformats popularity to flourish. Also, content needs to be described semantically rather than tagged with a presentational names.

    Code:
    <div id="page-content">
    	<div id="header">
    		<a id="branding" href="/" title="Bobs Garden"><img src="logo.gif" alt="Bobs Garden :-d" width="200" height="230" /></a>
    		
    		<ul id="skip-navigation">
    			<li><a href="#main-content">Main Content</a></li>
    			<li><a href="#related-content">Related Content</a></li>
    			<li><a href="#footer">Footer</a></li>
    		</ul>
    		
    		<form id="search-site">
    			<fieldset>
    				<legend>Search Site</legend>
    				<!-- inputs here -->
    			</fieldset>
    		</form>
    		
    		<ul id="main-navigation">
    			<li><a href="/home.html">Home</a></li>
    			<li><a href="/news.html">News</a></li>
    			<li><a href="/about.html">About</a></li>
    			<li><a href="/contact.html">Contact</a></li>
    		</ul>
    		
    	</div>
    	
    	<ul id="secondary-navigation">
    		<li><a href="/location.html">Location</a></li>
    		<li><a href="/company.html">Company</a></li>
    		<li><a href="/interests.html">Interests</a></li>
    		<li><a href="/find.html">Find me</a></li>
    	</ul>
    	
    	<div id="main-content">
    		<h1>About</h1>
    		<p>.....</p>
    	</div>
    	
    	<div id="related-content">
    		<h3>Other Places</h3>
    		<p>.....</p>
    	</div>
    	
    	<div id="footer">
    		<p>.....</p>
    	</div>
    </div>

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't consider the menu to be part of the header; the way you have that code written it ties the menu with the header, which means you'll have to rewrite it when it comes time to redesign.

    Instead, why not use the header for what it's meant to be used for - a container for the logo/masthead? Everything else can be slid into position using floats and negative margins, and in extreme circumstances, relative positioning as well.

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I don't consider the menu to be part of the header; the way you have that code written it ties the menu with the header, which means you'll have to rewrite it when it comes time to redesign.

    Instead, why not use the header for what it's meant to be used for - a container for the logo/masthead? Everything else can be slid into position using floats and negative margins, and in extreme circumstances, relative positioning as well.
    What's your opinion on using wrapper and other presentational names?

  16. #16
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I have seen others wrap the header tag around as I have. Here is an example off mind. http://www.simplebits.com/

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan - I do see how you could argue your point though
    I can see a few mistakes in this:
    page-index - needs a name that is describing it's data
    main/secondary-navigation placement - which one comes first is up in the air...

    Tommy is this a bad approach or am I going somewhere with this example. I usually don't set up pages like this but am tired of using wrapper and other naming conventions.

    Code:
    <div id="page-content">
    	
    	<div id="page-index">
    		<div id="header"><a href="/" title="Bobs Garden"><img src="logo.gif" alt="Bobs Garden :-d" width="200" height="230" /></a></div>	
    		
    		<ul id="skip-navigation">
    			<li><a href="#main">Main Content</a></li>
    			<li><a href="#secondary-navigation">Secondary Navigation</a></li>
    			<li><a href="#related">Related Content</a></li>
    			<li><a href="#footer">Footer</a></li>
    		</ul>
    			
                   <ul id="main-navigation">
    			<li><a href="/home.html">Home</a></li>
    			<li><a href="/news.html">News</a></li>
    			<li><a href="/about.html">About</a></li>
    			<li><a href="/contact.html">Contact</a></li>
    		</ul>
    
    		<form id="search-site">
    			<fieldset>
    				<legend>Search Site</legend>
    				<!-- inputs here -->
    			</fieldset>
    		</form>
    	</div>
    	
    	<div id="content">
    		<div id="main">
    			<h1>About</h1>
    			<p>.....</p>
    		</div>
    		
    		<ul id="secondary-navigation">
    			<li><a href="/location.html">Location</a></li>
    			<li><a href="/company.html">Company</a></li>
    			<li><a href="/interests.html">Interests</a></li>
    			<li><a href="/find.html">Find me</a></li>
    		</ul>
    		
    		<div id="related">
    			<h3>Other Places</h3>
    			<p>.....</p>
    		</div>
    	</div>
    	
    	<div id="footer">
    		<p>.....</p>
    	</div>
    </div>

  18. #18
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Tommy is this a bad approach or am I going somewhere with this example.
    No, it's not a bad approach at all. I personally prefer to have the navigation after the content, but it seems to be a 50/50 split on that question so you and I will probably annoy the same number of people.

    It looks like you use a few more DIVs than necessary, but I guess you'll need them for styling purposes. Your IDs are well named, in my opinion.
    Birnam wood is come to Dunsinane

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As for presentational non-semantic DIVs, I limit myself to two - #container and .wrapper, except when dealing with fieldsets and legends (the other exception being when I use an image substitution technique). You can see them here:

    HTML Code:
    <body>
    	<div id="container">
    		<div id="header">
    			<img src="#" width="200" height="80" alt="Web Site TItle" title="">
    		</div>
    		<form action="#" id="search-form" method="get">
    			<div class="fieldset">
    				<fieldset>
    					<legend><span>Search This Site</span></legend>
    					<label for="search">Enter Your Search Term Here</label>
    					<input id="search" name="search" size="25" type="text">
    					<input class="submit" type="submit" value="Search">
    				</fieldset>
    			</div>
    		</form>
    		<ul id="menu">
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    		</ul>
    		<div id="content">
    			<div class="wrapper">
    				<h1>Web Page Title</h1>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    					Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    					cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    					ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    					facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    					fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    					bibendum, est.
    				</p>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    					Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    					cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    					ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    					facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    					fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    					bibendum, est.
    				</p>
    			</div>
    		</div>
    		<div id="sidebar">
    			<p>(Sidebar Goes Here)</p>
    		</div>
    		<div id="footer">
    			<em>&#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
    		</div>
    	</div>
    </body>

  20. #20
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem here with HTML templates is that no two websites are usually the same, and before you've even written any HTML you're already thinking about the presentational aspects (divs for headers, sidebars etc) when in reality you should try working from the content out.

    Markup your content with as meaningful and semantic HTML as possible and then begin adding divisions and 'hooks' for your css afterwards and only when necessary. You'll find this a much more productive way of working.

    The most I have in the way of a template is the DOCTYPE, and header section as that is almost always the same apart from minor changes.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The only meta tag I normally use is 'description' (and the Content-Type HTTP equivalent).
    I do this as well, except for fun many of my pages have "content generator" (a completely useless tag that tells people what you wrote the page in, if they cared) and occasionally "author" (again, nobody really gives a rat's about who wrote the html, so it's just for fun). Some of my pages are forced to have keywords tags for Yahoo or whoever but I add them under protest.

    I don't use microformats (yet) because their tags aren't suitable for the kind of information we use, and nobody we know can read them yet (still waiting for real estate and insurance versions). They are great for bloggitty blog-blog-blogs who are read by people who actually use PDAs and calendar software and address books-- I don't own or use any of that technology so I'm always behind on what they do and how they work. My calendars and address books are all paper : )

  22. #22
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SimonAKQA: You are quite right, but most sites do contain a certain set of logical components (header, main content, sidebar, navigation, search form, footer). With a bit of experience with HTML/CSS web design you know that some things very likely need to be grouped together to facilitate styling.

    Having said that, I don't use a template myself, but I see nothing wrong with doing so (as long as you're not using it too rigidly).
    Birnam wood is come to Dunsinane

  23. #23
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And it's with what Tommy said in mind that I develop the sites I work with. Yes, visually they may be as different as night and day, but underneath they still share the same base skeleton, just like we do.

  24. #24
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    No, it's not a bad approach at all. I personally prefer to have the navigation after the content, but it seems to be a 50/50 split on that question so you and I will probably annoy the same number of people.

    It looks like you use a few more DIVs than necessary, but I guess you'll need them for styling purposes. Your IDs are well named, in my opinion.
    Yeah - The extra markup is basically for styling purposes. I find that adding a little extra markup basically to establish a clearfix method saves layout issues when my work reaches the back-end. I have seen so many issues with float to float clearing and setting overflow auto/hidden.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •