It’s True
Anyone that writes at AG knows that I’m a stickler for clean HTML and that I have the “visual editor” in Word Press turned off on my account and encourage others to do so. I write articles from scratch and never ever use the code that WP offers, mainly because no editor is perfect and I’m waaay smarter than zeros and ones. This doesn’t mean I’m a dork- most people I went to high school with would likely be surprised that I know what the hell HTML even is… it just means I’m OCD and un-centered images and inconsistent fonts and sizes drive me batty (and yes, some writers here love making messy HTML just for me- you know who you are). I also hate not having control of the content that I produce. Hate it.
So How Do YOU Become a Purist?
First, never ever use any sort of editor. There are plenty of editors out there that allow you to edit and click “hooray” and it sends it to your blog. Don’t do it- it inserts all sorts of crazy code, even if you swear it doesn’t. I can look at the code source and tell if you used an editor because it sullies it. Yes, I said sullies.
Secondly, if you use Word Press, go to your User Profile and make sure the first box that says “use the visual editor when writing” is NOT checked. This turns off your visual editor and forces you to write in code (don’t worry, I’ll give you the tools you need). This is an unpopular move, but you wanted to know how to be a purist, so here’s how. (Benn noted that in the new WordPress, you can move between Visual and HTML editor without it defaulting to Visual, but I vote for disabling it so there is no confusion)
Thirdly, never copy and paste from anywhere to wordpress ever. Never, never, never, never. Remember- it sullies. Yes, you can paste into the HTML Editor without this problem, but again- it’s not worth risking. Want to know what DIRTY HTML looks like? Just watch what happens when you copy and paste two sentences from Microsoft Word to Word Press… if you’re not cringing, you may also be the type who isn’t bothered by dishes in the sink. Just sayin’.
But I Don’t Know HTML!
It’s cool, a year ago, I didn’t either- I just Googled stuff all the time. Never fear, there are TONS of online resources (just Google “HTML codes”), and below is a snapshot of the made-in-two-minutes cheat sheet for you. See, I wouldn’t have you wash your dishes without telling you what the best washing liquid is (it’s Williams & Sonoma Basil by the way)!
There is a HTML cleaner upper online but I don’t think it works so well, so it’s best to learn a few tricks! So, who’s with me on my quest for pure, un-dirty HTML?
Sherry Baker
October 2, 2008 at 10:49 am
Lani, I totally concur. Dirty code s**ks. I learned HTML in the 90s (when you were just a baby) and had to unlearn some bad habits, but coding yourself instead of accepting the garbage some software throws out there is best. Unless… you’re REALLY OCD and can never get it finished b/c you have to make it SO perfect. That’s me sometimes too, but we’ll talk about that anyother day. 🙂
Love the article!
Paula Henry
October 2, 2008 at 10:50 am
Lani – Oh I do want to be cool like you…………., but, You are way too cool for me 🙂 I don’t do HTML, well, except the very basics and don’t have time to learn. I was taught to run my posts through Notepad before copying to WP – does that eliminate the junk? What about Blogjet? Does it produce the same junk?
Mark Eckenrode
October 2, 2008 at 10:52 am
i’m so totally down. do i get a tshirt? perhaps something like “”?
i break one of your rules, though… i do write my posts outside of wordpress. i use a text editor that doesn’t add any mark-up so it all remains pure (https://notetab.com/).
one of the things about MS Word is that it’s a word PROCESSOR. it takes your words and processes them.. changes the coding so that it only looks good in MS Word.
Lani Anglin-Rosales
October 2, 2008 at 10:55 am
Sherry, I’m glad you concur 🙂
Paula- Notepad IS a good way to make sure you don’t have ugly code, but Blogjet (and all other editors, despite what Russ says) inserts additional code OR makes it a solid wall of text that makes it difficult to go back and edit. HTML isn’t tough, it just LOOKS tough, don’t be intimidated by it- YOU are smarter than the computer! 🙂
Sometimes the best way to be advanced is to go back to the basics. We talk about this in marketing all the time, today, we’re just focused on how the 0s and 1s work! 🙂
Vegas Web Design
October 2, 2008 at 11:27 am
Having clean html code is a must for the search engines who have their crawlers try to understand what your website is about. Having messy code makes it really hard for the crawler to crawl obviously and even want to come back.
I completely agree that you must have clean code.
Cyndee Haydon
October 2, 2008 at 11:38 am
Lani – LOVE this post – appreciate the tips (keep em coming) Used to use blogjet until I saw all the JUNK it put in my posts. Need to perfect more HTML – like your ref sheet.
Kelley Koehler
October 2, 2008 at 11:50 am
But it’s so much easier for me when you just clean up my posts. 🙂
Missy Caulk
October 2, 2008 at 12:05 pm
Lani, I use to use blogjet too. But, when WP upgraded it wouldn’t work. I went onto a forum and someone answered and said to change my password, but I didn’t want to do it. I knew the password was correct.
So I went back to writing in the post, Word never worked. This is good information, but I’m not sure I can or have the time to learn html, can’t we just write it normal?
Jack Leblond
October 2, 2008 at 12:13 pm
Lani – You ROCK! There actually is a search engine penalty if your code/content ratio is all out of whack. Clean code is a great step towards fixing that.
I have to scold you (again) though – let’s not forget to use the alt tag in our images and the title tag in our links. Hey, you brought me here ;-D
Paulo
October 2, 2008 at 12:34 pm
Just a few notes from a Web standards freak…
the “align” attribute is deprecated. Use the style attribute if you want future proof your code (better yet, add style definitions to your stylesheet and do not use inline styles). EG (inline style example):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.See: https://www.w3.org/TR/REC-html40/present/graphics.html#h-15.1.2
For images you can float them and add some margins to allow the content to flow around them. EG:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Irina Netchaev
October 2, 2008 at 12:42 pm
Lani, I want to be just like you – semi-geek girl knowing the HTML code. It probably looks tougher than it is. Printed out your cheat sheet and will try. I do have to say that watching that video was a bit scary. Didn’t realize what was happening on the back end. THANKS!
Elaine Reese
October 2, 2008 at 12:47 pm
I tried writing in Word then copying to WP just once! Never again! I write in the Visual Editor, then go into the html to add the specific codes to make it look like I want it to. Once someone gains an understanding of how html works, it’s not difficult … but then I’ve been using it for 10 years.
Rich Jacobson
October 2, 2008 at 12:51 pm
I don’t EVEN want to go there! Messy HTML, formatting in Word, what is the world coming too?
Todd
October 2, 2008 at 12:52 pm
Here’s the means to test your markup against other sites:
xhtmlchallenge.com
Should we elect a president based on their web site’s markup cleanliness?
Michelle DeRepentigny
October 2, 2008 at 1:54 pm
I love web-source.net for codes and colors values, that’s where I learned that annoying scrolling marquee code. They also have great css tutorials, which if you screwed up and used a blog platform like mine you really need 🙁
I tend to write in Nvu and then clean it up, sorry! Nvu seem to no longer own their domain name, glad I have it downloaded on my desktop.
Nick Bostic
October 2, 2008 at 4:50 pm
Oh come on Lani, being a bit elitist? 🙂
I’m repeating myself, but I’ve been coding HTML for ages, I can do it (and CSS) in my sleep these days.
But to say ALL editors are bad? When I’m designing old fashioned sites using Dreamweaver, it generates perfect code. Okay, so that’s for non-blog sites. I have to say though (after trying several programs), Microsoft Live Writer (egads! MS for blog writing software!) actually does the code 99% correct! The only weird code it put in was for the Technorati tags for some reason.
Not everyone has the time to become a web developer, learn valid HTML and CSS, but there should definitely be a baseline knowledge to fix any problems that may arise and be able to tell what ugly code looks like.
Linsey
October 2, 2008 at 4:55 pm
Sometimes it’s easier to be blissfully ignorant; I didn’t know that I might be blowing it. I thought I was in the clear on having to learn HTML.
To be clear (for those of us still on the greener side of things), you’re saying that it’s NOT a good idea to type my post in my WordPress visually using the convenient ‘Bold’ button or the even more convenient hyperlink button, but to utilize the HTML method of entering? I hadn’t noticed anything odd but maybe I’m missing something.
Thanks Lani!
Lisa Sanderson
October 2, 2008 at 5:31 pm
Slowly learning this stuff and totally appreciate your pointers! Please keep the cheat sheets coming. ~L
ps-What is HR tag?
Jay Thompson
October 2, 2008 at 5:44 pm
Lisa — HR tag = Horizontal Rule… what makes that little line under the picture in Lani’s post.
BlogJet actually generates pretty clean code, It tends to choke on blockquotes, but it certainly doesn’t inject all the crap that Word does. Plus for the purists, it has an HTML mode as well. I use it all the time.
The WYSIWYG editor in WordPress is OK for very basic things like bolding and italicizing, but once you start to put in H2, HR, alignment and embed tags, it tends to go wonky fast.
Kim Wood
October 2, 2008 at 5:45 pm
Overwhelmed by HTML however learning it little by little has been fun! The cheat sheets are of great use – and a friend available for quick SKYPE help (like yesterday) helps a lot too !! lol.
Keep sending the tips – when Lani speaks – I listen. (I remembered!!)
Matt Stigliano
October 2, 2008 at 6:44 pm
Lani – As a guy who learned to code when Pagemill was the best (haha) option out there, I admit, in the day and age of Dreamweaver I have become a little sloppy. But in the name of clean code, I removed my check box and will no longer rely on WordPress to do things that I can do in my sleep. Thank you for setting me free from the bondage of bad code and lazy typing.
P.S. Copying anything in Word to ANYTHING is a bad idea. 9.9 times out of ten there will be a mistake somewhere.
Mariana Wagner
October 2, 2008 at 9:09 pm
I second HouseChick 😉
rob | atlanta homes
March 27, 2010 at 8:23 am
I use the visual editor, then look at the HTML and fix it. Too many years of coding pure HTML behind me to code only HTML any more.
And yes, the WordPress visual editor is horribly messy, but hey, it’s free. It does some crazy stuff all on it’s own. And trying to get returns in, etc., is just stupid.
Lani Rosales
March 27, 2010 at 1:42 pm
WP visual editor drives me BATTY!
Jay Thompson
March 27, 2010 at 2:02 pm
Ditto! Hence the use of Live Writer. Yeah, it’s a Microsoft product, but it *smokes* the WP visual editor. And the cost (zero) is spot on.
Matt
February 12, 2023 at 12:00 pm
“I’m an html purist” proceeds to use wordpress
Lani Rosales, COO + News Director
February 13, 2023 at 1:49 pm
Yeah, probably got ahead of my skis here 😉