En este artículo, conoceremos el párrafo HTML y su implementación básica a través de los ejemplos. La etiqueta <p> en HTML define un párrafo. Estos tienen etiquetas de apertura y cierre. Entonces, todo lo mencionado dentro de <p> y </p> se trata como un párrafo. La mayoría de los navegadores leen una línea como un párrafo incluso si no usamos la etiqueta de cierre, es decir, </p>, pero esto puede generar resultados inesperados. Por lo tanto, es una buena convención y debemos usar la etiqueta de cierre.
Sintaxis:
<p> Content </p>
Ejemplo 1: En este ejemplo, estamos usando la etiqueta <p> que se usa para párrafos en HTML.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GeeksforGeeks</h2> <!-- Use of <p> tag --> <p>A computer science portal for geeks.</p> </body> </html>
Producción:
Etiqueta HTML <p>
Ejemplo 2 : este ejemplo explica la etiqueta HTML <p>.
HTML
<!DOCTYPE html> <html> <body> <p>A Computer Science portal for geeks.</p> <p>It contains well written, well thought articles.</p> </body> </html>
Salida :
Múltiples etiquetas <p>
Puntos clave: cuando miramos la página web, vemos que hay pocos espacios agregados antes y después de un párrafo. HTML hace esto por defecto. Veamos algunas propiedades de la etiqueta de párrafo:
- Como ya se mencionó, la etiqueta <p> automáticamente agrega espacio antes y después de cualquier párrafo, que son básicamente márgenes agregados por el navegador.
- Si un usuario agrega varios espacios, el navegador los reduce a un solo espacio.
- Si un usuario agrega varias líneas, el navegador las reduce a una sola línea.
- De forma predeterminada, la visualización del elemento Párrafo está configurada en «bloquear», que puede cambiar usando CSS . Esto significa que si agrega otro párrafo a la página web, el siguiente párrafo se insertará en la siguiente línea de la página web.
Ejemplo: Este ejemplo explica la etiqueta HTML <p> que tiene varias líneas.
HTML
<!DOCTYPE html> <html> <body> <p> This paragraph has multiple lines. But HTML reduces them to a single line, omitting the carriage return we have used. </p> <p> This paragraph has multiple spaces. But HTML reduces them all to a single space, omitting the extra spaces and line we have used. </p> </body> </html>
Salida :
<p> etiqueta con varias líneas
Etiqueta <br>: hay una manera de que el HTML sepa dónde el navegador necesita cambiar las líneas mediante el uso de laetiqueta <br> . Estas etiquetas no tienen ninguna etiqueta de cierre. Entonces, solo una etiqueta de apertura cambiará la línea.
Sintaxis:
<br>
Ejemplo : este ejemplo explica la etiqueta <br> dentro de la etiqueta <p> para agregar el salto de línea.
HTML
<!DOCTYPE html> <html> <body> <p> This paragraph has multiple <br />lines. But HTML reduces them <br />to a single line, omitting <br />the carriage return we have used. </p> </body> </html>
Salida :
Uso de la etiqueta <br> dentro de la etiqueta <p>
Atributo de alineación : la etiqueta <p> admite específicamente el atributo de alineación y nos permite alinear nuestros párrafos a la izquierda, a la derecha o al centro.
Sintaxis:
<p align="value">
Ejemplo : este ejemplo explica el atributo align para alinear el contenido en la etiqueta <p>.
HTML
<!DOCTYPE html> <html> <body> <p align="center">Welcome Geeks</p> <p align="left">A Computer Science portal for geeks.</p> <p align="right">It contains well written, well thought articles.</p> </body> </html>
Salida :
Uso del atributo de alineación en la etiqueta <p>
Etiqueta <pre> : hemos visto cómo la etiqueta de párrafo ignora todos los cambios de líneas y espacios adicionales dentro de un párrafo, pero hay una manera de preservar esto mediante el uso de laetiqueta <pre> . También contiene una etiqueta de apertura y otra de cierre. Muestra un texto dentro de un alto y ancho fijo y conserva las líneas y espacios adicionales que usamos.
Sintaxis:
<pre> Content </pre>
Ejemplo : este ejemplo explica el uso de la etiqueta <pre> en la etiqueta <p>.
HTML
<!DOCTYPE html> <html> <body> <pre> This paragraph has multiple lines. But it is displayed as it is unlike the paragraph tag. </pre> <pre> This paragraph has multiple spaces. But it is displayed as it is unlike the paragraph tag. </pre> </body> </html>
Salida :
Uso de la etiqueta <pre> en la etiqueta <p>
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Microsoft borde 12
- Firefox 1
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Chinmoy Lenka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA