Cómo implementar PHP en HTML

Tabla de contenidos

Cuando empezamos a programar con PHP llega un momento en que tenemos que usar fragmentos de códigos dentro de nuestros documentos HTML. 

Si estás empezando, quizás esto te resulte algo complicado y no sabes bien como implementarlo pero no te preocupes, en este artículo te voy a mostrar como hacerlo paso a paso para que no te pierdas en el camino.

Preparación del documento HTML

Lo primero que debemos de hacer es crear el documento HTML para que posteriormente incluyamos el código PHP dentro de él. 

Yo no voy a hacerlo muy complejo, así que voy a crear un documento HTML básico que solamente tendrá la estructura básica de HTML y un encabezado h1 que dirá “Hola mundo”, donde este texto irá imprimido con PHP y no con HTML.

Importante: El documento de momento se llamará index.html, en el siguiente punto lo cambiaremos y te explicaré porqué. 

				
					<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Incluir PHP en HTML</title>
</head>
<body>
    <h1> </h1>
	
</body>
				
			

Implementar PHP dentro de HTML

Una vez tenemos creado nuestro documento HTML, ahora tenemos que añadir el fragmento de código de PHP que queramos utilizar y donde queremos que aparezca.

Me explico, si lo que queremos es imprimir la frase “hola mundo” dentro de la etiqueta h1, tendremos que escribir el fragmento dentro de estas etiquetas, como si de un texto normal se tratase, usando las etiquetas de apertura y cierre de php.

Si recordamos, en PHP si queremos imprimir un texto, tenemos que usar la función echo seguido del texto a imprimir, pues esto sería igual, solo que tenemos que añadirlo dentro de las etiquetas h1.

				
					<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Incluir PHP en HTML</title>
</head>
<body>
    <h1> <?php echo "Hola mundo" ?> </h1>
	
</body>
				
			

Después de haber realizado estos cambios en tu código y los guardas, si vuelves a cargar el código en tu navegador vas a encontrarte con un problema… 

Y es que tu web no está interpretando correctamente el código PHP y en vez de salir por pantalla Hola Mundo, la pantalla aparece en blanco.

Pero más curioso todavía, si inspeccionas el código fuente de tu código desde el navegador, el código PHP que hemos incluido aparece comentado.

fragmento de código php en html comentado
Fragmento de código PHP y HTML visto desde las herramientas de desarrollo de Google Chrome

¿Esto a que se debe?

Bien, esto quería que lo vierais ustedes mismos porque aquí viene una lección muy importante y es que, al trabajar con código PHP…

Ya no podemos tener la extensión de nuestro archivo como .html, sino que debemos de renombrar nuestro archivo con la extensión .php

Esta es la manera que tenemos de decirle a nuestro proyecto que estamos trabajando al menos con una línea de código con el lenguaje de PHP.

Conclusión

Esta es la manera que tenemos de decirle a nuestro proyecto que estamos trabajando al menos con una línea de código con el lenguaje de PHP.

Espero que este pequeño tutorial te haya servido para aclarar tus dudas y hayas podido implementar correctamente tu código de PHP en tus documentos HTML.

Si quieres dar un paso más y quieres que te enseñe PHP desde cero, puedes acceder a mi formación Programador Sin Límites, donde te enseño todo esto junto con otros lenguajes de programación.

Inscríbete a mi newsletter

Al suscribirte a mi newsletter recibirás un correo con el nuevo contenido que vaya subiendo sobre consejos para desarrolladores web.

Mis cursos
Logo WebPro Academy
Crea páginas web y domina el marketing digital
Crea páginas web con WordPres + Elementor Pro
Programador Sin Límites
Domina HTML y CSS

Enlaces de interés

Entradas similares

Como implementar código PHP en documento HTML
Cómo implementar PHP en HTML

En esta entrada te enseñaré como puedes añadir código PHP dentro de un documento HTML explicado de una forma sencilla para principiantes.

¡Espera! ¿Sabías estas 3 cosas?

Si el curso no es lo que te esperabas avísanos en los primeros 30 días y te devolvemos tu dinero

Tendrás acceso de por vida a las actualizaciones y al contenido del curso

Pertenecerás a la mejor comunidad de WordPress y publicidad digital para aclarar tus dudas