Autor: Alfonso Bribiesca

Cuatro tips para que tengas una página web impecable, funcional y exitosa.

wireframes_sketch_586

Una página de internet es uno de los primeros medios en los que puedes darle una buena impresión a tus clientes activos y potenciales. Ya que, es ahí en dónde verán el reflejo de quién eres, sabrán qué haces y conocerán tus beneficios, entre otras cosas. Es por ello que decidí compartirles cuatro tips para que tengas una página web impecable, funcional y exitosa:

1. Si no estás en internet, prácticamente no existes.

Hoy en día, la tecnología es una de las piezas fundamentales para las empresas, pues sin duda, es ahí donde las personas buscan información, nuevos servicios, proveedores etc. Por ello, es importante que una empresa cuente con la mejor tecnología para dar a conocer sus servicios y así destacar y sobrevivir en el medio.

2. Información completa.

Es necesario que para comenzar con el desarrollo de un sitio web la empresa o pyme tenga presente el manual de imagen corporativo y uso de la misma. Es decir, colores, tipografía, logo, etc. Además, de saber quiénes son, misión, visión, descripción de servicios, datos de contacto o cualquier información que se quiera incluir. Recuerda que esto puede aumentar, pero sin duda, entre mejor y más ordenada se entregue la información será más fácil hacer un sito web exitoso, simple y sencillo.

3. Diseño.

La página web es el reflejo de la empresa, pues en ella se ve la calidad del trabajo, estilo, identidad, entre otras cosas. Por ello, deberás asegurarte de contar con un diseño gráfico impecable, pues cuando un cliente potencial entre a tu página será lo primero que conozca de la empresa. Te recomiendo no utilizar plantillas, ya que te tendrás que adaptar a ellas y no al revés, logrando un resultado poco profesional y sin personalizar.

4. Hazla funcional.

Para que una página sea exitosa, ésta deber ser fácil de usar, legible y atractiva para el cliente final. De este modo, podrán entender la información y generar un vínculo con la empresa o pyme.

Recuerda que una empresa que cuenta con un sitio web funcional, con la información adecuada, un impecable diseño gráfico y los medios de contacto necesarios, tiene ventajas competitivas sobre su competencia y sin duda, dicho sitio puede llega a ser, en muchos casos, lo único que necesitará para cerrar una venta.

HTML Atributos Globales

Los atributos HTML le dan significado y contexto a los elementos HTML. Los atributos listados aquí pueden ser usado en cualquier elemento HTML.

El ícono representa que es un nuevo atributo en HTML5

AtributoDescripción
accesskeyEspecifica la tecla atajo para activar o dar foco a un elemento
classEspecífica 1 o más nombres de clases para un elemento (Las clases son referencias por una hoja de estilos)
contenteditableEspecifica si el contenido de un elemento es o no editable
contextmenuEspecifica el menú contextual de un elemento. El menú contextual aparece cuando dan click derecho a un elemento
data-*Utilizado para guardar datos personalizados relacionados con la página o aplicación
dirEspecifica la dirección del texto del contenido de un elemento
draggableEspecifica si elemento se puede arrastrar o no
dropzoneEspecifica donde el elemento es arrastrado si es copiado, movido o enlazado cuando se suelte
hiddenEspecifica un elemento que que dejó de ser relevante
idEspecifica un ID único para un elemento
langEspecifica el lenguaje de el elemento
spellcheckEspecifica si el elemento será revisado en su redacción u ortografía
styleEspecifica un estilo CSS en línea para el elemento
tabindexEspecifica el orden para la navegación con tabulador entre elementos
titleEspecifica más información sobre el elemento
translateEspecifica si el contenido de un elemento debe de ser traducido o no

Etiqueta HTML

Definición y uso

La etiqueta <a> define un enlace (también conocido como hiperenlace) que sirve para enlazar una página con otra.

Existent muchos atributos para la etiqueta <a> pero el más importante y casi necesario es el atributo href que indica el destino del enlace.

Por defecto los enlaces aparecen en los navegadores de la siguiente forma:

  • Un enlace sin visitar aparece subrayado y de color azul.
  • Un enlace visitado aparece subrayado y en morado.
  • Un link activo aparece subrayado y en rojo.

En gran parte de las páginas(como esta por ejemplo) los estilos de los links llegan a cambiarse para ajustarse al diseño del sitio. La mejor forma de lograrlo es por medio de estilos CSS.

Los atributos: download, hreflang, media, rel, target y type no pueden estar presentes si no esta presente el atributo href.

Una página enlazada se muestra normalmente en la misma venation a menos que se especifique lo contrario. (Esto se logra con el atributo target)

Ejemplo:

JS Bin

Soporte Navegaores

Diferencias entre HTML 4.01 y HTML5

En HTML 4.01 la etiqueta <a> puede ser utilizada como un link o una ancla. En HTML5, la etiqueta <a> siempre es un hiper-enlace, pero si no tiene el atributo “href” se usa para marcar un espacio para un enlace..

HTML5 tiene algunos nuevos atributos y algunos atributos de HTML 4.01 ya no son soportados.

¿Cómo saber que botón fue presionado en un formulario HTML?

A veces por alguna razón podríamos necesitar saber que botón presionó un usuario al guardar el formulario, por ejemplo, podríamos querer saber si presionó el botón “Guardar” o el botón “Guardar y agregar otro” para cambiar el comportamiento de nuestra aplicación. Una forma excelente de lograrlo es con jQuery:

Básicamente se trata de agregar un atributo al botón que se presionó para luego leerlo justo antes de enviar la información y realizar una acción al respecto.

Ojalá les sirva, si tienen dudas pueden usar el formulario de comentarios. 😉

HTML DOCTYPES Válidos

La siguiente tabla lista todos los elementos HTML y muestra en que !DOCTYPE aparece cada elemento:

HTML 4.01 / XHTML 1.0
EtiquetaHTML5TransitionalStrictFramesetXHTML 1.1
<a>SiSiSiSiSi
<abbr>SiSiSiSiSi
<acronym>NoSiSiSiSi
<address>SiSiSiSiSi
<applet>NoSiNoSiNo
<area>SiSiSiSiNo
<article>SiNoNoNoNo
<aside>SiNoNoNoNo
<audio>SiNoNoNoNo
<b>SiSiSiSiSi
<base>SiSiSiSiSi
<basefont>NoSiNoSiNo
<bdi>SiNoNoNoNo
<bdo>SiSiSiSiNo
<big>NoSiSiSiSi
<blockquote>SiSiSiSiSi
<body>SiSiSiSiSi
<br>SiSiSiSiSi
<button>SiSiSiSiSi
<canvas>SiNoNoNoNo
<caption>SiSiSiSiSi
<center>NoSiNoSiNo
<cite>SiSiSiSiSi
<code>SiSiSiSiSi
<col>SiSiSiSiNo
<colgroup>SiSiSiSiNo
<datalist>SiNoNoNoNo
<dd>SiSiSiSiSi
<del>SiSiSiSiNo
<details>SiNoNoNoNo
<dfn>SiSiSiSiSi
<dialog>SiNoNoNoNo
<dir>NoSiNoSiNo
<div>SiSiSiSiSi
<dl>SiSiSiSiSi
<dt>SiSiSiSiSi
<em>SiSiSiSiSi
<embed>SiNoNoNoNo
<fieldset>SiSiSiSiSi
<figcaption>SiNoNoNoNo
<figure>SiNoNoNoNo
<font>NoSiNoSiNo
<footer>SiNoNoNoNo
<form>SiSiSiSiSi
<frame>NoNoNoSiNo
<frameset>NoNoNoSiNo
<h1> to <h6>SiSiSiSiSi
<head>SiSiSiSiSi
<header>SiNoNoNoNo
<hr>SiSiSiSiSi
<html>SiSiSiSiSi
<i>SiSiSiSiSi
<iframe>SiSiNoSiNo
<img>SiSiSiSiSi
<input>SiSiSiSiSi
<ins>SiSiSiSiNo
<kbd>SiSiSiSiSi
<keygen>SiNoNoNoNo
<label>SiSiSiSiSi
<legend>SiSiSiSiSi
<li>SiSiSiSiSi
<link>SiSiSiSiSi
<main>SiNoNoNoNo
<map>SiSiSiSiNo
<mark>SiNoNoNoNo
<menu>SiSiNoSiNo
<menuitem>SiNoNoNoNo
<meta>SiSiSiSiSi
<meter>SiNoNoNoNo
<nav>SiNoNoNoNo
<noframes>NoSiNoSiNo
<noscript>SiSiSiSiSi
<object>SiSiSiSiSi
<ol>SiSiSiSiSi
<optgroup>SiSiSiSiSi
<option>SiSiSiSiSi
<output>SiNoNoNoNo
<p>SiSiSiSiSi
<param>SiSiSiSiSi
<pre>SiSiSiSiSi
<progress>SiNoNoNoNo
<q>SiSiSiSiSi
<rp>SiNoNoNoNo
<rt>SiNoNoNoNo
<ruby>SiNoNoNoNo
<s>SiSiNoSiNo
<samp>SiSiSiSiSi
<script>SiSiSiSiSi
<section>SiNoNoNoNo
<select>SiSiSiSiSi
<small>SiSiSiSiSi
<source>SiNoNoNoNo
<span>SiSiSiSiSi
<strike>NoSiNoSiNo
<strong>SiSiSiSiSi
<style>SiSiSiSiSi
<sub>SiSiSiSiSi
<summary>SiNoNoNoNo
<sup>SiSiSiSiSi
<table>SiSiSiSiSi
<tbody>SiSiSiSiNo
<td>SiSiSiSiSi
<textarea>SiSiSiSiSi
<tfoot>SiSiSiSiNo
<th>SiSiSiSiSi
<thead>SiSiSiSiNo
<time>SiNoNoNoNo
<title>SiSiSiSiSi
<tr>SiSiSiSiSi
<track>SiNoNoNoNo
<tt>NoSiSiSiSi
<u>SiSiNoSiNo
<ul>SiSiSiSiSi
<var>SiSiSiSiSi
<video>SiNoNoNoNo
<wbr>SiNoNoNoNo

Declaración HTML

Definición y uso

La declaración <!DOCTYPE> debe de ser la primera cosa en tu documento HTML, antes de la etiqueta <html>.

La declaración <!DOCTYPE> no es una etiqueta HTML; Es una instrucción que le dice al navegador que la versión en la que esta escrita una página HTML.

En HTML 4.01, la declaración <!DOCTYPE> se refiere a DTD(Definición del tipo de documento por sus siglas en inglés) porque HTML 4.01 esta basado en SGML(Estándar de Lenguaje de Marcado Generalizado por sus siglas en inglés). La DTD especifica las reglas del lenguaje de marcado para que los navegadores muestren el contenido correctamente .

HTML5 no esta basado en SGML por lo que no requiere ninguna referencia a DTD.

Siempre agrega la declaración <!DOCTYPE> en tus documentos HTML. De esta manera el navegador siempre sabrá que tipo de documento mostrará.

Ejemplo:

Un documento HTML

Soporte Navegadores

Diferencia entre HTML 4.01 y HTML5

En HTML 4.01 hay 3 declaraciones <!DOCTYPE> distintas mientras que en HTML5 solo hay una:

Elementos HTML y Doctypes

Puedes ver la lista de elementos y a que doctype pertenecen aquí: Elementos HTML y en que Doctype aparecen.

Tips y notas

Tip: La declarción <!DOCTYPE> NO distingue entre mayúsculas y minúsculas.

Tip: Puedes validar tus documentos HTML aquí.

Declaraciones DOCTYPE comunes

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

Esta DTD contiene todos los elementos HTML y atributos, pero no incluye los elementos de presentación o en desuso (como “font”). Los “Framesets” no están permitidos.

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

HTML 4.01 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluidos los elementos de presentación y obsoletos (como “foto”).  Los “Framesets” no están permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

HTML 4.01 Frameset

Esta DTD es igual al HTML 4.01 Transitional, pero permite el uso de “Framesets”.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict

Esta DTD contiene todos los elementos HTML y atributos, pero no incluye los elementos de presentación o en desuso (como “font”). Los “Framesets” no están permitidos. Debe de ser escrito como un XML bien formado.

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

XHTML 1.0 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluidos los elementos de presentación y obsoletas (como “font”). Los “Framesets” no están permitidos. Debe de ser escrito como un XML bien formado.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Frameset

Esta DTD es igual XHTML 1.0 Transitional, pero permite el uso de “Framesets”.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1

Esta DTD es igual a XHTML 1.0 Strict, pero permite agregar módulos (por ejemplo para dar soporte con ruby para lenguajes del este de Asia).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Sass VS LESS VS Stylus: ¿Qué pre-procesador de CSS es mejor?

b2ap3_thumbnail_SaSS_LESS_Stylus

Si tienes algo de experiencia en el desarrollo de sitios web es probable que hayas tenido muchos dolores de cabeza trabajando con hojas de estilos CSS, esto, sobretodo porque son muy difíciles de mantener ordenadas y al no ser propiamente un lenguaje de programación tienen limitantes como el no poder utilizar variables, funciones, realizar operaciones matemáticas, etc.

La buena noticia es que no eres la única persona con ese problema y algunas de ellas ya se han dedicado ha desarrollar soluciones para este problema y así es como nacen los pre-procesadores CSS:

¿Qué son los pre-procesadores CSS?

Son aplicaciones que procesan cierto tipo de archivos para crear hojas de estilos con algunas de las ventajas de un lenguaje de programación común como el uso de variables, funciones, condiciones, la posibilidad de hacer cálculos  matemáticos  y que además te permiten utilizar una sintaxis mucho más sencilla e intuitiva.

Hay muchos pre-procesadores, cada uno con sus ventajas, sin embargo para fines de este artículo me enfocaré en los 3 más populares: SassLESS y Stylus.

Sass VS LESS VS Stylus

1. Instalación

Tanto Sass como LESS y Stylus están escritos para funcionar en distintas plataformas.

Sass funciona con Ruby el cual viene pre-instalado en Mac, sin embargo en Windows necesitarás instalar Ruby para poder empezar a usar Sass. Por otro lado para poder utilizar Sass tendrás que utilizar la terminal o la línea de comandos lo que vuelve algo complicada la tarea(para algunos).  Existen varias herramientas visuales para facilitar este proceso pero en general tienen un costo.

En el caso de LESS al estar escrito en JavaScript la instalación es tan sencilla como importar la librería de JavaScript a tu documento HTML, además, también existen algunas herramientas, muchas de ellas gratuitas, que ayudan a compilar tus archivos escritos en LESS.

Stylus requiere para su instalación de NodeJs el cual que tiene su propio proceso de instalación y al igual que Sass requiere de trabajo desde línea de comandos para instalar y compilar documentos. Por otro lado las herramientas visuales para ello son más escasas que sus 2 competidores.

Conclusión: Para cuestiones de instalación LESS es la mejor opción.

2. Sintaxis

Tanto Sass como LESS utilizan la sintaxis estándar de CSS por lo que es bastante sencillo convertir una hoja de estilos al formato de Sass o LESS. La pequeña diferencia es que Sass utiliza la extensión .scss y LESS utiliza la extensión .less.

Como verán no hay ninguna diferencia con un CSS regular. Este ejemplo funciona tanto para Sass como para LESS.

Para el caso de Sass, este también acepta una sintaxis un poco más antigua que omite las llaves y el punto y coma:

Para el caso de Stylus la sintaxis es un poco más compleja. Stylus acepta la sintaxis CSS estándar, pero también acepta algunas otras variaciones donde las llaves, dos puntos y puntos y comas son opcionales. Por ejemplo:

La extensión de los archivo stylus es .styl.

Como verán ningún formato ofrece una ventaja real sobre el otro salvo la posibilidad de escribir el código omitiendo ciertos elementos. Bajo este criterio podríamos declararlo un empate, sin embargo, siendo un poco más estricto y en mi muy personal opinión una sintaxis menos abierta (sin ser demasiado restrictiva por supuesto) ayuda a tener códigos más claros y elegantes y facilitan la futura lectura del mismo. Es decir, considero que los ganadores son: Less y SASS.

3. Variables

Las variables pueden ser declaradas y utilizadas a lo largo de la hoja de estilos. Ustedes pueden guardar cualquier valor CSS (ej: colores, números o textos) y referenciarlo en cualquier parte del código.

Sass

En Sass las variables se declaran como en PHP agregando el símbolo de moneda ($) antes del nombre de la variable y asignando el valor por medio del signo de dos puntos “:“. Cada declaración de una variable se termina con un punto y coma, es decir, la misma sintaxis que CSS.

LESS

En LESS las variables se asignan de la misma forma que en Sass excepto que en vez del uso del signo de moneda hay que agregar el símbolo arroba “@” antes de cada variable.

Stylus

En Stylus las variables no requieren que se agregué ningún símbolo, sin embargo si se permite el uso del símbolo $. De igual forma el punto y coma no es necesario pero si un signo de igual entre la variable y el valor. Como dato Stylus (0.22.4) compila correctamente si agregan el símbolo de @ en el nombre de una variable, pero no aplicará el valor cuando se haga referencia al mismo por lo que hay que evitarlo.

Cabe mencionar que todos los ejemplos arriba compilan el mismo CSS:

Conclusión: Al igual que el tema de la sintaxis no hay ninguna ventaja real entre ninguno de los lenguajes salvo las restricciones que, repito, en mi muy personal opinión ayudan a tener un código más claro. De nuevo los ganadores: LESS y Sass.

4. Código anidado

Un problema común al generar hojas de estilo CSS es cuando se tienen múltiples elementos con el mismo padre y lo tedioso que puede ser estar escribiendo el nombre del objeto padre una y otra vez:

Para ello, por medio de los pre-procesadores, podemos escribir los selectores de los hijos dentro del elemento padre y  se puede, además, utilizar el símbolo & para referirse al mismo.

Tanto Sass como LESS y Stylus tienen la misma sintaxis para elementos anidados:

Una vez compilado este código devolverá el mismo código CSS del ejemplo inicial de este punto:

Conclusión: Los 3 lenguajes son igualmente buenos.

5. Mixins

Los “mixins” son como una especie de función de un lenguaje de programación, están te permiten reutilizar algunas propiedades en la hoja de estilos y modificarlas según los parámetros que recibe la misma. Esto puede ser útil para modificar o reutilizar rapidamente los estilos de un sitio solo modificando los parámetros. Ejemplo:

Sass

LESS

Stylus

Para todos los ejemplos de arriba el código compilado es el mismo:
Conclusión: En cuanto al uso de “Mixins” las 3 tecnologías son igual de buenas.

6. Herencia

Cuando escribes un hoja de estilos y quieres aplicar el mismo estilo a varios elementos los escribes de la siguiente forma:

Esto es una excelente solución hasta que tenemos que modificar una propiedad específica de un elemento lo cual empieza a ser un problema cuando nos damos cuenta de lo desordenada que tenemos nuestra hoja de estilos. Para ello, cada uno de los pre-procesadores tiene su forma de lidiar con esta situación:

Sass & Stylus

Para ambos casos al compilar se generaría el siguiente código CSS:

LESS

Para el caso de LESS también puedes utilizar las herencias pero en el momento de compilar, en vez de crear aplicar los mismos estilos a múltiples clases repite cada uno de los elementos-

En este caso el código se compilaría de la siguiente forma:

Como verán en el caso de LESS no genera un código CSS óptimo ya que no agrupa las herencias, por lo tanto los ganadores para este caso son: Sass y Stylus.

7. Importación

En un documento CSS común la importación de archivos es posible, sin embargo no es la práctica más recomendada ya que requiere hacer múltiples peticiones HTTP lo cuál no es una forma óptima para lograr una carga rápida. Los pre-procesadores CSS por su parte cargan los distintos archivos importados y lo compilan en un solo archivo.

Es importante recalcar (como mostraremos en el ejemplo) que si se importa un archivo .css común este no se importará al documento resultante si no se que se mantendrá con la instrucción de “import”:

Sass, LESS y Stylus

Para el ejemplo el archivo compilado se vería de la siguiente forma:
Como verán la importación es igual para todos por lo que no hay ningún ganador(o todos lo son).

8.Funciones de Colores

Las funciones de colores sirven para transformar el color en el momento de la compilación. Estos son bastante útiles para crear degradados, obscurecer un botón al pasar el mouse, etc.

Sass

Estas son solo alguna de las funciones de colores de Sass. Te recomiendo leer la documentación de Sass para conocer más funciones.

Las funciones de color pueden utilizarse en cualquier lugar donde el color sea una propiedad CSS válida. Aquí un ejemplo:

LESS

Estas son solo alguna de las funciones de colores de LESS. Te recomiendo leer la documentación de LESS para conocer más funciones.

Aquí un ejemplo de como puedes usar una función de color con LESS:

Stylus

Estas son solo alguna de las funciones de colores de Stylus. Te recomiendo leer la documentación de Stylus para conocer más funciones.

Aquí un ejemplo de las funciones de color en Stylus:

Conclusión: En cuanto a funciones de colores las 3 opciones cuentan con suficientes funciones para las necesidades más importantes por lo que no hay ningún ganador.

9. Operaciones

Tanto Sass como LESS y Stylus permiten hacer operaciones matemáticas de la misma forma. La principal diferencia es que LESS es menos restrictivo a la hora de permitir operaciones entre distintas unidades. Por ejemplo, en LESS esta operación es válida:

100px + 2em = 102px (?)

Para este ejemplo en Sass y Stylus generaría un error de compilación lo cual, según mi criterio(que es debatible) me parece es lo correcto para evitar errores de dedo en tu hoja de estilos.

Sass, LESS, & Stylus

10. Media Queries

La mayoría de las personas que trabajamos con @media queries ponemos las mismas siempre al final de la hoja de estilos, esto es un problema ya que desconecta los estilos que estas trabajando lo que vuelve tu código más difícil de leer/mantener:

Con Sass o LESS puedes poner esos estilos anidándolos a la clase:

Además, con Sass puedes usar un pequeño truco llamado “respond-to” (código de Chris Eppstein, Ben Schwarz, y Jeff Croft) para llamar los media queries de una forma más clara.

Así puedes usarlo de una forma más clara:

Como verán el claro ganador de este rubro es: Sass.

Conclusión:

Las 3 tecnologías son muy poderosas y cualquiera te ahorrará trabajo, sin embargo tomando en cuenta todas las variables expuestas aquí considero que la mejor tecnología es Sass aunque no por un margen realmente claro lo que me podría hacer cambiar de idea en el futuro.

¿Ustedes que opinan?

Extraer la extensión de un archivo por medio de PHP

En muchas ocasiones para, por ejemplo, validar que un tipo de archivo sea aceptado es necesario saber su extensión. Existen muchas soluciones para lograrlo pero la más sencilla esta integrada con PHP.

La función en cuestión es: pathinfo():

Esta es la forma más rápida, sencilla y eficiente. Te puede, además, dar más información como la ruta del archivo, esto dependiendo del segundo argumento.

¡Suerte!.

Etiqueta de comentarios HTML

Definición y uso

La etiqueta de comentarios es usda para insertar comentarios en el código fuente de los documentos HTML. Los comentarios no se muestran en los navegadores.

Los comentarios se usan par explicar el código lo que ayuda a que tu o futuros desarrolladores puedan entenderlo mejor si deciden actualizarlo en el futuro. Esto es especialmente útil si tienee mucho código.

Ejemplo

JS Bin

Soporte Navegadores

Diferencias entre HTML 4.01 y HTML5

Ninguna

Tips y notas

También pueden usar comentarios para “ocultar” script en los navegadores que no los soportan (de esta manera no lo muestran como texto plano):

Nota: Las 2 diagonales invertidas en el final del comentario (//) indican un comentario en JavaScript. Esto previene que JavaScript intente ejecutar el tag: –>.

Atributos estándar

La etiqueta de comentarios no permite el uso de atributos estándar.

Atributos de eventos

La etiqueta de comentarios no permite el uso de atributos de eventos.

Párrafos HTML

En general todos los documentos HTML contienen párrafos que principalmente muestran bloques de contenido.

Los párrafos HTML

Los párrafos se definen con la etiqueta HTML: <p>.

JS BinPor defecto los navegadores agregan un espacio en blanco(un margen) antes y después de cada párrafo.  

¿Cómo se muestra el HTML?

Es difícil saber como el HTML se muestra en el navegador ya que depende de factores como el tamaño de la pantalla o la versión del navegador. Otro detalle a tomar en cuenta es que los navegadores ignorar los espacios en blanco o saltos de línea del código HTML. Todas los espacios y saltos de línea extras serán borrados cuando la página sea mostrada. No importa cuantos espacios en blanco o saltos de línea pongas siempre se contarán como un solo espacio. JS Bin

Nunca olvides la etiqueta de cierre

Aunque la mayoría de los navegadores mostraría bien el contenido aunque no se use la etiqueta de cierre: </p> es sumamente recomendable siempre hacerlo ya que en caso contrario aumentan las posibilidades de tener errores inesperados.

JS Bin

Versiones estrictas de HTML como XHTML no permiten olvidar la etiqueta de cierre.