Aprenda a usar elementos semánticos HTML y atributos para definir las secciones principales de su página web, como el encabezado, la navegación, el contenido, la barra lateral y el pie de página.

The element in HTML5 is a semantic element that is meant to represent the main content of a web page. The main element is used to identify and encapsulate the primary content of the page, making it easier for both users and search engines to understand the central topic or focus of the web page. Typically, a web page should have only one element, and it often includes an element as the main heading followed by various other content elements such as paragraphs ( ), images ( ), lists ( and ), tables ( ), and more, depending on the specific content of the page. This helps in organizing the page's structure and enhances its accessibility and search engine optimization (SEO).

The footer element in HTML is like a webpage's signature. 🖋️ It's the bottom part, akin to a book's final chapter, offering closure and extra details. 📚 In this space, you'll find important information like copyrights, contact details, and social media links. It's the website's way of saying goodbye, providing a warm handshake and inviting further exploration! 👋✨

Headings ( to ): 📚 Headings define content hierarchy. is the main title, to are subheadings. : 📑 Divides content into topics, like chapters in a book. : 📰 Represents a standalone piece, akin to an article in a magazine. and : 🏷️ contains intro content or navigation, holds contact info or links. : 🌐 Contains navigation links, similar to a book's table of contents. : 📦 A versatile container for grouping and styling elements in a layout.

In HTML (Hypertext Markup Language), you define the main sections of a web page using a variety of elements. These elements help structure your page and provide semantic meaning to different parts of the content. Here are the main sections typically used in a web page: : This is the root element that encloses the entire web page. : The element contains meta-information about the document, such as the title of the page, links to external resources (stylesheets, scripts, icons), and other metadata. : Inside the , the element is used to define the title of the web page that appears in the browser's title bar or tab.

Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.

Cómo utilizar elementos semánticos HTML para secciones de páginas Web

1 Elementos semánticos

Añade tu opinión

Samuel O. Francis

UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK Member
Denunciar la contribución
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header> <main> <h2>Featured Content</h2> <p>This is the main content of the web page.</p> </main> <aside> <h3>Sidebar</h3> <p>Additional information or links.</p> </aside> <footer> <p>© 2023 My Website</p> </footer> </body> </html>

Traducido

Recomendar
Mehmood Ul Hasnain

Your Virtual Tech Partner | Web Development, SMM, SEO, Administration ,Sponsorship License,
Denunciar la contribución
In HTML (Hypertext Markup Language), you define the main sections of a web page using a variety of elements. These elements help structure your page and provide semantic meaning to different parts of the content. Here are the main sections typically used in a web page: <html>: This is the root element that encloses the entire web page. <head>: The <head> element contains meta-information about the document, such as the title of the page, links to external resources (stylesheets, scripts, icons), and other metadata. <title>: Inside the <head>, the <title> element is used to define the title of the web page that appears in the browser's title bar or tab.

Traducido

Recomendar
Komal Mathur Gupta

Software Engineer Lead@Capgemini | MBA in International Business Management | Digital Marketing | Web Development | Content Creation | Campaign Creation
Denunciar la contribución
Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.

Traducido

Recomendar
Abdulwahab Ashimi

Principal & Founder, EduKarma
Denunciar la contribución
You define the main sections of a web page in HTML using structural elements such as <header>, <nav>, <main>, <aside>, and <footer> to encapsulate distinct parts of the content.

Traducido

Recomendar
Mousa A.

Software Engineer | Full Stack .NET Developer | C# | Web API | Angular
Denunciar la contribución
Here is a simple example of semantic HTML code: <body> <header> <nav class="navbar"> <img src="logo.jpg" alt="Logo"> <ul class="nav-list"> <li><a class="nav-link" href="#section-1">About</a></li> <li><a class="nav-link" href="#section-2">Contact</a></li> </ul> </nav> </header> <main> <section id="section-1"> <header class="section-header> <h1 class="title">About</h1> </header> <article> <p>Some text...</p> </article> </section> <section id="section-2"> <header class="section-header"> <h1 class="title">Contact</h1> </header> <article> <p>Some text...</p> </article> </section> </main> <footer> <p>Some text...</p> </footer> </body>

Traducido

Recomendar

Cargar más contribuciones

2 Elemento principal

Añade tu opinión

Samuel O. Francis

UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK Member
Denunciar la contribución
The <main> element in HTML5 is a semantic element that is meant to represent the main content of a web page. The main element is used to identify and encapsulate the primary content of the page, making it easier for both users and search engines to understand the central topic or focus of the web page. Typically, a web page should have only one <main> element, and it often includes an <h1> element as the main heading followed by various other content elements such as paragraphs (<p>), images (<img>), lists (<ul> and <ol>), tables (<table>), and more, depending on the specific content of the page. This helps in organizing the page's structure and enhances its accessibility and search engine optimization (SEO).

Traducido

Recomendar
Sanish Manandhar

I post about programming concepts and personal finance | Software Engineer
Denunciar la contribución
<main> is like the heart of your web page. It holds the most essential content, making it easier for screen readers and search engines to understand what's important. It's where your core message resides.

Traducido

Recomendar
Hayk Asatryan

Mid+ Front End Web Developer, Tutor & Volunteer 🌐 | Guiding Future Developers 🧑💻 | Creating Modern Websites 🔥
Denunciar la contribución
😊 The main element in HTML is the sturdy foundation of your webpage, akin to a building's base. 🏗️ It houses the core content, acting as the focal point guiding visitors through your web story. 📖 Just like a captivating headline in a newspaper, the <main> tag encapsulates the essence of your content, including the main heading (<h1>) and supporting elements like paragraphs, images, lists, and tables. 🖼️ It's the vibrant storyteller of your webpage, where your message comes to life, engaging and enchanting your audience! ✨

Traducido

Recomendar
Aayush Khandelwal

Full Stack, JavaScript | React | Next | NodeJS | Passionate about building experiences on Web and Mobile
Denunciar la contribución
The <main> element in HTML is used to define the main content area of a web page. It should contain the primary content of the page, excluding any header, footer, or navigation elements. The <main> element helps to structure the content of a webpage in a semantic and accessible way, making it easier for both users and search engines to understand the focal point of the page. By appropriately utilizing the <main> element, developers can enhance the organization and clarity of their web content, improving the overall user experience.

Traducido

Recomendar
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Denunciar la contribución
the <main> element is used to identify the most important content on a web page. It should contain all of the content that is essential to the user's understanding of the page. Here is a short example of how to use the <main> element: <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <header> <h1>My Website</h1> </header> <main> <h2>This is the main content of my page.</h2> </main> <footer> <p>Copyright 2023 My Website</p> </footer> </body> </html>

Traducido

Recomendar

Cargar más contribuciones

3 Elemento del artículo

Añade tu opinión

Hayk Asatryan

Mid+ Front End Web Developer, Tutor & Volunteer 🌐 | Guiding Future Developers 🧑💻 | Creating Modern Websites 🔥
Denunciar la contribución
Headings (<h1> to <h6>): 📚 Headings define content hierarchy. <h1> is the main title, <h2> to <h6> are subheadings. <section>: 📑 Divides content into topics, like chapters in a book. <article>: 📰 Represents a standalone piece, akin to an article in a magazine. <header> and <footer>: 🏷️ <header> contains intro content or navigation, <footer> holds contact info or links. <nav>: 🌐 Contains navigation links, similar to a book's table of contents. <div>: 📦 A versatile container for grouping and styling elements in a layout.

Traducido

Recomendar
Thomas Theunen

Helping developers master Salesforce Commerce Cloud. Head of Commerce at FORWARD, reporting via the Rhino Inquisitor + Golden Hoodie Recipient + MVP & Speaker at Salesforce Events
Denunciar la contribución
It can also be nested inside other HTML elements, such as <main>, <section>, or another <article>. This allows developers to create a logical and meaningful structure for their content that is easy to read and understand.

Traducido

Recomendar
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Denunciar la contribución
The <article> is a semantic element used to wrap self-contained pieces of content, such as blog posts, news articles, or product descriptions. It helps browsers and search engines understand the structure of your web page and display the content correctly. Exemple : <article> <h2>This is a blog post</h2> <p>This is the body of the blog post.</p> </article>

Traducido

Recomendar
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
Denunciar la contribución
O <article> é o elemento do artigo e dentro dele são utilizados outros elementos: <header>: Para cabeçalhos específicos do artigo. <section>: Para dividir o artigo em seções lógicas. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Para títulos e subtítulos. <figure>: Para incorporar imagens ou outros conteúdos multimídia. <figcaption>: Para fornecer uma legenda para o conteúdo de uma <figure>. <blockquote>: Para citações. <cite>: Para citar a origem ou autoria de um trabalho. <p>: Para parágrafos de texto. <footer>: Para rodapés específicos do artigo.

Traducido

Recomendar
Aayush Khandelwal

Full Stack, JavaScript | React | Next | NodeJS | Passionate about building experiences on Web and Mobile
Denunciar la contribución
The <article> element in HTML is utilized to define an independent, self-contained piece of content within a web page. It represents a standalone unit, such as a blog post, news article, forum post, or comment. The <article> element helps to semantically structure the content, making it easier for both users and search engines to identify and understand distinct pieces of information. By enclosing related content within <article> tags, developers can enhance the organization and clarity of their web pages, improving accessibility, SEO, and overall user experience.

Traducido

Recomendar

Cargar más contribuciones

4 Elemento de sección

Añade tu opinión

Utkarsh Anand

Software Engineer @ Quantive | Open-Source Maintainer @ ConvoForm.com | Actively Seeking Full Stack Engineer Roles | Expertise in Next.js & React.js
Denunciar la contribución
Emphasizing semantic HTML elements like <header>, <nav>, <main>, <aside>, and <footer> is crucial for web page structure. Avoid overusing <div> tags for layout. Use ARIA roles for accessibility. Be mindful of nesting <section> elements to maintain simplicity. Prioritize clean, user-friendly code.

Traducido

Recomendar
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Denunciar la contribución
The <section> is a semantic used to wrap related groups of content on a web page. It helps browsers and search engines understand the structure of your page and display the content correctly. Exemple : <section> <h2>This is a section of my web page</h2> <p>This is the content of the section.</p> </section>

Traducido

Recomendar
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
(editado)
Denunciar la contribución
Os elementos de seção são utilizados para organizar e estruturar o conteúdo dentro do html, segue abaixo alguns exemplos e suas descrições: <header>: Cabeçalho da página ou de uma seção. <nav>: Uma seção de navegação. <aside>: Representa conteúdo que está tangencialmente relacionado ao conteúdo da página, é o conteúdo que está na barrada lateral do site. <main>: Define o conteúdo principal da página, recomenda ser usado uma vez por página. <section>: Agrupa conteúdo relacionado dentro de uma página. <article>: Conteúdo independente e autocontido que pode ser distribuído e reutilizado independentemente. <footer>: Rodapé da página ou de uma seção.

Traducido

Recomendar

5 Elemento aparte

Añade tu opinión

Manish Methani

Building CODZIFY ❤️Learn, Customize and Launch Your App Quickly with Ready-to-Use Product Templates 100x times faster using No-Code Tool FlutterFlow.
Denunciar la contribución
To understand the <aside> element, consider a news website. The main content of an article might include the headline, the article text, and images. However, there's additional information that's related but not central to the article itself. Inside the <aside> element for this news article, you could include these things: Related Articles: A list of links to other articles on the same topic or by the same author. Author Information: An author bio with a profile picture and social media links. Advertisements: Sidebar ads promoting products or services. Popular Tags: Tags or categories associated with the article, allowing readers to explore similar content. Recent Comments: A widget displaying recent user comments on the article.

Traducido

Recomendar
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Denunciar la contribución
The <aside> is a semantic element used to wrap related content that is not essential to the main content of a web page. This can include sidebars, comments, and other secondary content. Exemple : <main> <h2>This is the main content of my page.</h2> </main> <aside> <h3>Sidebar content</h3> </aside>

Traducido

Recomendar
Aayush Khandelwal

Full Stack, JavaScript | React | Next | NodeJS | Passionate about building experiences on Web and Mobile
Denunciar la contribución
The <aside> element in HTML is used to present content that is related to the main content of the webpage but is not its primary focus. Typically displayed in a sidebar or alongside the main content, <aside> can include elements like supplementary information, related links, or advertisements. It helps organize content and provide additional context without distracting from the main narrative.

Traducido

Recomendar
sundaramoorthi J

Software Developer
Denunciar la contribución
The aside element in HTML is like a sidebar on a webpage. It holds stuff related but not crucial to the main content, like ads or notes. It can have its own headings and even go inside other sections. This helps users and search engines understand what's essential and what's extra on a page. For instance, on a blog, the aside might include links to related posts or advertisements.

Traducido

Recomendar
Sanaz Bashiri

Sr. E-Commerce Manager @ KoRo | Passionate about UX, CRM, & Web3
Denunciar la contribución
- Using semantic HTML elements has several benefits. Firstly, it improves the user experience (UX) by making it easier for assistive technologies like screen readers to understand the webpage's structure, thus aiding navigation for users with disabilities. - This practice can enhance accessibility (a11y). - It can boost search engine optimization (SEO) by allowing search engines to effectively crawl and index your content, potentially resulting in higher search rankings. - Semantic HTML provides better code interpretation for the browser, making it easier to maintain and update your website in the long run.

Traducido

Recomendar

6 Elemento de pie de página

Añade tu opinión

Hayk Asatryan

Mid+ Front End Web Developer, Tutor & Volunteer 🌐 | Guiding Future Developers 🧑💻 | Creating Modern Websites 🔥
Denunciar la contribución
The footer element in HTML is like a webpage's signature. 🖋️ It's the bottom part, akin to a book's final chapter, offering closure and extra details. 📚 In this space, you'll find important information like copyrights, contact details, and social media links. It's the website's way of saying goodbye, providing a warm handshake and inviting further exploration! 👋✨

Traducido

Recomendar
Aayush Khandelwal

Full Stack, JavaScript | React | Next | NodeJS | Passionate about building experiences on Web and Mobile
Denunciar la contribución
The <footer> element in HTML marks the footer section of a webpage. It typically contains information like copyright notices, contact details, and links to related pages.

Traducido

Recomendar

7 Esto es lo que más debe considerar

Este es un espacio para compartir ejemplos, historias o ideas que no encajan en ninguna de las secciones anteriores. ¿Qué más le gustaría añadir?

Añade tu opinión

William Almond
Denunciar la contribución
Let us not forget to consider ADA accommodation. It "is best practice to include a "skip to main section" hyperlink at the top of the body tag, like: <a href="#main" class="skip-to-main-content-link">Skip to main content</a> This can be made invisible with CSS but still be able to tab into it on page load.

Traducido

Recomendar
Er Piyush Gupta 🇮🇳⊞⌘

| Senior Web Developer and Digital Marketing Manager @ We Care Services / Podcaster / Digital Creator |
Denunciar la contribución
<!DOCTYPE html> <html> <head> <title>My Webpage</title> </head> <body> <main> <h1>This is the main content of my webpage.</h1> <p>This is a paragraph of text in the main content section.</p> </main> </body> </html>

Traducido

Recomendar
Dinesh Kumar R

Cloud Solution Provider | Shipping | Logistics | Transportation | Hospital Information System | Freight Forwarding Software | NVOCC Software | Container Trading & Leasing Software | Depot Management Solution | CRM & more
Denunciar la contribución
In HTML, you define the main sections of a web page using structural elements. The key elements include: 1. `<header>`: Typically contains the website's logo, navigation menu, and introductory content. 2. `<main>`: Houses the primary content of the webpage, excluding header, footer, and sidebars. 3. `<section>`: Groups related content within an `<article>`. Use this element to divide content logically. 4. `<footer>`: Typically includes copyright information, contact details, and other content at the bottom of the page. These structural elements help browsers and assistive technologies understand the page's hierarchy, enhancing accessibility and SEO.

Traducido

Recomendar
Jeff Claybrook

Product Manager at Arena Edge
Denunciar la contribución
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <main> <section> <h2>Section A</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </section> <section> <h2>Section B</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </section> </main> <footer> <p>© 2024</p> </footer> </body> </html>

Traducido

Recomendar
Milan Polomac

Senior Frontend Engineer at Funnelish
Denunciar la contribución
Envision end result as an image and try to split it up by importance of the message you are trying to pass to the audience. If you prioritize correctly content will fall into related section nicely as a peace of the puzzle. Always have the interest of your audience in mind!

Traducido

Recomendar

¿Cómo se definen las secciones principales de una página web usando HTML?

1

2

3

4

5

6

7

1 Elementos semánticos

2 Elemento principal

3 Elemento del artículo

4 Elemento de sección

5 Elemento aparte

6 Elemento de pie de página

7 Esto es lo que más debe considerar

HTML

Valorar este artículo

Gracias por tus comentarios

Más artículos sobre HTML

Lecturas más relevantes