Lenguaje de marcado estándar para crear páginas web, las siglas significan Hypertext Markup Language (Lenguaje de Marcado de Hipertexto), se utiliza para estructurar y presentar el contenido de una página web a través de etiquetas y elementos que indican cómo debe verse y funcionar la información en un navegador web.
Es la base fundamental de cualquier página web en internet, permite organizar y formatear el contenido de manera que sea legible y accesible para los usuarios, así como para los motores de búsqueda. HTML es indispensable para crear sitios funcionales y navegables.HTML es un lenguaje fácil de aprender y de usar, lo que lo hace accesible para personas con diferentes niveles de experiencia en programación y diseño web. Gracias a HTML, es posible crear sitios web interactivos, dinámicos y atractivos que pueden ser vistos por millones de personas en todo el mundo.
Los tabs en HTML son una forma de organizar y presentar información en una página web. Se utilizan para dividir el contenido en secciones que el usuario puede visualizar al hacer clic en las pestañas correspondientes. Cada pestaña muestra un conjunto de información distinta, permitiendo al usuario navegar de forma más intuitiva y ordenada por el contenido de la página.
En el siguiente ejemplo se crean tabs utlizando HTML, CSS, y JavaScript. Al hacer click en un tab, se muestra el contenido correspondiente y se oculta el resto. El código CSS le da estilo a los tabs y el script en JavaScript se encarga de mostrar u ocultar el contenido según el botón de tab que se haya seleccionado.
HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tabs</title><link rel="stylesheet" href="styles.css"></head><body><div class="tabs"> <button class="tablink" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablink" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablink" onclick="openTab(event, 'tab3')">Tab 3</button> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>This is the content of tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>This is the content of tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>This is the content of tab 3.</p> </div></div><script src="script.js"></script></body></html>
CSS (styles.css):
body { font-family: Arial, sans-serif;}.tabs { display: flex;}.tablink { background-color: #f1f1f1; border: 1px solid #ccc; padding: 10px 15px; cursor: pointer;}.tabcontent { display: none; padding: 10px;}.tabcontent.active { display: block;}
Script (script.js):
function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active");}