HTML

30 HT ML Best Practices for Beginners - Nettuts+
http://net.tutsplus.com/tutorials/html-css-technique...
30HTMLBestPracticesforBeginners
May 14th in HT ML & CSS by Jeffrey Way
T he most difficu lt aspect of ru nning Nettu ts+ is accou nt ing for so many different skill levels. If we post too many advanced tu torials, ou r beginner au dience won't benefit. T he same holds tru e for the opposite. We do ou r best, bu t always feel free to pipe in if you feel you 're being neglect ed. T his site is for you , so speak u p! With that said, today's t u torial is specifically for those who are ju st diving into web development. If you 've one year of experience or less, hopefu lly some of the tips listed here will help you to become better, qu icker! Withou t fu rther ado, let's review thirt y best practices to observe when creating you r marku p.
1:AlwaysCloseYourTags
Back in the day, it wasn't u ncommon to see things like this: view plaincopy to clipboardprint? 1. <li>Some text here. 2. <li>Some new text here. 3. <li>You get the idea. Notice how the wrapping UL/OL tag was omitted. Additionally, many chose t o leave off the closing LI tags as well. By today's standards, this is simply bad practice and shou ld be 100% avoided. Always, always close you r tags. Otherwise, you 'll encou nter validation and glitch issu es at every tu rn.
Better
view plaincopy to clipboardprint? 1. <ul> 2. <li>Some text here. </li> 3. <li>Some new text here. </li> 4. <li>You get the idea. </li> 5. </ul>
2:DeclaretheCorrectDocType
When I was you nger, I participated qu ite a bit in CSS foru ms. Whenever a u ser had an issu e, before we wou ld look at their situ ation, they HAD to perform two things first: 1. Validate the CSS file. Fix any necessary errors. 2. Add a doctype. "T he DOCT YPE goes before the opening html tag at the top of the page and t ells the browser whether the page contains HT ML, XHT ML, or a mix of both, so that it can correctly interpret the marku p." Most of u s choose between fou r different doctypes when creating new websites. 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/s trict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans itional//EN" "http://www.w3.org/TR/html4 /loos e.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans itional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1trans itional.dtd"> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1s trict.dtd">
1 of 12
07/03/2009 09:58 AM
T here's a big debat e cu rrently going on abou t the correct choice here. At one point, it was considered to be best practice to u se the XHT ML Strict version. However, after some research, it was realized that most browsers revert back to regu lar HT ML when interpretting it. For that reason, many have chosen to u se HT ML 4.01 Strict instead. T he bottom line is that any of these will keep you in check. Do some research and make u p you r own mind.
3:NeverUseInlineStyles
When you 're hard at work on you r marku p, sometimes it can be tempting to take the easy rou t e and sneak in a bit of styling. view plaincopy to clipboardprint? 1. <p style="color: red;">I'm going to make t his text red so that it really stands ou t and makes people take notice! </p> Su re -- it looks harmless enou gh. However, this points to an error in you r coding practices. When creating your markup, don't even think about the s tyling yet. You only begin adding s tyles once the page has been completely coded. It's like crossing the streams in Ghost bu sters. It's ju st not a good idea. -Chris Coyier (in reference to something completely unrelated.) Instead, finish you r marku p, and then reference that P tag from you r external stylesheet.
Better
view plaincopy to clipboardprint? 1. #someElement > p { 2. color: red; 3. }
4:PlaceallExternalCSSFilesWithintheHeadTag
T echnically, you can place stylesheets anywhere you like. However, the HT ML specification recommends that they be placed within the docu ment HEAD tag. T he primary benefit is that you r pages will seemingly load faster. While researching performance at Yahoo!, we discovered t hat moving stylesheets to the docu ment HEAD makes pages appear to be loading faster. T his is becau se pu tting stylesheets in the HEAD allows the page to render progressively. - ySlow Team view plaincopy to clipboardprint? 1. 2. 3. 4. 5. <head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
5:ConsiderPlacingJavascriptFilesattheBottom
Remember -- the primary goal is to make the page load as qu ickly as possible for the u ser. When loading a script, the browser can't cont inu e on u ntil the entire file has been loaded. T hu s, the u ser will have to wait longer before noticing any progress. If you have JS files whose only pu rpose is to add fu nctionality -- for example, after a bu tton is clicked -- go ahead and place those files at the bottom, ju st before the closing body tag. T his is absolu tely a best practice.
Better
view plaincopy to clipboardprint? 1. <p>And now you know my favorite kinds of corn. </p>
2 of 12
07/03/2009 09:58 AM

2. 3. 4. 5.
<s cript type="text/javascript" src="path/to/file.js"></s cript> <s cript type="text/javascript" src="path/to/anotherFile.js"></s cript> </body> </html>
6:NeverUseInlineJavascript.It'snot1996!
Another common practice years ago was to place JS commands directly within tags. T his was very common with simple image galleries. Essentially, a "onclick" attribu te was appended to the tag. T he valu e wou ld then be equ al to some JS procedu re. Needless to say, you shou ld never, ever do this. Instead, transfer this code to an external JS file and u se "addEventListener/attachEvent" to "listen" for you r desired event. Or, if u sing a framework like jQu ery, ju st u se the "click" method. view plaincopy to clipboardprint? 1. $('a#moreCornInfoLink').click(fu nction() { 2. alert('Want to learn more abou t corn? '); 3. });
7:ValidateContinuously
I recently blogged abou t how the idea of validation has been completely misconstru ed by those who don't complet ely u nderstand its pu rpose. As I mention in the article, "validation s hould work for you, not agains t." However, especially when first getting started, I highly recommend that you download the Web Developer T oolbar and u se the "Validate HT ML" and "Validate CSS" options continu ou sly. While CSS is a somewhat easy to langu age to learn, it can also make you tear you r hair ou t. As you 'll find, many times, it's you r shabby marku p that's cau sing that strange whitespace issu e on the page. Validate, validate, validate.
8:DownloadFirebug
I can't recommend this one enou gh. Firebu g is, withou t dou bt, the best plu gin you 'll ever u se when creating websites. Not only does it provide incredible Javascript debu gging, bu t you 'll also learn how to pinpoint which elements are inherit ing that extra padding that you were u naware of. Download it!
9:UseFirebug!
3 of 12 07/03/2009 09:58 AM
From my experiences, many u sers only take advantage of abou t 20% of Firebu g's capabilities. You 're tru ly doing you rself a disservice. T ake a cou ple hou rs and scou r the web for every worthy tu torial you can find on the su bject.
Resources
Overview of Firebu g Debu g Javascript With Firebu g - video tu torial
10:KeepYourTagNamesLowercase
T echnically, you can get away with capitalizing you r tag names. view plaincopy to clipboardprint? 1. <DIV> 2. <P>Here's an interesting fact abou t corn. </P> 3. </DIV> Having said that, please don't. It serves no pu rpose and hu rts my eyes -- not to mention the fact that it reminds me of Microsoft Word's html fu nction!
Better
view plaincopy to clipboardprint? 1. <div> 2. <p>Here's an interesting fact abou t corn. </p> 3. </div>
11:UseH1-H6Tags
Admittedly, this is something I tend t o slack on. It's best practice to u se all six of these tags. If I'm honest, I u su ally only implement the top fou r; bu t I'm working on it! :) For semantic and SEO reasons, force you rself to replace that P t ag with an H6 when appropriate. view plaincopy to clipboardprint? 1. <h1>T his is a really important corn fact! </h1> 2. <h6>Small, bu t still significant corn fact goes here. </h6>
12:IfBuildingaBlog,SavetheH1fortheArticleTitle
4 of 12
07/03/2009 09:58 AM
Ju st this morning, on T witter, I asked ou r followers whether they felt it was smartest to place the H1 tag as the logo, or to instead u se it as the article's title. Arou nd 80% of the ret u rned tweets were in favor of the latt er method. As with anything, determine what's best for you r own website. However, if bu ilding a blog, I'd recommend that you save you r H1 tags for you r article title. For SEO pu rposes, this is a better practice - in my opinion.
13:DownloadySlow
Especially in the last few years, the Yahoo team has been doing some really great work in ou r field. Not too long ago, they released an extension for Firebu g called ySlow. When activated, it will analyze the given website and ret u rn a "report card" of sorts which details the areas where you r site needs improvement. It can be a bit harsh, bu t it 's all for the greater good. I highly recommend it.
14:WrapNavigationwithanUnorderedList
Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so: view plaincopy to clipboardprint? 1. <div id="nav"> 2. <a href="#">Home </a> 3. <a href="#">Abou t </a> 4. <a href="#">Contact </a> 5. </div> I'd encou rage you not to u se this met hod, for semantic reasons. You r job is to write the best possible code that you 're capable of. Why wou ld we style a list of navigation links with anything other than an u nordered LIST ? T he UL tag is meant to contain a list of items.
Better
view plaincopy to clipboardprint? 1. <ul id="nav"> 2. <li><a href="#">Home</a></li>
5 of 12
07/03/2009 09:58 AM

3. <li><a href="#">Abou t</a></li> 4. <li><a href="#">Contact</a></li> 5. </ul>
15:LearnHowtoTargetIE
You 'll u ndou btedly find you rself screaming at IE du ring some point or another. It's actu ally become a bonding experience for the commu nity. When I read on T witter how one of my bu ddies is battling the forces of IE, I ju st smile and think, "I know how you feel, pal." T he first step, once you 've completed you r primary CSS file, is to create a u niqu e "ie.css" file. You can then reference it only for IE by u sing the following code. view plaincopy to clipboardprint? 1.  T his code says, "If the u ser's browser is Internet Explorer 6 or lower, import this stylesheet. Otherwise, do nothing." If you need to compensat e for IE7 as well, simply replace "lt" with "lte" (less than or equ al to).
16:ChooseaGreatCodeEditor
Whether you 're on Windows or a Mac, there are plenty of fantastic code editors that will work wonderfu lly for you . Personally, I have a Mac and PC side-by-side that I u se throu ghou t my day. As a resu lt, I've developed a pretty good knowledge of what 's available. Here are my top choices/recommendations in order:
MacLovers
Coda Es pres s o TextMate Aptana DreamWeaver CS4
PCLovers
InType E-Text Editor Notepad++ Aptana Dreamweaver CS4
17:OncetheWebsiteisComplete,Compress!
6 of 12
07/03/2009 09:58 AM
By zipping you r CSS and Javascript files, you can redu ce the size of each file by a su bstantial 25% or so. Please don't bother doing this while still in development. However, once the site is, more-or-less, complete, u tilize a few online compression programs to save you rself some bandwidth.
JavascriptCompressionServices
Javascript Compressor JS Compressor
CSSCompressionServices
CSS Optimiser CSS Compressor Clean CSS
18:Cut,Cut,Cut
Looking back on my first website, I mu st have had a SEVERE case of divitis. Your natural ins tinct is to s afely wrap each paragraph with a div, and then wrap it with one more div for good meas ure. As you 'll qu ickly learn, this is highly inefficient. Once you 've completed you r marku p, go over it two more times and find ways to redu ce the nu mber of elements on the page. Does that UL really need its own wrapping div? I think not. Ju st as the key to writing is to "cu t, cu t, cu t," the same holds tru e for you r marku p.
19:AllImagesRequire"Alt"Attributes
It's easy to ignore the necessity for alt attribu tes within image tags. Nevertheless, it's very important, for accessibility and validation reasons, that you take an extra moment to fill t hese sections in.
Bad
view plaincopy to clipboardprint?
7 of 12
07/03/2009 09:58 AM

1. <IMG SRC="cornImage.jpg" />
Better
view plaincopy to clipboardprint? 1. <img src="cornImage.jpg" alt="A corn field I visited." />
20:StayupLate
I highly dou bt that I'm the only one who, at one point while learning, looked u p and realized that I was in a pitch-dark room well into the early, early morning. If you 've fou nd you rself in a similar situ at ion, rest assu red that you 've chosen the right field. T he amazing "AHHA" moments, at least for me, always occu r late at night. T his was the case when I first began to u nderstand exactly what Javascript closu res were. It's a great feeling that you need to experience, if you haven't already.
21:ViewSource
view sou rce What better way to learn HT ML than to copy you r heroes? Initially, we're all copiers! T hen slowly, you begin to develop you r own styles/methods. So visit the websites of those you respect. How did they code this and that section? Learn and copy from them. We all did it, and you shou ld too. (Don't steal the design; ju st learn from the coding style.) Notice any cool Javascript effects that you 'd like to learn? It's likely that he's u sing a plu gin to accomplish the effect. View the sou rce and search the HEAD tag for the name of the script. T hen Google it and implement it into you r own sit e! Yay.
22:StyleALLElements
T his best practice is especially tru e when designing for clients. Ju st becau se you haven't u se a blockqu ote doesn't mean that the client won't. Never u se ordered lists? T hat doesn't mean he won't! Do you rself a service and create a special page specifically to show off the styling of every element: u l, ol, p, h1-h6, blockqu otes, etc.
23:UseTwitter
Lately, I can't tu rn on the T V withou t hearing a reference to T witter; it's really become rather obnoxiou s. I don't have a desire to listen to Larry King advertise his T witter accou nt - which we all know he doesn't manu ally u pdate. Yay for assistants! Also, how many moms signed u p for accou nts after Oprah's approval? We can only long for the day when it was jus t a few of us who were aware of the s ervice and its "water cooler" potential. Initially, the idea behind T witter was to post "what you were doing." T hou gh t his still holds tru e to a small extent, it's become mu ch more of a networking t ool in ou r indu stry. If a web dev writer that I admire post s a link to an article he fou nd interesting, you better believe that I'm going to check it ou t as well - and you shou ld too! T his is the reason why sit es like Digg are qu ickly becoming more and more nervou s.
If you ju st signed u p, don't forget to follow u s: NET T UT S.
8 of 12
07/03/2009 09:58 AM
24:LearnPhotoshop
A recent comment er on Nettu ts+ att acked u s for posting a few recommendations from Psdtu t s+. He argu ed that Photoshop tu torials have no bu siness on a web development blog. I'm not su re abou t him, bu t Photoshop is open pretty mu ch 24/7 on my compu ter. In fact, Photoshop may very well become the more important tool you have. Once you 've learned HT ML and CSS, I wou ld personally recommend that you then learn as many Phot oshop techniqu es as possible. 1. 2. 3. 4. Visit the Videos section at Psdtu ts+ Fork over $25 to sign u p for a one-month membership to Lynda.com. Watch every video you can find. Enjoy the "You Su ck at Photoshop" series. T ake a few hou rs t o memorize as many PS keyboard shortcu ts as you can.
25:LearnEachHTMLTag
T here are literally dozens of HT ML tags that you won't come across every day. Nevertheless, t hat doesn't mean you shou ldn't learn them! Are you familiar with the "abbr" tag? What abou t "cite"? T hese two alone deserve a spot in you r tool-chest. Learn all of them! By the way, in case you 're u nfamiliar with the two listed above: abbr does pretty mu ch what you 'd expect. It refers to an abbreviation. "Blvd" cou ld be wrapped in a <abbr> tag becau se it's an abbreviation for "bou levard". cite is u sed to reference the title of some work. For example, if you reference t his article on you r own blog, you cou ld pu t "30 HT ML Best Practices for Beginners" within a <cite> tag. Note that it shou ldn't be u sed to reference the au thor of a qu ote. T his is a common misconception.
26:ParticipateintheCommunity
Ju st as sites like ou rs contribu tes greatly to fu rther a web developer's knowledge, you shou ld t oo! Finally figu red ou t how to float you r elements correctly? Make a blog posting to teach others how. T here will always be those with less experience than you . Not only will you be contribu ting to the commu nity, bu t you 'll also teach you rself. Ever notice how you don't tru ly u nderstand something u ntil you 're forced to teach it?
27:UseaCSSReset
T his is another area that's been debat ed to death. CSS resets: to u se or not to u se; that is the qu estion. If I were to offer my own personal advice, I'd 100% recommend that you create you r own reset file. Begin by downloading a popu lar one, like
9 of 12
07/03/2009 09:58 AM
Eric Meyer's, and then slowly, as you learn more, begin to modify it int o you r own. If you don't do this, you won't tru ly u nderstand why you r list items are receiving that extra bit of padding when you didn't specify it anywhere in you r CSS file. Save you rself the anger and reset everything! T his one shou ld get you started. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockqu ote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, u l, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; ou tline: 0; font-size: 100%; vertical-align: baselinebaseline; backgrou nd: transparent; } body { line-height: 1; } ol, u l { list-style: none; } blockqu ote, q { qu otes: none; } blockqu ote:before, blockqu ote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
28:Line'emUp!
10 of 12
07/03/2009 09:58 AM
Generally speaking, you shou ld strive to line u p you r elements as best as possible. T ake a look at you favorite designs. Did you notice how each heading, icon, paragraph, and logo lines u p with something else on the page? Not doing this is one of the biggest signs of a beginner. T hink of it this way: If I ask why you placed an element in that spot, you shou ld be able to give me an exact reason.
29:SliceaPSD
11 of 12
07/03/2009 09:58 AM
Okay, so you 've gained a solid grasp of HT ML, CSS, and Photoshop. T he next step is to convert you r first PSD into a working website. Don't worry; it's not as tou gh as you might think. I can't think of a better way to pu t you r skills t o the test. If you need assistance, review these in depth video tu torials that show you exactly how to get the job done. Slice and Dice that PSD From PSD to HT ML/CSS
30:Don'tUseaFramework...Yet
Frameworks, whet her they be for Javascript or CSS are fantastic; bu t please don't u se them when first getting started. T hou gh it cou ld be argu ed that jQu ery and Javascript can be learned simu ltaneou sly, the same can't be made for CSS. I've personally promoted the 960 CSS Framework, and u se it often. Having said that, if you 're still in the process of learning CSS -- meaning the first year -- you 'll only make you rself more confu sed if you u se one. CSS frameworks are for experienced developers who want to save themselves a bit of time. T hey're not for beginners. Follow u s on T witter, or su bscribe to the NET T UT S RSS Feed for more daily web development tu ts and articles.
194
diggs digg it
12 of 12
07/03/2009 09:58 AM

HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

If you ju st signed u p, don't forget to follow u s: NET T UT S.

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

30 HT ML Best Practices for Beginners - Nettuts+

Вам также может понравиться