Erfahren Sie, wie Sie semantische HTML-Elemente und -Attribute verwenden, um die Hauptabschnitte Ihrer Webseite zu definieren, z. B. die Kopfzeile, die Navigation, den Inhalt, die Seitenleiste und die Fußzeile.

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.

So verwenden Sie semantische HTML-Elemente für Webseitenabschnitte

1 Semantische Elemente

Fügen Sie Ihre Sichtweise hinzu

Samuel O. Francis

Founder | UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK
Beitrag melden
<!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>

Übersetzt

Gefällt mir
Mehmood Ul Hasnain

Web Developer | Shopify Specialist | IT Consultant | Your Partner in Digital Transformation
Beitrag melden
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.

Übersetzt

Gefällt mir
Komal Mathur Gupta

Application Consultant @Capgemini | MBA in International Business Management | Digital Marketing | B2B Marketing | Content Creation | Campaign Creation | Social Media Marketing
Beitrag melden
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.

Übersetzt

Gefällt mir
Abdulwahab Ashimi

Principal, EduKarma. I write about Technology, Business & Leadership, innovate possibilities with EduKarma and inspire greatness through TrailForge et Co.
Beitrag melden
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.

Übersetzt

Gefällt mir
Mousa A.

Software Engineer | Full Stack .NET Developer | C# | Web API | Angular
Beitrag melden
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>

Übersetzt

Gefällt mir

2 Hauptelement

Fügen Sie Ihre Sichtweise hinzu

Samuel O. Francis

Founder | UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK
Beitrag melden
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).

Übersetzt

Gefällt mir
Sanish Manandhar

I post about programming concepts and personal finance | Software Engineer
Beitrag melden
<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.

Übersetzt

Gefällt mir
Hayk Asatryan

UWC Dilijan ‘27
Beitrag melden
😊 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! ✨

Übersetzt

Gefällt mir
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Beitrag melden
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.

Übersetzt

Gefällt mir
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Beitrag melden
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>

Übersetzt

Gefällt mir

3 Artikel-Element

Fügen Sie Ihre Sichtweise hinzu

Hayk Asatryan

UWC Dilijan ‘27
Beitrag melden
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.

Übersetzt

Gefällt mir
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
Beitrag melden
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.

Übersetzt

Gefällt mir
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Beitrag melden
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>

Übersetzt

Gefällt mir
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
Beitrag melden
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.

Übersetzt

Gefällt mir
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Beitrag melden
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.

Übersetzt

Gefällt mir

4 Abschnittselement

Fügen Sie Ihre Sichtweise hinzu

Utkarsh Anand

Enterprise grade AI voice agents for every customer conversation | Oration.AI - Founding Engineer | ConvoForm.com - Open source Maintainer
Beitrag melden
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.

Übersetzt

Gefällt mir
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Beitrag melden
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>

Übersetzt

Gefällt mir
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
(bearbeitet)
Beitrag melden
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.

Übersetzt

Gefällt mir

5 Beiseite-Element

Fügen Sie Ihre Sichtweise hinzu

Manish Methani

Founder @codzify - Learn to Build Real Apps 10X Faster with FlutterFlow at Codzify
Beitrag melden
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.

Übersetzt

Gefällt mir
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Beitrag melden
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>

Übersetzt

Gefällt mir
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Beitrag melden
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.

Übersetzt

Gefällt mir
sundaramoorthi J

Software Developer
Beitrag melden
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.

Übersetzt

Gefällt mir
Sanaz Bashiri Adli

MarCom (Marketing Communications) Specialist
Beitrag melden
- 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.

Übersetzt

Gefällt mir

6 Footer-Element

Fügen Sie Ihre Sichtweise hinzu

Hayk Asatryan

UWC Dilijan ‘27
Beitrag melden
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! 👋✨

Übersetzt

Gefällt mir
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Beitrag melden
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.

Übersetzt

Gefällt mir

7 Hier ist, was Sie sonst noch beachten sollten

Dies ist ein Ort, an dem Sie Beispiele, Geschichten oder Erkenntnisse teilen können, die in keinen der vorherigen Abschnitte passen. Was möchten Sie noch hinzufügen?

Fügen Sie Ihre Sichtweise hinzu

William Almond
Beitrag melden
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.

Übersetzt

Gefällt mir
Er Piyush Gupta 🇮🇳⊞⌘

| Senior Web Developer and Digital Marketing Manager @ We Care Services / Podcaster / Digital Creator |
Beitrag melden
<!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>

Übersetzt

Gefällt mir
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
Beitrag melden
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.

Übersetzt

Gefällt mir
Jeff Claybrook

Product Manager at Silver Bow Technology Group
Beitrag melden
<!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>

Übersetzt

Gefällt mir
Milan Polomac

Senior Frontend Engineer at Funnelish
Beitrag melden
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!

Übersetzt

Gefällt mir

Wie definiert man die Hauptabschnitte einer Webseite mit HTML?

1

2

3

4

5

6

7

1 Semantische Elemente

2 Hauptelement

3 Artikel-Element

4 Abschnittselement

5 Beiseite-Element

6 Footer-Element

7 Hier ist, was Sie sonst noch beachten sollten

HTML

Diesen Artikel bewerten

Vielen Dank für Ihr Feedback

Weitere Artikel zu HTML

Relevantere Lektüre