EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Estructura HTML
            HTML5, estructura básica y elementos semánticos
            02/09/2019
            Etiquetas para la creación de formularios
            Etiquetas para la creación de formularios HTML
            04/09/2019

            Etiquetas html de contenido y texto

            Etiquetas html de contenido y texto

            Etiquetas html de contenido y texto

            Tabla de contenidos

            • 3. Contenido y texto
            • 3.1. Etiquetas de contenido
            • 3.2. Etiquetas de texto
            • 3.3. Sintaxis para caracteres especiales

            3. Contenido y texto

            En este apartado vamos a ver dos tipos de etiquetas HTML: las etiquetas que agrupan el contenido y las etiquetas que contienen fragmentos de texto (dan significado a esas palabras o fragmentos). Veamos cada una de ellas.

            3.1. Etiquetas de contenido

            Las etiquetas de contenido son las que agrupan el contenido que hay en su interior.

            Tabla 3.1: Etiquetas de contenido
            Elemento Descripción
            <p> Define una parte que debe mostrarse como un párrafo.
            <hr> Representa un cambio temático entre párrafos.
            <pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.
            <blockquote> Representa un contenido citado desde otra fuente.
            <ol> Especifica una lista ordenada de artículos.
            <ul> Determina una lista de artículos sin orden.
            <li> Define un elemento de una lista.
            <dl> Especifica una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
            <dt> Representa un término definido por el siguiente <dd>.
            <dd> Indica la definición de los términos listados antes que él.
            <figure> Establece una figura ilustrada como parte  del documento.
            <figcaption> Representa la leyenda de una figura.
            <div> Representa un contenedor genérico sin ningún significado especial.


            Ejemplo

            <!-- Elemento <p> -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia beatae aliquam non natus aut id sint ea? Natus tempore hic reprehenderit temporibus minima nisi, quia, magnam omnis, officiis molestiae earum.</p>
            
            <!-- Elemento <hr> -->
            <hr>
            
            <!-- Elemento <pre> -->
            <pre>Contenido preformateado       Conserva los espacios,
                        los saltos de línea y los tabuladores del texto original.
                    </pre>
            
            <!-- Elemento <blockquote> -->
            <blockquote>Con blockquote representamos un contenido citado desde otra fuente.</blockquote>
            
            <!-- Elemento <ol> -->
            <ol>
              <li>Lista ordenada</li>
              <li>Lista ordenada</li>
              <li>Lista ordenada</li>
            </ol>
            
            <!-- Elemento <ul> -->
            <ul>
              <li>Lista sin orden</li>
              <li>Lista sin orden</li>
              <li>Lista sin orden</li>
            </ul>
            
            <!-- Elementos <dl> <dt> <dd>-->
            <dl>
              <dt>Término 1</dt>
              <dd>Definición del término 1.</dd>
            
              <dt>Término 2</dt>
              <dd>Definición del término 2.</dd>
            
              <dt>Término 3</dt>
              <dd>Definición del término 3.</dd>
            </dl>
            
            <!-- Elementos <figure> y <figurecaption>-->
            <figure>
              <img src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg"
                   alt="Usabilidad">
              <figcaption>Figura 1</figcaption>
            </figure>
            
            <!-- Elemento <div>-->
            <div>Contenedor tipo div</div> 
            

            0

            3.2. Etiquetas de texto

            Las etiquetas de texto son las que dan significado a los textos que contienen.

            Tabla 3.2: Etiquetas de texto
            Elemento Descripción
            <a> Representa un hiperenlace.
            <em> Especifica un texto enfatizado.
            <strong> Establece un texto importante.
            <small> Define un comentario aparte, es decir, textos de políticas de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
            <s> Representa contenido que no es exacto, tiene el estilo tachado.
            <cite> Indica el título de una obra.
            <q> Representa una cita textual entre comillas.
            <dfn> Sirve para marcar el término que se quiere definir.
            <abbr> Envuelve un texto que al pasar el puntero por encima despliega un tooltip. El contenido del tooltip se detalla mediante el atributo title.
            <time> Determina un valor de fecha y hora.
            <code> Establece un código de programación.
            <var> Representa a una variable, es decir, una expresión matemática o una variable de un programa o similar.
            <samp> Determina la salida de un programa.
            <kbd> Representa el texto que debe introducir o la tecla que debe pulsar el usuario.
            <sub><sup> Establece un subíndice y un superíndice respectivamente.
            <i> Muestra el texto marcado con un estilo en cursiva o itálica.
            <b> Representa el texto marcado con un estilo en negrita.
            <u> Muestra el texto subrayado.
            <mark> Representa un texto marcado o resaltado.
            <span> Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
            <br> Inserta un salto de línea.
            <wbr> Indica una oportunidad de salto de línea, es decir, un punto sugerido donde el texto puede ser dividido para mejorar su legibilidad.


            Ejemplo

            <!-- Elemento <a>-->
            <a href="https://www.eniun.com">Esto es un hiperenlace</a>
            
            <!-- Elemento <em>-->
            <em>Esto es un texto enfatizado.</em>
            
            <!-- Elemento <strong>-->
            <strong>Esto es un texto importante.</strong>
            
            <!-- Elemento <small>-->
            <small>Nota de derechos</small>
            
            <!-- Elemento <s>-->
            <s>Este texto no es exacto</s>
            
            <!-- Elemento <cite>-->
            <cite>Este es el título de una obra</cite>
            
            <!-- Elemento <q>-->
            <q>Representa una cita textual entre comillas.</q>
            
            <!-- Elemento <dfn>-->
            <p>El <dfn>HTML</dfn> es un lenguaje de marcado.</p>
            
            <!-- Elemento <abbr>-->
            <p>Pasa el puntero por encima de la siguiente etiqueta abbr: <abbr title="Hypertext Markup Language">HTML</abbr></p>
            
            <!-- Elemento <time>-->
            <time>15s</time>
            
            <!-- Elemento <code>-->
            <code>h1{color:red;}</code>  
            
            <!-- Elemento <var>-->
            <p>El bucle no se detiene hasta que <var>centinela</var> sea igual a 0.</p> 
            
            <!-- Elemento <samp>-->
            <p>Al presionar e botón aparecerá una ventana con el mensaje: <samp>Bienvenido</samp>
            </p>
            
            <!-- Elemento <kbd>-->
            <p> Si está conforme escriba presione <kbd>sí</kbd>. Si no, pulse <kbd>no</kbd>.
            </p>
            
            <!-- Elementos <sub> <sup>-->
            <p>La fórmula química de agua es H<sub>2</sub>O</p>
            <p>Trade Mark <sup>TM</sup></p>
            
            <!-- Elemento <i>-->
            <i>Texto en italica</i>
            
            <!-- Elemento <b>-->
            <b>Texto en negrita</b>
            
            <!-- Elemento <u>-->
            <u>Texto subrayado</u>
            
            <!-- Elemento <mark>-->
            <p>El siguiente texto tiene mucha importancia y quiero resaltarlo: <mark>HTML5</mark></p>
            
            <!-- Elemento <span>-->
            <span>Texto </span><span>en </span><span>línea.</span>
            
            <!-- Elemento <br>-->
            <br>
            
            <!-- Elemento <wbr>-->       <p>https://www.eniun.com<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>
            

            0

            Hiperenlaces: valores del atributo href

            Como hemos visto, el elemento <a> o hiperenlace crea un enlace a otra página o archivo. Además, también puede enlazar a una sección de la misma página mediante marcadores, a un correo electrónico o a un teléfono, entre otras opciones.

            Valores del atributo href: vamos a ver cómo crear un enlace para llamar a un número de teléfono con tel y para enviar un correo con mailto.

            <!-- Enviar un correo con mailto-->
            <a href="mailto:info@eniun.com">Enviar correo a Eniun</a><br>
            <!-- Llamar por teléfono con tel-->
            <a href="tel:+34666666666">Llamar por teléfono a 666 666 666</a>
            


            Ejemplo

            dark

            Valores del atributo target: vamos a abrir un enlace en una página aparte mediante el atributo target y el valor _blank.

            <!-- Abrir enlace en una página aparte -->
            <a href="https://www.eniun.com" target="_blank">Enlace 1</a>
             
            <!-- Abrir enlace en la misma página -->
            <a href="https://www.eniun.com" target="_self">Enlace 2</a>
            


            Ejemplo

            dark

            3.3. Sintaxis para caracteres especiales

            Dentro de una página web no podemos poner directamente los caracteres «<» Y «>» porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas HTML.

            Para cierto tipo de caracteres, es necesario utilizar otra sintaxis o codificación de caracteres que suele disponer de un ampersand seguido de su nombre identificativo y un punto y coma. A continuación se muestra un ejemplo de entidades:

            &amp;&
            &lt;<
            &quot;“
            &gt;>
            &copy;©
            &divide;÷
            &euro;€

            Aquí puedes ver una tabla ASCII estándar con los nombres de las entidades en HTML: ascii.cl/es/codigos-html.htm

            Comprueba tu aprendizaje

            La etiqueta span:

            ¡Bien! ¡Has fallado!

            ¿Qué etiqueta representa un salto de línea?

            ¡Bien! ¡Has fallado!

            Para representar un texto en cursiva podemos emplear la etiqueta:

            ¡Bien! ¡Has fallado!

            ¿Qué etiqueta define una lista ordenada de elementos?

            ¡Bien! ¡Has fallado!

            ¿Qué etiqueta representa un cambio de tema entre párrafos?

            ¡Bien! ¡Has fallado!

            HTML. Contenido y texto
            ¡Muy bien!
            Sigue repasando...
            Compartir

            UD2. HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Marcos o frames, una tecnología obsoleta
            • 12. Etiquetas HTML para acceso directo en Android e iPhone
            • 13. Metaetiquetas o metatags para redes sociales
            • 14. Cómo usar Github y SourceTree para publicar contenido
            • 15. Repositorio Git en Visual Studio Code
            • 16. Resumen HTML
            • 17. Referencias y recursos HTML

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results