CINXE.COM

<!DOCTYPE html> <html lang="de" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="https://lightweb-media.de/xmlrpc.php"> <title>Semantisches HTML • 2024 • Lightweb Media GmbH</title> <link rel="preload" as="font" href="https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-header-small.svg" crossorigin><link rel="preload" data-rocket-preload as="image" href="https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-media-logo.svg" fetchpriority="high"> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://lightweb-media.de/barrierefreiheit/semantisches-html/" /> <meta property="og:locale" content="de_DE" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Semantisches HTML • 2024 • Lightweb Media GmbH" /> <meta property="og:description" content="In der heutigen digitalen Welt ist es wichtiger denn je, dass Deine Webseite nicht nur gut aussieht, sondern auch gut strukturiert und für alle zugänglich ist. Ein Schlüssel dazu ist die Verwendung von semantischem HTML. In diesem Artikel erfährst Du alles, was Du über semantisches HTML wissen musst und wie Du es in Deinen WordPress-Projekten […]" /> <meta property="og:url" content="https://lightweb-media.de/barrierefreiheit/semantisches-html/" /> <meta property="og:site_name" content="Lightweb Media GmbH" /> <meta property="article:publisher" content="https://www.facebook.com/lightweb.media.agentur" /> <meta property="article:author" content="https://www.facebook.com/jo.bj.35/" /> <meta property="article:section" content="Barrierefreiheit" /> <meta property="og:updated_time" content="2024-08-02T23:15:34+02:00" /> <meta property="og:image" content="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-semantisches-html.png" /> <meta property="og:image:secure_url" content="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-semantisches-html.png" /> <meta property="og:image:width" content="800" /> <meta property="og:image:height" content="450" /> <meta property="og:image:alt" content="barrierefreiheit semantisches html png" /> <meta property="og:image:type" content="image/png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Semantisches HTML • 2024 • Lightweb Media GmbH" /> <meta name="twitter:description" content="In der heutigen digitalen Welt ist es wichtiger denn je, dass Deine Webseite nicht nur gut aussieht, sondern auch gut strukturiert und für alle zugänglich ist. Ein Schlüssel dazu ist die Verwendung von semantischem HTML. In diesem Artikel erfährst Du alles, was Du über semantisches HTML wissen musst und wie Du es in Deinen WordPress-Projekten […]" /> <meta name="twitter:image" content="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-semantisches-html.png" /> <meta name="twitter:label1" content="Verfasst von" /> <meta name="twitter:data1" content="Joel Burghardt" /> <meta name="twitter:label2" content="Lesedauer" /> <meta name="twitter:data2" content="5 Minuten" /> <link rel="alternate" type="application/rss+xml" title="Lightweb Media GmbH » Semantisches HTML Kommentar-Feed" href="https://lightweb-media.de/barrierefreiheit/semantisches-html/feed/" /> <link data-minify="1" rel='stylesheet' id='lightweb-gutenberg-style-css-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/plugins/lightweb-gutenberg_plugin/dist/lightweb.css?ver=1730976862' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <style id='wp-block-library-inline-css' type='text/css'> :root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px;--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color)}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip:auto!important;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <link data-minify="1" rel='stylesheet' id='google_business_reviews_rating_wp_css-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/plugins/g-business-reviews-rating/wp/css/css.css?ver=1730976862' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='lwm-trust-slider-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/plugins/lwm-trust-slider/dist/main.css?ver=1730976862' type='text/css' media='all' /> <link rel='stylesheet' id='cmplz-general-css' href='https://lightweb-media.de/wp-content/plugins/complianz-gdpr/assets/css/cookieblocker.min.css?ver=1731667941' type='text/css' media='all' /> <link rel='stylesheet' id='lightweb-style-css' href='https://lightweb-media.de/wp-content/themes/lightweb-media_theme/style.css?ver=6.6.2' type='text/css' media='all' /> <link rel='stylesheet' id='lightweb-bs-css-css' href='https://lightweb-media.de/wp-content/themes/lightweb-media_theme/static/bootstrap.min.css?ver=6.6.2' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='lightweb-bs-icons-css-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/bootstrap-icons.css?ver=1730976862' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='lightweb-fonts-css-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/fonts.css?ver=1730976862' type='text/css' media='all' /> <link rel='stylesheet' id='lightweb-main-css-css' href='https://lightweb-media.de/wp-content/themes/lightweb-media_theme/dist/main.min.css?ver=2.1.1' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='lightweb-fixes-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/fixes.css?ver=1730976862' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='lightweb-slick-main-css-css' href='https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/slick/slick.css?ver=1730976862' type='text/css' media='all' /> <style id='generateblocks-inline-css' type='text/css'> .gb-container .wp-block-image img{vertical-align:middle;}.gb-grid-wrapper .wp-block-image{margin-bottom:0;}.gb-highlight{background:none;} </style> <style id='rocket-lazyload-inline-css' type='text/css'> .rll-youtube-player{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;}.rll-youtube-player:focus-within{outline: 2px solid currentColor;outline-offset: 5px;}.rll-youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.rll-youtube-player img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}.rll-youtube-player img:hover{-webkit-filter:brightness(75%)}.rll-youtube-player .play{height:100%;width:100%;left:0;top:0;position:absolute;background:url(https://lightweb-media.de/wp-content/plugins/wp-rocket/assets/img/youtube.png) no-repeat center;background-color: transparent !important;cursor:pointer;border:none;}.wp-embed-responsive .wp-has-aspect-ratio .rll-youtube-player{position:absolute;padding-bottom:0;width:100%;height:100%;top:0;bottom:0;left:0;right:0} </style> <link rel='stylesheet' id='wp-block-paragraph-css' href='https://lightweb-media.de/wp-includes/blocks/paragraph/style.min.css?ver=6.6.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-heading-css' href='https://lightweb-media.de/wp-includes/blocks/heading/style.min.css?ver=6.6.2' type='text/css' media='all' /> <script type="text/javascript" id="ruigehond006_javascript-js-extra"> /* <![CDATA[ */ var ruigehond006_c = {"bar_attach":"fixed-top","bar_color":"#00bdb0","bar_height":".5vh","aria_label":"Lese-Prozess-Balken","mark_it_zero":"on","post_types":["post","case_studies"],"post_identifier":".post-12661.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-barrierefreiheit","post_id":"12661"}; /* ]]> */ </script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/wp-reading-progress/wp-reading-progress.min.js?ver=1.6.0" id="ruigehond006_javascript-js" data-rocket-defer defer></script> <script type="text/javascript" src="https://lightweb-media.de/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js" data-rocket-defer defer></script> <script type="text/javascript" src="https://lightweb-media.de/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js" data-rocket-defer defer></script> <script data-minify="1" type="text/javascript" src="https://lightweb-media.de/wp-content/cache/min/1/wp-content/plugins/g-business-reviews-rating/wp/js/js.js?ver=1730976863" id="google_business_reviews_rating_wp_js-js" data-rocket-defer defer></script> <link rel="https://api.w.org/" href="https://lightweb-media.de/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://lightweb-media.de/wp-json/wp/v2/posts/12661" /><link rel='shortlink' href='https://lightweb-media.de/?p=12661' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://lightweb-media.de/wp-json/oembed/1.0/embed?url=https%3A%2F%2Flightweb-media.de%2Fbarrierefreiheit%2Fsemantisches-html%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://lightweb-media.de/wp-json/oembed/1.0/embed?url=https%3A%2F%2Flightweb-media.de%2Fbarrierefreiheit%2Fsemantisches-html%2F&format=xml" /> <meta name="generator" content="performance-lab 3.5.1; plugins: "> <script type="application/ld+json">{"@context":"https://schema.org","@type":"LocalBusiness","name":"Lightweb Media GmbH","image":{"@type":"ImageObject","url":"https://lightweb-media.de/wp-content/uploads/2022/04/lightweb-media-logo.png","width":1500,"height":201},"telephone":"088233223320","url":"https://lightweb-media.de","address":{"@type":"PostalAddress","streetAddress":"Gebirgspionierstr 22","addressLocality":"Mittenwald","postalCode":"82481","addressRegion":"Bayern","addressCountry":"DE"},"aggregateRating":{"@type":"AggregateRating","ratingValue":"5","reviewCount":"22"},"priceRange":"$$","openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday"],"opens":"10:00","closes":"18:00"}],"geo":{"@type":"GeoCoordinates","latitude":"47.444967122266725","longitude":"11.270524769319094"}}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://lightweb-media.de/barrierefreiheit/semantisches-html/"},"headline":"Semantisches HTML","image":{"@type":"ImageObject","url":"https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-semantisches-html.png","width":800,"height":450},"datePublished":"2024-08-02T23:03:56+0000","dateModified":"2024-08-02T23:15:34+0000","author":{"@type":"Person","name":"Joel Burghardt","url":"https://lightweb-media.de/author/joel-burghardt"},"publisher":{"@type":"Organization","name":"Lightweb Media GmbH","logo":{"@type":"ImageObject","url":"https://lightweb-media.de/wp-content/uploads/2022/04/lightweb-media-logo.png"}},"description":null}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://lightweb-media.de/barrierefreiheit/semantisches-html/"},"headline":"Semantisches HTML","image":{"@type":"ImageObject","url":"https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-semantisches-html.png","width":800,"height":450},"datePublished":"2024-08-02T23:03:56+0000","dateModified":"2024-08-02T23:15:34+0000","author":{"@type":"Person","name":"Joel Burghardt","url":"https://lightweb-media.de/author/joel-burghardt"},"publisher":{"@type":"Organization","name":"Lightweb Media GmbH","logo":{"@type":"ImageObject","url":"https://lightweb-media.de/wp-content/uploads/2022/04/lightweb-media-logo.png"}},"description":null}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@graph":[{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"SEO Audit","url":"https:\/\/lightweb-media.de\/seo-audit-check\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"WordPress Theme","url":"https:\/\/lightweb-media.de\/wordpress-theme-erstellen-lassen\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Tools","url":"https:\/\/lightweb-media.de\/tools\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Blog","url":"https:\/\/lightweb-media.de\/blog\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Administration","url":"https:\/\/lightweb-media.de\/administration\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Sicherheit","url":"https:\/\/lightweb-media.de\/sicherheit\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"DSGVO","url":"https:\/\/lightweb-media.de\/dsgvo\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Webentwicklung","url":"https:\/\/lightweb-media.de\/webentwicklung\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Marketing","url":"https:\/\/lightweb-media.de\/marketing\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Barrierefreiheit","url":"https:\/\/lightweb-media.de\/barrierefreiheit\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"WordPress","url":"https:\/\/lightweb-media.de\/wordpress\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"Pagespeed","url":"https:\/\/lightweb-media.de\/pagespeed\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","id":"site-navigation","name":"SEO","url":"https:\/\/lightweb-media.de\/seo\/"}]}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"WebSite","name":"Lightweb Media GmbH","url":"https:\/\/lightweb-media.de","potentialAction":[{"@type":"SearchAction","target":"https:\/\/lightweb-media.de\/?s={search_term_string}","query-input":"required name=search_term_string"}]}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/lightweb-media.de\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/lightweb-media.de\/barrierefreiheit\/","name":"Barrierefreiheit"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/lightweb-media.de\/barrierefreiheit\/semantisches-html\/","name":"Semantisches HTML"}}]}</script> <style>.cmplz-hidden { display: none !important; }</style><script type="application/ld+json" id="lwm-product-schema"> { "@context": "http://schema.org", "@type": "Product", "name": "Lightweb Media GmbH", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.7", "reviewCount": "404", "bestRating":5, "worstRating":1 }, "description": "Wir bei Lightweb Media haben es uns zur Aufgabe gemacht, Deine digitalen Projekte auf das nächste Level zu bringen. Mit unserer Leidenschaft für Technologie unterstützen wir Dich dabei, Deine Visionen Wirklichkeit werden zu lassen. Unser erfahrenes Team aus Experten arbeitet engagiert und zielorientiert an Deinem Erfolg. Unser Anspruch ist Qualität. Durch unsere hohe Qualität und Expertise in den Bereichen SEO, Webentwicklung und WordPress setzen wir uns als Dein Partner für digitale Lösungen von anderen Anbietern ab. Vertraue auch Du auf Lightweb Media und lass uns gemeinsam Dein Projekt zum Erfolg führen.", "image": [ "https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-media-logo.svg" ], "brand": { "@type": "Brand", "name": "Lightweb Media GmbH" } } </script> <script id="lwm-faq-schema" type="application/ld+json"> {"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Was ist semantisches HTML?","acceptedAnswer":{"@type":"Answer","text":"Semantisches HTML (eng: Semantic HTML) bedeutet, dass Du HTML-Tags entsprechend ihrer Bedeutung und Funktion verwendest. Statt einfach nur Div-Container und Spans zu benutzen, wählst Du spezifische Tags, die den Inhalt Deiner Seite präzise beschreiben. Hier einige Beispiele: für den Kopfbereich Deiner Seite für Navigationsleisten für den Hauptinhalt für in sich geschlossene Inhalte wie Blog-Posts für Seitenleisten oder ergänzende Informationen für den Fußbereich"}},{"@type":"Question","name":"Warum ist semantisches HTML wichtig?","acceptedAnswer":{"@type":"Answer","text":"Semantisches HTML spielt Rolle bei der Verbesserung der Qualität, Zugänglichkeit und Benutzererfahrung von Webseiten im Internet. Hier sind die Hauptgründe, warum semantisches HTML als Schlüssel zu einem besseren Web angesehen wird:"}}]} </script> <style>#ruigehond006_wrap{z-index:10001;position:fixed;display:block;left:0;width:100%;margin:0;overflow:visible}#ruigehond006_inner{position:absolute;height:0;width:inherit;background-color:rgba(255,255,255,.2);-webkit-transition:height .4s;transition:height .4s}html[dir=rtl] #ruigehond006_wrap{text-align:right}#ruigehond006_bar{width:0;height:100%;background-color:transparent}</style> <style id="wpsp-style-frontend"></style> <link rel="icon" href="https://lightweb-media.de/wp-content/uploads/2022/03/cropped-lw-favicon-70x70.png.webp" sizes="32x32" /> <link rel="icon" href="https://lightweb-media.de/wp-content/uploads/2022/03/cropped-lw-favicon-360x360.png.webp" sizes="192x192" /> <link rel="apple-touch-icon" href="https://lightweb-media.de/wp-content/uploads/2022/03/cropped-lw-favicon-360x360.png.webp" /> <meta name="msapplication-TileImage" content="https://lightweb-media.de/wp-content/uploads/2022/03/cropped-lw-favicon-360x360.png" /> <style type="text/css" id="wp-custom-css"> .lightweight-accordion-title h3 { font-family: "GT Zirkon", sans-serif!important; font-weight: 400 !important; position: relative; font-size: 1.8rem!important; letter-spacing: -0.04em; word-spacing: -0.05em; font-weight: normal!important; } @media (max-width: 1200px) { .lightweight-accordion-title h3 { font-size: calc(1.325rem + .9vw)!important; } } .single-weekly-news .main-content .atomic { padding-left:10px; padding-right:10px; } /* table post 7738 */ @media (min-width: 501px) { body.postid-7738 table td:first-child { hyphens: auto; width: 238px; } } @media (max-width: 500px) { body.postid-7738 table tr { display: flex; flex-direction: column; } body.postid-7738 table tr td:first-child { padding-bottom: 0; font-weight: 700; } } a {word-break:break-all;} .post-teaser h2 a {word-break: break-word;} .main-content a {word-break:break-word;} #sib_signup_form_1 { background: #272b33; display: table; width: 100%; border-collapse: collapse; border-spacing: 0; empty-cells: show; min-width: 100%; font-size: 1em; padding:1rem; margin:1rem; color: #cfd5e0; margin-bottom:2em; } #sib_signup_form_1 em { text-align:center; } #sib_signup_form_1 label { display: inline-block; } .sib_signup_box_inside_1 { padding:1rem; } #sib_signup_form_1 h2 { text-align:center; margin-bottom:1rem!important; } #sib_signup_form_1 .flex-center { display:flex; width:100%; text-align:center; } #sib_signup_form_1 .flex-center em, #sib_signup_form_1 .flex-center button { margin:auto auto; min-height:50px; margin-top:1rem; margin-bottom:1.5rem; } .flex-center button { border-radius: 18px; font-size: .9rem; letter-spacing: 0.08em; padding: .5rem 1rem; } #sib_signup_form_1 .last p { display:flex; } #sib_signup_form_1 .last p span { padding-left:0.5em; } @media (min-width: 768px) { .cgt-wrapper, .sg-wrapper{ width: 125%; margin-left: -12.5%; } } .page-id-10655 .main-content ul:not([class*="ez-toc-list"]) li:not(:last-child){padding-bottom:0px; } .timo-specht{ border-radius:10px; } .timo-specht figure{ border-radius:10px; } figure.is-style-gradiant-caption img {border: 2px solid #00BDB0; border-bottom: none;} .no-pad {margin:-20px 0 -60px 0;} .kostentabelle .lightweb-alert {margin-bottom:0px;} @media (min-width: 768px) { .kostentabelle { width: 125%; margin-left: -12.5%; } } </style> <noscript><style id="rocket-lazyload-nojs-css">.rll-youtube-player, [data-lazy-src]{display:none !important;}</style></noscript><style id="rocket-lazyrender-inline-css">[data-wpr-lazyrender] {content-visibility: auto;}</style><meta name="generator" content="WP Rocket 3.17.2.1" data-wpr-features="wpr_defer_js wpr_minify_js wpr_preload_fonts wpr_lazyload_images wpr_lazyload_iframes wpr_automatic_lazy_rendering wpr_oci wpr_image_dimensions wpr_cache_webp wpr_minify_css wpr_desktop wpr_preload_links" /></head> <body class="post-template-default single single-post postid-12661 single-format-standard wp-embed-responsive wp-schema-pro-2.7.23" itemscope itemtype="https://schema.org/WebPage"> <header class="head fixed-top bg-white shadow-sm"> <div class="container"> <div class="d-flex justify-content-between align-items-center"> <div class="logo"> <a href="/" title="Lightweb Media"> <img fetchpriority="high" src="https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-media-logo.svg" width="200" height="27" alt="Lightweb Media" /> </a> </div> <div class="menus"> <div class="mobile-toggle-menu"> <button id="mobile-toggle-menu" class="justify-content-between align-items-center" aria-label="Menu öffnen"> <div class="lwm-menu" id="lwm-menu"> <div class="bar"></div> <div class="bar"></div> <div class="bar"> </div> </div> </button> </div> <div class="main-menu-container" id="main-menu-container"> <div class="main-menu"><ul id="main-menu" class="main-menu m-0 d-flex"><li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-8571 lvl-0"><a href="https://lightweb-media.de/seo-audit-check/">SEO Audit</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-8700 lvl-0"><a href="https://lightweb-media.de/wordpress-theme-erstellen-lassen/">WordPress Theme</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-7283 lvl-0"><a href="https://lightweb-media.de/tools/">Tools</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item nav-item-3648 lvl-0"><a href="https://lightweb-media.de/blog/">Blog</a><span id="toggle-3648" class="arrow lvl-0"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" width="24" height="24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg></span><div class="sub-menu-container container"><ul class="sub-menu lvl-0" id="menu-3646"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-12545 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/administration/">Administration</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-12544 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/sicherheit/">Sicherheit</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-9433 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/dsgvo/">DSGVO</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-2015 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/webentwicklung/">Webentwicklung</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-2016 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/marketing/">Marketing</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent nav-item nav-item-12669 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/barrierefreiheit/">Barrierefreiheit</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-2014 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/wordpress/">WordPress</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-2017 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/pagespeed/">Pagespeed</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-2012 lvl-1" style="flex: 0 0 calc( calc( 8.33333% * 4 ) - 1rem );"><a href="https://lightweb-media.de/seo/">SEO</a></li> </ul></div></li> </ul></div> <div class="menu-main-cta-container"><ul id="menu-main-cta" class=""><li><a href="https://lightweb-media.de/kontakt/" class="btn btn-orange pill">Kontakt</a></li> </ul></div><div class="socials"><ul id="socials" class=""><li><a title="facebook" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/lightweb.media.agentur"><i class="bi bi-facebook"></i></a></li> <li><a title="linkedin" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/lightweb-media-agentur/"><i class="bi bi-linkedin"></i></a></li> <li><a title="github" target="_blank" rel="noopener noreferrer" href="https://github.com/Lightweb-Media"><i class="bi bi-github"></i></a></li> </ul></div> </div> </div> <div class="menu-main-cta-container"><ul id="menu-main-cta-1" class=""><li><a href="https://lightweb-media.de/kontakt/" class="btn btn-orange pill">Kontakt</a></li> </ul></div> </div> </div> </header> <div class="hero"> <div data-style="background-image: url('https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-header-large.svg'); display: none;" class="hero-image large"></div> <div data-style="background-image: url('https://lightweb-media.de/wp-content/themes/lightweb-media_theme/images/lightweb-header-small.svg');" class="hero-image small"></div> <div class="hero-widget-top"> <div class="container"> <div class="hero-widget-content"> <div> <h1>Semantisches HTML</h1> </div> <div> <nav aria-label="breadcrumbs" class="rank-math-breadcrumb"><p><a href="https://lightweb-media.de/" data-wpel-link="internal" target="_self" rel="noopener noreferrer" title="Lightweb Media">Lightweb Media</a><span class="separator"></span><a href="https://lightweb-media.de/barrierefreiheit/" data-wpel-link="internal" target="_self" rel="noopener noreferrer" title="Barrierefreiheit">Barrierefreiheit</a></p></nav> </div> </div> </div> </div> </div> <div id="holder"> <div class="container main-content"> <div class="post-meta"> <span class="author"><i class="bi bi-person-circle"></i> Joel Burghardt</span> <span><i class="bi bi-calendar3"></i> 2. August 2024</span> <span><i class="bi bi-clock"></i> 5 Minuten Lesezeit</span> </div> <div class="single-post-content"> <div id="ez-toc-container" class="ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction"> <div class="ez-toc-title-container"> <p class="ez-toc-title" style="cursor:inherit">Inhaltsverzeichnis</p> <span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div> <nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#was_ist_semantisches_html" title="Was ist semantisches HTML?">Was ist semantisches HTML?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#warum_ist_semantisches_html_wichtig" title="Warum ist semantisches HTML wichtig?">Warum ist semantisches HTML wichtig?</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#verbesserte_zugaenglichkeit" title="Verbesserte Zugänglichkeit">Verbesserte Zugänglichkeit</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#bessere_suchmaschinenoptimierung_seo" title="Bessere Suchmaschinenoptimierung (SEO)">Bessere Suchmaschinenoptimierung (SEO)</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#verbesserte_wartbarkeit_und_lesbarkeit_des_codes" title="Verbesserte Wartbarkeit und Lesbarkeit des Codes">Verbesserte Wartbarkeit und Lesbarkeit des Codes</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#konsistenz_und_wiederverwendbarkeit" title="Konsistenz und Wiederverwendbarkeit">Konsistenz und Wiederverwendbarkeit</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#bessere_benutzererfahrung_ux" title="Bessere Benutzererfahrung (UX)">Bessere Benutzererfahrung (UX)</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#wie_du_semantisches_html_in_wordpress_einsetzt" title="Wie Du semantisches HTML in WordPress einsetzt">Wie Du semantisches HTML in WordPress einsetzt</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-9" href="#1_nutze_ein_semantisches_theme" title="1. Nutze ein semantisches Theme">1. Nutze ein semantisches Theme</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="#2_passe_dein_theme_an" title="2. Passe Dein Theme an">2. Passe Dein Theme an</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-11" href="#3_verwende_den_gutenberg-editor" title="3. Verwende den Gutenberg-Editor">3. Verwende den Gutenberg-Editor</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#4_erstelle_benutzerdefinierte_bloecke" title="4. Erstelle benutzerdefinierte Blöcke">4. Erstelle benutzerdefinierte Blöcke</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-13" href="#best_practices_fuer_semantisches_html" title="Best Practices für semantisches HTML">Best Practices für semantisches HTML</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-14" href="#liste_von_semantischen_html-tags" title="Liste von semantischen HTML-Tags">Liste von semantischen HTML-Tags</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-15" href="#struktur-tags" title="Struktur-Tags">Struktur-Tags</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#inhalts-tags" title="Inhalts-Tags">Inhalts-Tags</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-17" href="#tabellen-tags" title="Tabellen-Tags">Tabellen-Tags</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-18" href="#listen-tags" title="Listen-Tags">Listen-Tags</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-19" href="#formulare-tags" title="Formulare-Tags">Formulare-Tags</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-20" href="#fazit" title="Fazit">Fazit</a></li></ul></nav></div> <p>In der heutigen digitalen Welt ist es wichtiger denn je, dass Deine Webseite nicht nur gut aussieht, sondern auch gut strukturiert und für alle zugänglich ist. Ein Schlüssel dazu ist die Verwendung von semantischem HTML. In diesem Artikel erfährst Du alles, was Du über semantisches HTML wissen musst und wie Du es in Deinen WordPress-Projekten optimal einsetzen kannst.</p> <h2 class="wp-block-heading"><span class="ez-toc-section" id="was_ist_semantisches_html"></span>Was ist semantisches HTML?<span class="ez-toc-section-end"></span></h2> <p><strong>Semantisches HTML (eng: Semantic HTML)</strong> bedeutet, dass Du HTML-Tags entsprechend ihrer Bedeutung und Funktion verwendest. Statt einfach nur Div-Container und Spans zu benutzen, wählst Du spezifische Tags, die den Inhalt Deiner Seite präzise beschreiben. Hier einige Beispiele:</p> <ul class="wp-block-list"> <li><code><header></code> für den Kopfbereich Deiner Seite</li> <li><code><nav></code> für Navigationsleisten</li> <li><code><main></code> für den Hauptinhalt</li> <li><code><article></code> für in sich geschlossene Inhalte wie Blog-Posts</li> <li><code><aside></code> für Seitenleisten oder ergänzende Informationen</li> <li><code><footer></code> für den Fußbereich</li> </ul> <h2 class="wp-block-heading"><span class="ez-toc-section" id="warum_ist_semantisches_html_wichtig"></span>Warum ist semantisches HTML wichtig?<span class="ez-toc-section-end"></span></h2> <p>Semantisches HTML spielt Rolle bei der Verbesserung der Qualität, Zugänglichkeit und Benutzererfahrung von Webseiten im Internet. Hier sind die Hauptgründe, warum semantisches HTML als Schlüssel zu einem besseren Web angesehen wird:</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="verbesserte_zugaenglichkeit"></span>Verbesserte Zugänglichkeit<span class="ez-toc-section-end"></span></h3> <p>Semantische HTML-Tags liefern klare Hinweise auf die Struktur und den Inhalt einer Webseite, was für assistive Technologien wie Screen Reader entscheidend ist. Beispielsweise helfen Tags wie <code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><section></code>, <code><aside></code> und <code><footer></code> dabei, den Inhalt logisch zu gliedern und Benutzern mit Behinderungen ein besseres Verständnis der Seite zu ermöglichen.</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="bessere_suchmaschinenoptimierung_seo"></span>Bessere Suchmaschinenoptimierung (SEO)<span class="ez-toc-section-end"></span></h3> <p>Suchmaschinen wie Google verwenden semantische HTML-Tags, um den Inhalt und die Struktur einer Webseite zu verstehen und zu indexieren. Semantische Tags können die Auffindbarkeit und das Ranking einer Webseite in den Suchergebnissen verbessern. Beispielsweise helfen <code><h1></code> bis <code><h6></code>-Tags dabei, die Hierarchie von Überschriften klar zu definieren.</p> <figure class="wp-block-image size-large is-style-gradiant-caption"><img decoding="async" width="1024" height="908" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20908'%3E%3C/svg%3E" alt="seo audit seo check der html struktur seo audit" class="wp-image-12291" title="seo check der html struktur - Lightweb-media.de" data-lazy-srcset="https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-1024x908.png.webp 1024w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-768x681.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-79x70.png.webp 79w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-135x120.png.webp 135w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-576x511.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-360x319.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur.png.webp 1460w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-1024x908.png.webp"><noscript><img decoding="async" width="1024" height="908" src="https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-1024x908.png.webp" alt="seo audit seo check der html struktur seo audit" class="wp-image-12291" title="seo check der html struktur - Lightweb-media.de" srcset="https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-1024x908.png.webp 1024w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-768x681.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-79x70.png.webp 79w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-135x120.png.webp 135w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-576x511.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur-360x319.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/06/seo-check-der-html-struktur.png.webp 1460w" sizes="(max-width: 1024px) 100vw, 1024px"></noscript><figcaption class="wp-element-caption">Wir überprüfen typische HTML-Strukturfehler <a href="https://lightweb-media.de/seo-audit-check/"><strong>in unseren Website-Analysen</strong></a>.</figcaption></figure> <h3 class="wp-block-heading"><span class="ez-toc-section" id="verbesserte_wartbarkeit_und_lesbarkeit_des_codes"></span>Verbesserte Wartbarkeit und Lesbarkeit des Codes<span class="ez-toc-section-end"></span></h3> <p>Semantisches HTML macht den Quellcode einer Webseite verständlicher und strukturierter. Entwickler können den Code leichter lesen, warten und erweitern, da die Bedeutung und Funktion jedes Elements klar definiert ist.</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="konsistenz_und_wiederverwendbarkeit"></span>Konsistenz und Wiederverwendbarkeit<span class="ez-toc-section-end"></span></h3> <p>Durch die Verwendung semantischer HTML-Tags können Entwickler konsistente und wiederverwendbare Layouts und Komponenten erstellen. Dies führt zu einer einheitlicheren Benutzererfahrung und erleichtert die Pflege der Webseite.</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="bessere_benutzererfahrung_ux"></span>Bessere Benutzererfahrung (UX)<span class="ez-toc-section-end"></span></h3> <p>Semantisches HTML trägt dazu bei, dass Webseiten intuitiver und benutzerfreundlicher sind. Benutzer können sich leichter auf der Seite orientieren und die Informationen finden, die sie suchen. Dies führt zu einer insgesamt besseren Benutzererfahrung.</p> <h2 class="wp-block-heading"><span class="ez-toc-section" id="wie_du_semantisches_html_in_wordpress_einsetzt"></span>Wie Du semantisches HTML in WordPress einsetzt<span class="ez-toc-section-end"></span></h2> <p>Als WordPress-Entwickler hast Du mehrere Möglichkeiten, semantisches HTML in Deine Projekte zu integrieren:</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="1_nutze_ein_semantisches_theme"></span>1. Nutze ein semantisches Theme<span class="ez-toc-section-end"></span></h3> <p>Viele moderne WordPress-Themes verwenden bereits semantisches HTML. Achte bei der Auswahl Deines Themes darauf, dass es HTML5-Tags wie <code><header></code>, <code><nav></code>, <code><main></code> und <code><footer></code> verwendet.</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="2_passe_dein_theme_an"></span>2. Passe Dein Theme an<span class="ez-toc-section-end"></span></h3> <p>Wenn Du ein bestehendes Theme verwendest, kannst Du es anpassen:</p> <pre class="EnlighterJSRAW" data-enlighter-language="php" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">function semantisches_header() { echo '<header class="site-header">'; // Header-Inhalt hier echo '</header>'; } add_action('wp_head', 'semantisches_header');</pre> <h3 class="wp-block-heading"><span class="ez-toc-section" id="3_verwende_den_gutenberg-editor"></span>3. Verwende den Gutenberg-Editor<span class="ez-toc-section-end"></span></h3> <p>Der WordPress Block-Editor (Gutenberg) unterstützt semantisches HTML von Haus aus. Nutze die vordefinierten Blöcke wie „Überschrift“, „Absatz“ oder „Zitat“, die automatisch die richtigen HTML-Tags verwenden.</p> <h3 class="wp-block-heading"><span class="ez-toc-section" id="4_erstelle_benutzerdefinierte_bloecke"></span>4. Erstelle benutzerdefinierte Blöcke<span class="ez-toc-section-end"></span></h3> <p>Wenn Du eigene Blöcke erstellst, achte darauf, semantische Tags zu verwenden:</p> <pre class="EnlighterJSRAW" data-enlighter-language="php" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">registerBlockType('mein-plugin/mein-block', { // ... edit: () => { return ( <article className="mein-artikel"> <h2>Überschrift</h2> <p>Inhalt hier...</p> </article> ); }, save: () => { return ( <article className="mein-artikel"> <h2>Überschrift</h2> <p>Inhalt hier...</p> </article> ); }, });</pre> <h2 class="wp-block-heading"><span class="ez-toc-section" id="best_practices_fuer_semantisches_html"></span>Best Practices für semantisches HTML<span class="ez-toc-section-end"></span></h2> <ol class="wp-block-list"> <li><strong>Verwende Überschriften-Hierarchie</strong>: Nutze <code><h1></code> für den Haupttitel und arbeite Dich logisch durch <code><h2></code>, <code><h3></code> usw.</li> <li><strong>Listen richtig strukturieren</strong>: Verwende <code><ul></code> für ungeordnete und <code><ol></code> für geordnete Listen.</li> <li><strong>Tabellen sinnvoll einsetzen</strong>: Nutze <code><table></code> nur für tabellarische Daten, nicht für Layouts.</li> <li><strong>Formulare korrekt auszeichnen</strong>: Verwende <code><label></code> für Beschriftungen und gruppiere zusammengehörige Elemente mit <code><fieldset></code>.</li> <li><strong>Bilder mit Alt-Text versehen</strong>: Füge immer ein <code>alt</code>-Attribut zu Deinen <code><img></code>-Tags hinzu.</li> </ol> <h2 class="wp-block-heading"><span class="ez-toc-section" id="liste_von_semantischen_html-tags"></span>Liste von semantischen HTML-Tags<span class="ez-toc-section-end"></span></h2> <h3 class="wp-block-heading"><span class="ez-toc-section" id="struktur-tags"></span>Struktur-Tags<span class="ez-toc-section-end"></span></h3> <ol class="wp-block-list"> <li><strong><code><header></code></strong>: Definiert den Kopfbereich eines Dokuments oder Abschnitts, häufig verwendet für Logos, Navigation und Überschriften.</li> <li><strong><code><nav></code></strong>: Definiert einen Navigationsbereich, der Links zu anderen Teilen der Webseite oder zu externen Seiten enthält.</li> <li><strong><code><main></code></strong>: Definiert den Hauptinhalt eines Dokuments, einzigartig für jede Seite und sollte nur einmal verwendet werden.</li> <li><strong><code><section></code></strong>: Definiert einen thematischen Abschnitt im Dokument, der in der Regel eine Überschrift enthält.</li> <li><strong><code><article></code></strong>: Definiert einen eigenständigen Inhaltsbereich, wie z.B. einen Blogpost, eine Nachricht oder einen Kommentar.</li> <li><strong><code><aside></code></strong>: Definiert Inhalte, die indirekt mit dem Hauptinhalt zusammenhängen, wie z.B. Randnotizen, Werbung oder weiterführende Links.</li> <li><strong><code><footer></code></strong>: Definiert den Fußbereich eines Dokuments oder Abschnitts, häufig verwendet für Autoreninformationen, Copyright-Vermerke, Links zu Nutzungsbedingungen usw.</li> </ol> <h3 class="wp-block-heading"><span class="ez-toc-section" id="inhalts-tags"></span>Inhalts-Tags<span class="ez-toc-section-end"></span></h3> <ol class="wp-block-list" start="8"> <li><strong><code><h1></code> bis <code><h6></code></strong>: Definieren die Hierarchie der Überschriften, wobei <code><h1></code> die höchste und <code><h6></code> die niedrigste Ebene darstellt.</li> <li><strong><code><header></code></strong>: Definiert einen Kopfbereich für ein <code>article</code>, <code>section</code>, <code>nav</code>, oder <code>aside</code>-Element.</li> <li><strong><code><p></code></strong>: Definiert einen Absatz.</li> <li><strong><code><blockquote></code></strong>: Definiert einen längeren Blockzitat.</li> <li><strong><code><q></code></strong>: Definiert ein kurzes Inline-Zitat.</li> <li><strong><code><pre></code></strong>: Definiert vorformatierten Text, bei dem Leerzeichen und Zeilenumbrüche beibehalten werden.</li> <li><strong><code><address></code></strong>: Definiert Kontaktinformationen.</li> <li><strong><code><figure></code></strong>: Gruppiert Medieninhalte wie Bilder, Diagramme oder Illustrationen.</li> <li><strong><code><figcaption></code></strong>: Definiert eine Beschriftung oder Legende für das <code>figure</code>-Element.</li> </ol> <h3 class="wp-block-heading"><span class="ez-toc-section" id="tabellen-tags"></span>Tabellen-Tags<span class="ez-toc-section-end"></span></h3> <ol class="wp-block-list" start="17"> <li><strong><code><table></code></strong>: Definiert eine Tabelle.</li> <li><strong><code><caption></code></strong>: Definiert eine Titelzeile für die Tabelle.</li> <li><strong><code><thead></code></strong>: Gruppiert den Kopfbereich einer Tabelle.</li> <li><strong><code><tbody></code></strong>: Gruppiert den Hauptteil einer Tabelle.</li> <li><strong><code><tfoot></code></strong>: Gruppiert den Fußbereich einer Tabelle.</li> <li><strong><code><tr></code></strong>: Definiert eine Zeile in einer Tabelle.</li> <li><strong><code><th></code></strong>: Definiert eine Kopfzelle in einer Tabelle.</li> <li><strong><code><td></code></strong>: Definiert eine Zelle in einer Tabelle.</li> </ol> <h3 class="wp-block-heading"><span class="ez-toc-section" id="listen-tags"></span>Listen-Tags<span class="ez-toc-section-end"></span></h3> <ol class="wp-block-list" start="25"> <li><strong><code><ul></code></strong>: Definiert eine ungeordnete Liste.</li> <li><strong><code><ol></code></strong>: Definiert eine geordnete Liste.</li> <li><strong><code><li></code></strong>: Definiert ein Listenelement.</li> <li><strong><code><dl></code></strong>: Definiert eine Definitionsliste.</li> <li><strong><code><dt></code></strong>: Definiert einen Term in einer Definitionsliste.</li> <li><strong><code><dd></code></strong>: Definiert eine Beschreibung in einer Definitionsliste.</li> </ol> <h3 class="wp-block-heading"><span class="ez-toc-section" id="formulare-tags"></span>Formulare-Tags<span class="ez-toc-section-end"></span></h3> <ol class="wp-block-list" start="31"> <li><strong><code><form></code></strong>: Definiert ein Formular zum Sammeln von Benutzereingaben.</li> <li><strong><code><fieldset></code></strong>: Gruppiert verwandte Elemente in einem Formular.</li> <li><strong><code><legend></code></strong>: Definiert eine Beschriftung für das <code>fieldset</code>-Element.</li> <li><strong><code><label></code></strong>: Definiert eine Beschriftung für ein Formularfeld.</li> <li><strong><code><input></code></strong>: Definiert ein Eingabefeld.</li> <li><strong><code><button></code></strong>: Definiert eine Schaltfläche.</li> <li><strong><code><select></code></strong>: Definiert ein Dropdown-Auswahlfeld.</li> <li><strong><code><datalist></code></strong>: Definiert eine Liste von vordefinierten Optionen für andere Steuerelemente.</li> <li><strong><code><optgroup></code></strong>: Gruppiert verwandte Optionen in einem Dropdown-Menü.</li> <li><strong><code><option></code></strong>: Definiert eine Option in einem Dropdown-Menü.</li> <li><strong><code><textarea></code></strong>: Definiert ein mehrzeiliges Eingabefeld.</li> </ol> <h2 class="wp-block-heading"><span class="ez-toc-section" id="fazit"></span>Fazit<span class="ez-toc-section-end"></span></h2> <p>Semantisches HTML ist mehr als nur ein Trend – es ist eine fundamentale Praxis für moderne Webentwicklung. Indem Du es in Deinen WordPress-Projekten einsetzt, verbesserst Du nicht nur die Zugänglichkeit und SEO Deiner Seiten, sondern trägst auch zu einem besser strukturierten und zukunftsfähigen Web bei.</p> <div class="wp-block-lightweb-alert lightweb-alert default"><div class="headline"><i class="bi bi-info-circle"></i><strong>Denk daran</strong></div><div class="paragraph"><p>Jedes Mal, wenn Du ein semantisches Tag verwendest, machst Du das Web ein Stückchen besser – für Dich, Deine Nutzer und für Suchmaschinen. </p></div></div> </div> <div data-wpr-lazyrender="1" id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Schreibe einen Kommentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/barrierefreiheit/semantisches-html/#respond" style="display:none;">Antworten abbrechen</a></small></h3><form action="https://lightweb-media.de/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Deine E-Mail-Adresse wird nicht veröffentlicht.</span> <span class="required-field-message">Erforderliche Felder sind mit <span class="required">*</span> markiert</span></p><div class="row pt-3"> <div class="col-lg-6 pb-3"> <input required id="author" class="form-control" placeholder="* Name" name="author" type="text" value="" /> </div> <div class="col-lg-6 pb-3"> <input required class="form-control "id="email" placeholder="* E-Mail-Adresse" name="email" type="text" value="" /> </div> </div> <div class="form-group"><textarea autocomplete="new-password" placeholder="Schreibe was..." id="f21f8dc11f" name="f21f8dc11f" class="form-control" cols="45" rows="8" aria-required="true" required></textarea><textarea id="comment" aria-label="hp-comment" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea><script data-noptimize>document.getElementById("comment").setAttribute( "id", "ad53807a2c33d35c77076935948d34f1" );document.getElementById("f21f8dc11f").setAttribute( "id", "comment" );</script></div> <div class="pb-3 form-check fs-6"> <label> <input id="privacy" class="form-check-input" name="privacy" type="checkbox" aria-required="true" /> <span class="wpcf7-list-item-label"> * Ich habe die Hinweise zum <a href="/datenschutz/" target="_blank" title="Datenschutzerklärung">Datenschutz</a> gelesen und akzeptiere diese. </span> </label> </div> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Kommentar abschicken" /> <input type='hidden' name='comment_post_ID' value='12661' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> <div class="related-posts-container"> <h3> Weitere Beiträge </h3> <div class="related-posts"> <div class="related-post"> <div class="related-post-image"> <a href="https://lightweb-media.de/barrierefreiheit/webdesign-in-2024/" title="Webdesign in 2024 – Benutzerfreundlichkeit und Übersichtlichkeit machen den Unterschied"> <img width="768" height="432" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20432'%3E%3C/svg%3E" class="rounded wp-post-image" alt="marketing webdesign in benutzerfreundlichkeit und uebersichtlichkeit machen den unterschied png" decoding="async" data-lazy-srcset="https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied.png.webp 800w" data-lazy-sizes="(max-width: 768px) 100vw, 768px" title="marketing webdesign in 2024 benutzerfreundlichkeit und uebersichtlichkeit machen den unterschied - Lightweb-media.de" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-768x432.png.webp"><noscript><img width="768" height="432" src="https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-768x432.png.webp" class="rounded wp-post-image" alt="marketing webdesign in benutzerfreundlichkeit und uebersichtlichkeit machen den unterschied png" decoding="async" srcset="https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/02/marketing-webdesign-in-2024-benutzerfreundlichkeit-und-uebersichtlichkeit-machen-den-unterschied.png.webp 800w" sizes="(max-width: 768px) 100vw, 768px" title="marketing webdesign in 2024 benutzerfreundlichkeit und uebersichtlichkeit machen den unterschied - Lightweb-media.de"></noscript> </a> </div> <p class="related-post-title"><a href="https://lightweb-media.de/barrierefreiheit/webdesign-in-2024/" title="Webdesign in 2024 – Benutzerfreundlichkeit und Übersichtlichkeit machen den Unterschied">Webdesign in 2024 – Benutzerfreundlichkeit und Übersichtlichkeit machen den Unterschied</a></p> </div> <div class="related-post"> <div class="related-post-image"> <a href="https://lightweb-media.de/wordpress/twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme/" title="Twenty Twenty-Two ist erstes barrierefreies Standard WordPress-Theme"> <img width="768" height="432" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20432'%3E%3C/svg%3E" class="rounded wp-post-image" alt="wordpress twenty twenty two ist erstes barrierefreies standard wordpress theme" decoding="async" data-lazy-srcset="https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme.png.webp 800w" data-lazy-sizes="(max-width: 768px) 100vw, 768px" title="wordpress twenty twenty two ist erstes barrierefreies standard wordpress theme - Lightweb-media.de" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-768x432.png.webp"><noscript><img width="768" height="432" src="https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-768x432.png.webp" class="rounded wp-post-image" alt="wordpress twenty twenty two ist erstes barrierefreies standard wordpress theme" decoding="async" srcset="https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2022/12/wordpress-twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme.png.webp 800w" sizes="(max-width: 768px) 100vw, 768px" title="wordpress twenty twenty two ist erstes barrierefreies standard wordpress theme - Lightweb-media.de"></noscript> </a> </div> <p class="related-post-title"><a href="https://lightweb-media.de/wordpress/twenty-twenty-two-ist-erstes-barrierefreies-standard-wordpress-theme/" title="Twenty Twenty-Two ist erstes barrierefreies Standard WordPress-Theme">Twenty Twenty-Two ist erstes barrierefreies Standard WordPress-Theme</a></p> </div> <div class="related-post"> <div class="related-post-image"> <a href="https://lightweb-media.de/barrierefreiheit/aria-role/" title="Barrierefreiheit: Die ARIA-Rollen"> <img width="768" height="432" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20432'%3E%3C/svg%3E" class="rounded wp-post-image" alt="barrierefreiheit barrierefreiheit die aria rollen png" decoding="async" data-lazy-srcset="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen.png.webp 800w" data-lazy-sizes="(max-width: 768px) 100vw, 768px" title="barrierefreiheit barrierefreiheit die aria rollen - Lightweb-media.de" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-768x432.png.webp"><noscript><img width="768" height="432" src="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-768x432.png.webp" class="rounded wp-post-image" alt="barrierefreiheit barrierefreiheit die aria rollen png" decoding="async" srcset="https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-768x432.png.webp 768w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-120x68.png.webp 120w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-180x101.png.webp 180w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-576x324.png.webp 576w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen-360x203.png.webp 360w,https://lightweb-media.de/wp-content/uploads/2024/08/barrierefreiheit-barrierefreiheit-die-aria-rollen.png.webp 800w" sizes="(max-width: 768px) 100vw, 768px" title="barrierefreiheit barrierefreiheit die aria rollen - Lightweb-media.de"></noscript> </a> </div> <p class="related-post-title"><a href="https://lightweb-media.de/barrierefreiheit/aria-role/" title="Barrierefreiheit: Die ARIA-Rollen">Barrierefreiheit: Die ARIA-Rollen</a></p> </div> </div> </div> <div data-wpr-lazyrender="1" class="maybe-interested-on-cats"> <p><strong>Wir teilen unser Wissen insbesondere bei den Themen</strong></p> <div> <a href="https://lightweb-media.de/administration/" title="Administration">Administration</a><a href="https://lightweb-media.de/barrierefreiheit/" title="Barrierefreiheit">Barrierefreiheit</a><a href="https://lightweb-media.de/dsgvo/" title="DSGVO">DSGVO</a><a href="https://lightweb-media.de/gutenberg/" title="Gutenberg">Gutenberg</a><a href="https://lightweb-media.de/marketing/" title="Marketing">Marketing</a><a href="https://lightweb-media.de/pagespeed/" title="Pagespeed">Pagespeed</a><a href="https://lightweb-media.de/seo/" title="SEO">SEO</a><a href="https://lightweb-media.de/sicherheit/" title="Sicherheit">Sicherheit</a><a href="https://lightweb-media.de/tools/" title="Tools">Tools</a><a href="https://lightweb-media.de/webentwicklung/" title="Webentwicklung">Webentwicklung</a><a href="https://lightweb-media.de/wordpress/" title="WordPress">WordPress</a> </div> </div> </div> <div data-wpr-lazyrender="1" class="marquee"><ul class="marquee-content"><li class="marquee-2276"><img width="180" height="120" alt="KC Analysts AG Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-2-180x120.png.webp" /><noscript><img width="180" height="120" alt="KC Analysts AG Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-2-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="KC Analysts AG Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-5-180x120.png.webp" /><noscript><img width="180" height="120" alt="KC Analysts AG Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-5-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2285"><img width="180" height="120" alt="Autohub Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-13-180x120.png.webp" /><noscript><img width="180" height="120" alt="Autohub Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-13-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Autohub Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-12-180x120.png.webp" /><noscript><img width="180" height="120" alt="Autohub Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-12-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2290"><img width="180" height="120" alt="Steinbock & Partner Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-17-180x120.png.webp" /><noscript><img width="180" height="120" alt="Steinbock & Partner Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-17-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Steinbock & Partner Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-16-180x120.png.webp" /><noscript><img width="180" height="120" alt="Steinbock & Partner Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-16-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2310"><img width="180" height="120" alt="Coco Baba Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-5-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Coco Baba Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-5-1-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Coco Baba Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-4-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Coco Baba Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-4-1-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2280"><img width="180" height="120" alt="AB Glanz Entertainment Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-2-180x120.png.webp" /><noscript><img width="180" height="120" alt="AB Glanz Entertainment Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-2-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="AB Glanz Entertainment Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-2-180x120.png.webp" /><noscript><img width="180" height="120" alt="AB Glanz Entertainment Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-2-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2253"><img width="180" height="120" alt="Rigidentis Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rigidentis Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Rigidentis Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rigidentis Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2258"><img width="180" height="120" alt="Freie Kunstschule Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Freie Kunstschule Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-2-1-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Freie Kunstschule Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Freie Kunstschule Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-3-1-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2255"><img width="180" height="120" alt="Rail Parts Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rail Parts Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Rail Parts Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rail Parts Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2302"><img width="180" height="120" alt="Emma Heming Willis Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-9-180x120.png.webp" /><noscript><img width="180" height="120" alt="Emma Heming Willis Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-9-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Emma Heming Willis Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-8-180x120.png.webp" /><noscript><img width="180" height="120" alt="Emma Heming Willis Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-8-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2298"><img width="180" height="120" alt="Rednux Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-10-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rednux Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-10-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Rednux Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-11-180x120.png.webp" /><noscript><img width="180" height="120" alt="Rednux Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-11-180x120.png.webp" class="org" loading="lazy" /></noscript></li><li class="marquee-2248"><img width="180" height="120" alt="Maßstab:werk Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="default" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-1-180x120.png.webp" /><noscript><img width="180" height="120" alt="Maßstab:werk Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-1-1-180x120.png.webp" class="default" loading="lazy" /></noscript><img width="180" height="120" alt="Maßstab:werk Logos Lightweb Kunden" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%20120'%3E%3C/svg%3E" class="org" data-lazy-src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-4-180x120.png.webp" /><noscript><img width="180" height="120" alt="Maßstab:werk Logos Lightweb Kunden" src="https://lightweb-media.de/wp-content/uploads/2022/01/Logos-Lightweb-Kunden-4-180x120.png.webp" class="org" loading="lazy" /></noscript></li></ul></div> </div> <footer data-wpr-lazyrender="1"> <div class="container py-5"> <div class="row"> <div class="col-lg-7 cta"> <div> <a title="Mit uns Kontakt aufnehmen" href="https://lightweb-media.de/kontakt/" title="Kontakt aufnehmen" class="btn btn-orange pill">Kontakt aufnehmen</a></li> </div> <div class="socials"><ul id="socials" class=""><li><a title="facebook" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/lightweb.media.agentur"><i class="bi bi-facebook"></i></a></li> <li><a title="linkedin" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/lightweb-media-agentur/"><i class="bi bi-linkedin"></i></a></li> <li><a title="github" target="_blank" rel="noopener noreferrer" href="https://github.com/Lightweb-Media"><i class="bi bi-github"></i></a></li> </ul></div> </div> <div class="col-lg-5 links"> <div class="footer-menu"><ul id="footer-menu" class="footer-menu m-0 d-flex"><li><a title="Lightweb Media – HTML Sitemap" href="https://lightweb-media.de/html-sitemap/">Sitemap</a></li> <li><a title="Impressum von Lightweb Media" href="https://lightweb-media.de/impressum/">Impressum</a></li> <li><a title="Unsere Datenschutzerklärung" href="https://lightweb-media.de/datenschutz/">Datenschutz</a></li> </ul></div> </div> </div> </div> </footer>  <div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 oh-nein-ein-cookie optin cmplz-center cmplz-categories-type-view-preferences" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optin" aria-describedby="cmplz-message-1-optin"> <div class="cmplz-header"> <div class="cmplz-logo"></div> <div class="cmplz-title" id="cmplz-header-1-optin">Cookie-Zustimmung verwalten</div> <div class="cmplz-close" tabindex="0" role="button" aria-label="Dialog schließen"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> </div> </div> <div class="cmplz-divider cmplz-divider-header"></div> <div class="cmplz-body"> <div class="cmplz-message" id="cmplz-message-1-optin">Wir verwenden Cookies, um unsere Website und unseren Service für unsere Besucher zu verbessern.</div>  <div class="cmplz-categories"> <details class="cmplz-category cmplz-functional" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Funktional</span> <span class='cmplz-always-active'> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-functional-optin" data-category="cmplz_functional" class="cmplz-consent-checkbox cmplz-functional" size="40" value="1"/> <label class="cmplz-label" for="cmplz-functional-optin" tabindex="0"><span class="screen-reader-text">Funktional</span></label> </span> Immer aktiv </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-functional">Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.</span> </div> </details> <details class="cmplz-category cmplz-preferences" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Vorlieben</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-preferences-optin" data-category="cmplz_preferences" class="cmplz-consent-checkbox cmplz-preferences" size="40" value="1"/> <label class="cmplz-label" for="cmplz-preferences-optin" tabindex="0"><span class="screen-reader-text">Vorlieben</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-preferences">Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.</span> </div> </details> <details class="cmplz-category cmplz-statistics" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Statistiken</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-statistics-optin" data-category="cmplz_statistics" class="cmplz-consent-checkbox cmplz-statistics" size="40" value="1"/> <label class="cmplz-label" for="cmplz-statistics-optin" tabindex="0"><span class="screen-reader-text">Statistiken</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-statistics">Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.</span> <span class="cmplz-description-statistics-anonymous">Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.</span> </div> </details> <details class="cmplz-category cmplz-marketing" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Marketing</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-marketing-optin" data-category="cmplz_marketing" class="cmplz-consent-checkbox cmplz-marketing" size="40" value="1"/> <label class="cmplz-label" for="cmplz-marketing-optin" tabindex="0"><span class="screen-reader-text">Marketing</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-marketing">Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.</span> </div> </details> </div> </div> <div class="cmplz-links cmplz-information"> <a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Optionen verwalten</a> <a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview">Dienste verwalten</a> <a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper">Verwalten von {vendor_count}-Lieferanten</a> <a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/">Lese mehr über diese Zwecke</a> </div> <div class="cmplz-divider cmplz-footer"></div> <div class="cmplz-buttons"> <button class="cmplz-btn cmplz-accept">Alle Cookies akzeptieren</button> <button class="cmplz-btn cmplz-deny">Ablehnen</button> <button class="cmplz-btn cmplz-view-preferences">Einstellungen anzeigen</button> <button class="cmplz-btn cmplz-save-preferences">Einstellungen speichern</button> <a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Einstellungen anzeigen</a> </div> <div class="cmplz-links cmplz-documents"> <a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a> </div> </div> </div> <div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Zustimmung verwalten</button> </div><script type="text/javascript">window.addEventListener('DOMContentLoaded', function() {/* <![CDATA[ */!function(e,n){var r={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"scroll","linenumbers":true,"theme":"atomic","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""},"resources":["https:\/\/lightweb-media.de\/wp-content\/plugins\/enlighter\/cache\/enlighterjs.min.css?gvVAzgQDOaqgdqz","https:\/\/lightweb-media.de\/wp-content\/plugins\/enlighter\/resources\/enlighterjs\/enlighterjs.min.js"]},o=document.getElementsByTagName("head")[0],t=n&&(n.error||n.log)||function(){};e.EnlighterJSINIT=function(){!function(e,n){var r=0,l=null;function c(o){l=o,++r==e.length&&(!0,n(l))}e.forEach(function(e){switch(e.match(/\.([a-z]+)(?:[#?].*)?$/)[1]){case"js":var n=document.createElement("script");n.onload=function(){c(null)},n.onerror=c,n.src=e,n.async=!0,o.appendChild(n);break;case"css":var r=document.createElement("link");r.onload=function(){c(null)},r.onerror=c,r.rel="stylesheet",r.type="text/css",r.href=e,r.media="all",o.appendChild(r);break;default:t("Error: invalid file extension",e)}})}(r.resources,function(e){e?t("Error: failed to dynamically load EnlighterJS resources!",e):"undefined"!=typeof EnlighterJS?EnlighterJS.init(r.selectors.block,r.selectors.inline,r.options):t("Error: EnlighterJS resources not loaded yet!")})},(document.querySelector(r.selectors.block)||document.querySelector(r.selectors.inline))&&e.EnlighterJSINIT()}(window,console);!function(e){"undefined"!=typeof jQuery&&jQuery(document).on("ajaxComplete",function(){"undefined"!=typeof EnlighterJSINIT&&e.setTimeout(function(){EnlighterJSINIT.apply(e)},180)})}(window); /* ]]> */});</script><style id='wp-block-list-inline-css' type='text/css'> ol,ul{box-sizing:border-box}:root :where(ul.has-background,ol.has-background){padding:1.25em 2.375em} </style> <style id='wp-block-image-inline-css' type='text/css'> .wp-block-image img{box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom}.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{border-radius:inherit}.wp-block-image.has-custom-border img{box-sizing:border-box}.wp-block-image.aligncenter{text-align:center}.wp-block-image.alignfull img,.wp-block-image.alignwide img{height:auto;width:100%}.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{display:table}.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{caption-side:bottom;display:table-caption}.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}.wp-block-image .aligncenter{margin-left:auto;margin-right:auto}.wp-block-image :where(figcaption){margin-bottom:1em;margin-top:.5em}.wp-block-image.is-style-circle-mask img{border-radius:9999px}@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){.wp-block-image.is-style-circle-mask img{border-radius:0;-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-mode:alpha;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}}:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){border-radius:9999px}.wp-block-image figure{margin:0}.wp-lightbox-container{display:flex;flex-direction:column;position:relative}.wp-lightbox-container img{cursor:zoom-in}.wp-lightbox-container img:hover+button{opacity:1}.wp-lightbox-container button{align-items:center;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);background-color:#5a5a5a40;border:none;border-radius:4px;cursor:zoom-in;display:flex;height:20px;justify-content:center;opacity:0;padding:0;position:absolute;right:16px;text-align:center;top:16px;transition:opacity .2s ease;width:20px;z-index:100}.wp-lightbox-container button:focus-visible{outline:3px auto #5a5a5a40;outline:3px auto -webkit-focus-ring-color;outline-offset:3px}.wp-lightbox-container button:hover{cursor:pointer;opacity:1}.wp-lightbox-container button:focus{opacity:1}.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){background-color:#5a5a5a40;border:none}.wp-lightbox-overlay{box-sizing:border-box;cursor:zoom-out;height:100vh;left:0;overflow:hidden;position:fixed;top:0;visibility:hidden;width:100%;z-index:100000}.wp-lightbox-overlay .close-button{align-items:center;cursor:pointer;display:flex;justify-content:center;min-height:40px;min-width:40px;padding:0;position:absolute;right:calc(env(safe-area-inset-right) + 16px);top:calc(env(safe-area-inset-top) + 16px);z-index:5000000}.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){background:none;border:none}.wp-lightbox-overlay .lightbox-image-container{height:var(--wp--lightbox-container-height);left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:top left;width:var(--wp--lightbox-container-width);z-index:9999999999}.wp-lightbox-overlay .wp-block-image{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:center;margin:0;position:relative;transform-origin:0 0;width:100%;z-index:3000000}.wp-lightbox-overlay .wp-block-image img{height:var(--wp--lightbox-image-height);min-height:var(--wp--lightbox-image-height);min-width:var(--wp--lightbox-image-width);width:var(--wp--lightbox-image-width)}.wp-lightbox-overlay .wp-block-image figcaption{display:none}.wp-lightbox-overlay button{background:none;border:none}.wp-lightbox-overlay .scrim{background-color:#fff;height:100%;opacity:.9;position:absolute;width:100%;z-index:2000000}.wp-lightbox-overlay.active{animation:turn-on-visibility .25s both;visibility:visible}.wp-lightbox-overlay.active img{animation:turn-on-visibility .35s both}.wp-lightbox-overlay.show-closing-animation:not(.active){animation:turn-off-visibility .35s both}.wp-lightbox-overlay.show-closing-animation:not(.active) img{animation:turn-off-visibility .25s both}@media (prefers-reduced-motion:no-preference){.wp-lightbox-overlay.zoom.active{animation:none;opacity:1;visibility:visible}.wp-lightbox-overlay.zoom.active .lightbox-image-container{animation:lightbox-zoom-in .4s}.wp-lightbox-overlay.zoom.active .lightbox-image-container img{animation:none}.wp-lightbox-overlay.zoom.active .scrim{animation:turn-on-visibility .4s forwards}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){animation:none}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{animation:lightbox-zoom-out .4s}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{animation:none}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{animation:turn-off-visibility .4s forwards}}@keyframes turn-on-visibility{0%{opacity:0}to{opacity:1}}@keyframes turn-off-visibility{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes lightbox-zoom-in{0%{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale))}to{transform:translate(-50%,-50%) scale(1)}}@keyframes lightbox-zoom-out{0%{transform:translate(-50%,-50%) scale(1);visibility:visible}99%{visibility:visible}to{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));visibility:hidden}} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} </style> <script data-minify="1" type="text/javascript" src="https://lightweb-media.de/wp-content/cache/min/1/wp-content/plugins/lwm-trust-slider/dist/main.js?ver=1730976863" id="lwm-trust-slider-js" data-rocket-defer defer></script> <script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra"> /* <![CDATA[ */ var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""}; /* ]]> */ </script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.69.1" id="ez-toc-scroll-scriptjs-js" data-rocket-defer defer></script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js" data-rocket-defer defer></script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js" data-rocket-defer defer></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"1","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""}; /* ]]> */ </script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.69.1-1729174788" id="ez-toc-js-js" data-rocket-defer defer></script> <script type="text/javascript" id="rocket-browser-checker-js-after"> /* <![CDATA[ */ "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); /* ]]> */ </script> <script type="text/javascript" id="rocket-preload-links-js-extra"> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/plugins\/enlighter\/cache\/|\/tools\/chatgpt-tool\/|\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/lightweb-media.de","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="text/javascript" id="rocket-preload-links-js-after"> /* <![CDATA[ */ (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); /* ]]> */ </script> <script type="text/javascript" class="custom-script-loader" data-src="https://lightweb-media.de/wp-content/themes/lightweb-media_theme/static/bootstrap.min.js?ver=1.0.0" id="lightweb-bs-js-js"></script> <script type="text/javascript" src="https://lightweb-media.de/wp-content/themes/lightweb-media_theme/dist/main.min.js?ver=2.1.1" id="lightweb-main-js-js" data-rocket-defer defer></script> <script data-minify="1" type="text/javascript" src="https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/slick/slick.js?ver=1730976863" id="lightweb-slick-main-js-js" data-rocket-defer defer></script> <script data-minify="1" type="text/javascript" src="https://lightweb-media.de/wp-content/cache/min/1/wp-content/themes/lightweb-media_theme/static/slick/slider.js?ver=1730976863" id="lightweb-slick-slider-js-js" data-rocket-defer defer></script> <script type="text/javascript" id="cmplz-cookiebanner-js-extra"> /* <![CDATA[ */ var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"1","banner_version":"59","version":"7.1.5","store_consent":"","do_not_track_enabled":"","consenttype":"optin","region":"eu","geoip":"","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"1","dismiss_on_scroll":"","cookie_expiry":"30","url":"https:\/\/lightweb-media.de\/wp-json\/complianz\/v1\/","locale":"lang=de&locale=de_DE","set_cookies_on_root":"0","cookie_domain":"","current_policy_id":"38","cookie_path":"\/","categories":{"statistics":"Statistiken","marketing":"Marketing"},"tcf_active":"","placeholdertext":"Bitte hier klicken, um Youtube-Inhalte zu aktivieren","css_file":"https:\/\/lightweb-media.de\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=59","page_links":{"eu":{"cookie-statement":{"title":"Cookie-Richtlinie ","url":"https:\/\/lightweb-media.de\/cookie-richtlinie-eu\/"},"privacy-statement":{"title":"Datenschutzerkl\u00e4rung","url":"https:\/\/lightweb-media.de\/datenschutz\/"},"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"us":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"uk":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"ca":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"au":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"za":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}},"br":{"impressum":{"title":"Impressum","url":"https:\/\/lightweb-media.de\/impressum\/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":"","aria_label":"Bitte hier klicken, um Youtube-Inhalte zu aktivieren"}; /* ]]> */ </script> <script defer type="text/javascript" src="https://lightweb-media.de/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=1731667941" id="cmplz-cookiebanner-js"></script> <script type="text/javascript" id="cmplz-cookiebanner-js-after"> /* <![CDATA[ */ document.addEventListener("cmplz_enable_category", function () { document.querySelectorAll('[data-rocket-lazyload]').forEach(obj => { if (obj.hasAttribute('data-lazy-src')) { obj.setAttribute('src', obj.getAttribute('data-lazy-src')); } }); }); /* ]]> */ </script>  <script data-category="functional">var _paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); _paq.push(['requireCookieConsent']); (function() { var u="https://klick.lightweb-media.de/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '1']); _paq.push(['setSecureCookie', window.location.protocol === "https:" ]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); document.addEventListener("cmplz_fire_categories", function (e) { var consentedCategories = e.detail.categories; if (!cmplz_in_array( 'statistics', consentedCategories )) { _paq.push(['forgetCookieConsentGiven']); } else { _paq.push(['rememberCookieConsentGiven']); } }); </script> <script async type="text/plain" data-category="statistics"> /* var _paq = window._paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//klick.lightweb-media.de/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); */ var _mtm = window._mtm = window._mtm || []; _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'}); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src='https://klick.lightweb-media.de/js/container_v1FHtzz8.js'; s.parentNode.insertBefore(g,s); </script> <script type="text/javascript" id="wpsp-script-frontend"></script> <script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://lightweb-media.de/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=["marquee","marquee-content","hero-image"];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi_webp/ID/hqdefault.webp'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script> </body> </html>