...what you see isn't always what you get...
Anal coding is a commitment to the creation of perfect code. It requires a line by line "hand" edit of every single page. To accomplish this, start by learning HTML and CSS instead of relying on your WYSIWYG editor. I'm not saying anything against using such editors to save time, just don't trust them with the final version of your code. No matter what they tell you, what you see isn't always what you get.
It is the express duty of all ampersands to escape. All non-escaped ampersands will be hunted down, deleted, and replaced with escaped ampersands. Have I made myself clear, coder?
--ptvGuy (Anal Coder)
Know Your Code
You don't have to memorize every code tag, but get to know the main ones intimately, and be aware of the others for when you need them. Play with them. See how a minor change of implementation affects the final product, not just from one browser or browser version to another, but in the exact same one.
Learn Basic Web Standards
Web standards are for making sure that everyone has access to the web irregardless of the technology or software that got them there. It not only makes web development faster and easier, it also makes it accessible for people with disabilities. Go to the Web Standards project website and start reading the posts. Learn the basics.
Use Semantic Markup
...using markup for what it was actually meant to do...
Semantics is the science or study of meaning and changes of meaning in language. When we speak of semantics in relation to web development, we're talking about using markup for what it was actually meant to do:
- headers for headings (not to bold text or make it bigger)
- tables for tabular data (not for page layout)
- divs for page layout
- blockquotes for a paragraph or more of quoted text (not for text indenting)
- paragraphs for paragraphs of text (not for line breaks or whitespace)
- lists to create actual lists--including, possibly, navigation links (not to just make bullets or number items)
- etc., etc., etc.
Code markup used in the proper way has semantic meaning. Learn more about semantics. Find out how it applies to naming conventions. Run through the SimpleBits SimpleQuiz and then go forth and add real meaning to your code.
Learn Web Accessibility
...opening your content up to everyone...
Though it's actually an extension of web standards and semantic markup, web accessibility must be considered in and of itself. It has to do with opening your content up to everyone, making it accessible even to people with disabilities. Go to the WebAIM site and start with their Introduction to Web Accessibility and then read the rest of the site. Check out the resources available on the Accessify website. Read and listen to the boagworld and WebAxe blog and podcasts. You might even want to read my own series of articles on web accessibility.
Separating Behavior, Structure, and Presentation
The separation of behavior from structure and presentation is another aspect of modern web standards. The old days of dumping DHTML markup into your code just for the sake of a cool special effect that only worked in one browser and hid content from everyone else--including search engines--has been replaced by the concept of unobtrusive JavaScript.
Learn CSS
Visit the CSS Zen Garden. Check out the Position Is Everything website. Read Bruce Lawson's blog as well as Lachlan Hunt's. By the way, don't forget to keep mezzoblue's CSS Crib Sheet handy. Look. Play. Learn from the masters. It's just awesome power over your page.
Know Your Server
Find out what kind of server your site is hosted on. Find out why that matters. Find out what you can do with that server. Experiment. Play. Learn.
Get to Know Browser Behaviors
Ideally, proper markup should work identically on all browsers. Unfortunately, it doesn't. Different browsers will handle the exact same code in entirely different ways--as will different versions of the exact same browser. Take the time to at least make sure that your code works right in the two primary browsers, Firefox and Internet Explorer, before you assume that it's done and working correctly.
The Role of Code Validation
...Code is poetry. You have your own style...
Many coders are addicted to the idea of W3C code validation as the final say on whether code is good or not, and, as awesome a resource as that is, it isn't the final say--especially as regards CSS. (Before you accuse me of heresy, hear me out.) Many proprietary CSS properties are available to enhance the appearance of a web page in a specific browser. As long as these settings do not interfere with or cause errors in other browsers or limit the useability of the page or site to a specific browser (In other words, they're minor style settings only.) then they're not bad code even though they may not validate. As long as there's not extra content that can only be seen or accessed in one browser or the other, it's just a style choice. There's nothing wrong with that.
Validating your code is a way of eliminating mistakes and typos. It's not the final say. In the end, it's you who is responsible for what you put out there. Code is poetry. You have your own style. Make it a good one, but don't exclude people from your content.
Start Your Journey to Anal Coding
...don't exclude people from your content...
Below are just a few resources to get you started on your journey to anal coding. Join us, the few, the proud, the truly anal.
-
W3C Specifications:
- W3C HTML 4.01 Specification
- W3C XHTML™ Basic
- W3C XHTML™ 1.0 The Extensible HyperText Markup Language
- W3C Extensible Markup Language (XML) 1.1
- W3C CSS2 Specification
- W3C Introduction to CSS3
- W3C Web Content Accessibility Guidelines (WCAG)
- W3C Web Accessibility Initiative (WAI)
- W3C Technical Report and Publication
-
Coding Tutorials:
- W3Schools Complete Tutorials
- HTML Primer
- Project Cool: Web Development Basics
- webTeacher
- Writing HTML: Beginnings to Post-Graduate Lessons
- Lissa Explains It All: An HTML Guide for Kids
- HTML Code Tutorial
- Webmonkey: Beginners Guide to Web Development
- How to write HTML
- Extensive basic and advanced tutorials
- Virtually Ignorant: HTML tutorial
- All About Web Design
-
Other Matters:
Fan Me >>
Follow Me >>
Thank you for the links. I have bookmarked some of the html ones like the one for kids and will begin working on them after our June 1st pottery orders have been shipped.
The Webmonkey one is a good place for beginners too. Also, the Tech Support Guy forums (http://forums.techguy.org/) are a great place to go for any computer related questions including basic coding.
Excellent article. To add to the Semantic Markup points, use lists for lists.
Good point, and done, BTW. Thanks for the tip, Dennis.
Good reading, thought there’s actually one thing where newbies will have a horrid experience:
Using divs for page layout and making sure it works on both IE and other more compliant browsers is a real pain.
A couple of links for this topic would help.
[...] “Ontem” (há umas horas atrás e já era “hoje”), esqueci-me de falar de um site também muito bom e de um artigo muito bem explicado, estão em inglês: The Web Standards Project – FAQ What are webstandards and why should we use them? , o outro tem um nome muito sugestivo, mas não tem nada de mal, e é mesmo mesmo útil: ptvGuy: Anal Coding. Vou citar a primeira parte do artigo dele: Anal coding is a commitment to the creation of perfect code. It requires a line by line “hand†edit of every single page. To accomplish this, start by learning HTML and CSS instead of relying on your WYSIWYG editor. I’m not saying anything against using such editors to save time, just don’t trust them with the final version of your code. No matter what they tell you, what you see isn’t always what you get. ptvGuy: Anal Coding [...]
Joao: I apologize for being so long getting back to you. I’ve been moving and haven’t written anything here for a while. I’ve added your suggestion. Thanks. Also, the best links for that kind of information are A List Apart and Position is Everything.