10 buenas practicas para escribir código HTML


La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas Seguir leyendo “10 buenas practicas para escribir código HTML”

PSD to HTML Review: HTML Angels

Recently I decided to design my own website after using premade html templates & wordpress themes. After the design process was all complete came the daunting task of choosing a PSD to HTML company.

I decided to go with a company called HTML Angels. They got my attention more than other companies due to their beautiful website, creative name, easy to understand order for and reasonable prices. Their portfolio really stood out, with the exceptional design & hand coding.

I was after an HTML page, with a slideshow for my homepage and a WordPress Theme for my blog.


HTML Angels coded up 3 HTML pages for me, including the wordpress theme pages which were a pleasant surprise, and delivered them one day early. They asked me to check the files and see if everything was ok, and said they had included some extra CSS3 code to make the loading faster – which I appreciated. I tested the HTML pages in various browsers and found no problems, and was very happy with the results.

WordPress Theme Seguir leyendo “PSD to HTML Review: HTML Angels”

The (Dis)Advantages of Working From Home



Being a freelancer means you often have complete freedom on where to work. However, we tend to stay at home and work from our beds, dining room tables, a corner in our room, or if we’re lucky enough, a whole room dedicated as an office. What we mostly do not do, is leave our home to work in a separate office or co-working space.

Working from home comes with several advantages after all – no overhead, free range of the kitchen, no dress code and the ability to sleep as late as we want and stroll from the bedroom to our computer.

However, there are also several disadvantages we should be aware of. Distractions from family, children or pets being the biggest issue we come across. Also, walking two feet from our bedroom to our office means we don’t get the exercise we should – and we’re increasingly becoming an unhealthy industry. It also means you lead a distinctly lonely work day  – and without a boss breathing down your neck you’re more apt to goof off on the internet.

Even with all of these disadvantages – I still wouldn’t trade it for any other job in the world, nor would I bother with paying the high costs of renting an office space. Instead, I’ve aimed to become more productive and turn these into non-issues. How can you do it?

Distractions From Family & Pets Seguir leyendo “The (Dis)Advantages of Working From Home”

Best of WordPress Anti-Spam Plugins and Why You Need None to Fight Spam

by Salman Siddiqui


Today, while skipping rope I was pondering (my level of concentration increases when I skip rope) the reason behind the availability of innumerable anti-spam WordPress plugins. Did the creators of WordPress not think about spam issues and don’t they do so now when WordPress has gone viral? Actually, that isn’t the case. WordPress, as a Content Management System, comes loaded with basic features to tackle spam. It is just that we have been spoon fed the idea that a plugin is a must for any WordPress feature other than writing articles and uploading images.

Best of WordPress Anti-Spam Plugins and Why You Need None to Fight Spam

Plugins are required for extra features. Believe me, basics are always packed with WordPress. This discussion will go through some of the best WordPress plugins to fight spam and later on excogitate the WordPress dashboards to find out if we really need such plugins.

P.S. Don’t ask me why I was thinking about WordPress spam while skipping rope. I tend to think weird things at weird times. Seguir leyendo “Best of WordPress Anti-Spam Plugins and Why You Need None to Fight Spam”

Code a Stylish Portfolio Site Design in HTML & CSS

Last week we went through the step by step process of building a simple yet stylish single page portfolio site concept in Photoshop. This week we’re going to code up the design into a complete working HTML and CSS website and add the finishing touches in the form of super duper jQuery effects.

Seguir leyendo “Code a Stylish Portfolio Site Design in HTML & CSS”

Clients, the Web and the Big Misconception


Pretty ambiguous title isn’t it? That’s entirely intentional, because the topic of this particular article is something that a lot of web designers seem to hate talking about.

But, now that I’ve got you here hopefully you’ll stick around, so I’ll let the cat out of the bag (so to speak). In this article we’re going to be talking about Web 2.0.

Wait! Don’t run away! This isn’t the sort of article that’s going to round up eight bazillion awesome examples of Web 2.0 designs, or a tutorial that’s going to try to teach you how to replicate some overused and increasingly outdated design element. No, I’m going to tackle the issue head on and in a way that I hope will actual be useful for you. Why? Because we can’t simply ignore Web 2.0 (as much as we may want to).

The term is out there, and has permeated far beyond the borders of the design community and into the mind of the larger public.

it has also permeated into the minds of your clients and potential clients.

That means it has also permeated into the minds of your clients and potential clients.

Here’s a case in point. The other day I was communicating with a new prospect about possibly designing a website and all the things that it would entail. We had exchanged a few emails already when that dreaded question that so many web designers hate to hear came up: will the site design be in 2.0? As a designer/developer, this kind of thing generally and predictably draws a plaintive groan from my lips. Images of strong gradients, big bold stripes, glossy buttons and overused reflections dance like tiny, trendy goblins in my mind.

Later, when I offered my initial proposal for the website, I indicated that I would code it all in XHTML 1.0 and CSS3. I didn’t really expect the client to understand exactly what that meant, but it’s just one of my standard practices to include those kind of technical details, just to make sure that I’ve covered all the bases.

As you can imagine, the client came back and asked: Will the site be done in XHTML 2.0? Based on the previous version-based question, I was reasonably certain that the client was not referring to the W3C’s now defunct concept for XHTML 2 (parts of which have survived in HTML5 – see Jeremy Keith’s wonderfully succinct “A Brief History of Markup” for more details).

No, what the client was actually talking about was his notion of having a website designed to “work” with version 2.0 of the web.

No New Internet

Of course, there is no “new” version of the internet. We’ve introduced some new technologies into the mix, and allowed others to grow and evolve. Our browsers can do a heck of a lot more in terms of rendering sites than they could a decade ago, and the evolution of frameworks like jQuery have allowed for the much broader development of application-like functionality within a document.

But, at its core a website is still very much the kind of thing that I talk about in my recent article “HTML (and CSS) do Not a Website Make” – the unified sum of the various technologies that drive it.

It’s also important to note that there has been no significant change to the underlying structure that drives the internet. To quote Wikipedia on this subject:

Critics of the term claim that “Web 2.0″ does not represent a new version of the World Wide Web at all, but merely continues to use so-called “Web 1.0″ technologies and concepts. First, techniques such as AJAX do not replace underlying protocols like HTTP, but add an additional layer of abstraction on top of them.

Many of the new technologies that we use these days to drive the experience of the internet are not really all that new at all, but are either expanded (such as CSS3 and HTML5) or frameworks that provide a simplified form of access to existing technologies (like jQuery and MooTools do for JavaScript).

As web designers and developers, this probably isn’t anything all that new or revolutionary for us and we understand that the internet that we are using today is precisely the same internet that we were using back in 1995.

Instead of being replaced with a new version, it has simply grown and matured, much the same way my daughter has transformed from a helpless newborn to the energetic two and half year old who is currently pushing my MacBook closed and asking me to come play with her… Seguir leyendo “Clients, the Web and the Big Misconception”

Findings from the A LIST APART Survey, 2009


Once again, A List Apart and you have teamed up to shed light on precisely who creates websites. Where do we live? What kind of work do we do? What are our job titles? How well or how poorly are we paid? How satisfied are we, and where do we see ourselves going?

Once again, we present our findings on the web, with XHTML table data converted to beauteous charts care of CSS, Jason Santa Maria, and Eric Meyer. Others who worked on these findings include editor Krista Stevens and publisher Jeffrey Zeldman.

Analyses contained in this report should be considered primarily descriptive; no attempt was made to assess causality among survey variables. In plain English, be careful not to extrapolate the observations that follow into predictive or causal relationships.

Who are you?

Come here often? What’s your sign?…. Seguir leyendo “Findings from the A LIST APART Survey, 2009”

Giveaway: PSD to HTML Conversion Service from P2H.com

October 6th, 2010 by Jacob Gube

Giveaway: PSD to HTML Conversion Service from P2H.com

This one’s going to be a treat for you web designers out there: P2H, the first and premier PSD to HTML conversion service provider, has decided to provide up to 3 pages of their Hi-End Package markup, valued at $450, to a lucky Six Revisions winner. Read on to see how you can win this spectacular service.

What is P2H?

Founded in early 2005, P2H.com (also known as PSD2HTML.com) was the first service of its kind to provide taking a web designer’s Photoshop file (PSD) and converting it into standards-based, high-quality HTML/CSS template. Since then, they have established over 40,000 clients and is recognized as the most experienced and trustworthy company in the Design and HTML marketplace.

order now

Their expansive resources of over 300 full-time employees, coupled with guaranteed effective communication and customer care, ensure the highest quality for each project.

P2H Features

P2H’s work includes:

  • The highest level of W3C-standards-compliant markup
  • Table-less layouts
  • XHTML 1.0 Strict DOCTYPE
  • SEO-friendly
  • Semantic HTML/CSS that follows best practices
  • Optimized shorthand CSS
  • Separation of presentational (CSS), structural (HTML), and functional (JS) layers
  • Emphasis on page load speed
  • Cross-browser compatible with IE, Firefox, Chrome, Safari and other browsers
  • It takes only 1 working day to do the conversion of the 1st page, and 3-6 hours for each additional page

For additional details about the P2H features and the prize you could win, check out p2h.com order page. Seguir leyendo “Giveaway: PSD to HTML Conversion Service from P2H.com”

Getting Started with HTML5: What’s new?

HTML5 is not in its final version yet but more and more sites have started using it. HTML5 attempts to meet the requirements of the new Web and to make it easier to publish Web 2.0 content. When HTML4 was in the works, Web 2.0 wasn’t even dreamed of, so you can’t expect HTML4 to be Web 2.0-friendly.

Now with HTML5, this is expected to change. Though, by the time HTML5 is in its final version, we may have witnessed Web 3.0, 4.0, or more, so it will again be outdated but for now HTML5 is more or less an adequate answer to the needs of web developers today.

HTML5 isn’t very different from HTML4 but still there are some important differences to know and keep in mind. Here are some of the differences of general interest to a wider audience:

Simplified Syntax

One of the most notable differences between HTML4 and HTML5 is that now the syntax is simplified – web developers will certainly love this! The syntax in HTML5 is compatible with HTML4, but still there are many improvements. The doctype declaration is much shorter and is just . Transitional and loose variations of the doctypes are not supported anymore – you need to stick to XHTML syntax or HTML in strict mode. Seguir leyendo “Getting Started with HTML5: What’s new?”

20 HTML Best Practices You Should Follow

by Saqib Sarwar

20 XHTML Best Practices for Beginners

Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language. In this article, I will share with you 20 best practices that will lead to clean and correct markup.

1. Always Declare a Doctype

The doctype declaration should be the first thing in your HTML documents. The doctype declaration tells the browser about the XHTML standards you will be using and helps it read and render your markup correctly.

I would recommend using the XHTML 1.0 strict doctype. Some developers consider it a tough choice because this particular standard is less forgiving than loose or transitional doctype declarations, but it also ensures that your code abides strictly by the latest standards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Seguir leyendo "20 HTML Best Practices You Should Follow" 

HoneyThemes: A Free XHTML-CSS-Layout for Online Theme Shop

wallpaper 960 Base Theme WordPress
Image by Domenico / Kiuz via Flickr

Once Again, we’ve got something special for our community. We’ve again came up with cool freebies giveaway as promised. This is our way of saying thanks to our readers for being part of the instantShift community and helping us make it to where we are right now. We never wait for special occasions to announce good freebies. To continue our grateful attitude to our readers and community in general, we are glad to release this free XHTML/CSS Layout HoneyThemes. It’s our latest high-quality freebies addition for instantShift readers.

“HoneyThemes”, as the name implies, it’s something to do with themes which is actually a XHTML/CSS Layout suitable for any online theme business and has all the requirements and features of a typical theme shop. This layout was designed and developed by RapidxHTML as an exclusive gift for instantShift readers.

Seguir leyendo “HoneyThemes: A Free XHTML-CSS-Layout for Online Theme Shop”

Web Languages: Decoded

by Alexander Dawson

Web Languages: Decoded

Those of us who have become well seasoned to the dyslexia-inducing array of web languages often overlook the diversity and additional interactivity we can gain by learning another language or two.

Perhaps you are a beginner trying to understand what you need to spend time learning, or perhaps you’re an experienced individual looking for something new to play with.

Whichever situation applies to you, this article aims to underline the various languages at your disposal and where they fit in the puzzle.

It should be an interesting ride and seasoned experts may find languages they’ve not yet encountered! Seguir leyendo “Web Languages: Decoded”