Files
beh-rde-brief/webseite/index.html
JUSN 02523b0467 SEO Quick Wins 1-5: Social-Vorschau, Title, FAQ-Schema, Sitemap
- Open-Graph-Tags + Vorschaubild (1200x630, Papier-Design) auf allen
  7 Sprachseiten, lokalisierte og:title/description je Sprache
- Title-Tag mit Suchwort vorn: 'Behördenbriefe einfach erklärt – per Foto'
- Meta-Description gestrafft (146 Zeichen, mit Handlungsaufruf)
- FAQPage-Schema (JSON-LD) mit 6 Fragen
- 2 neue FAQ-Einträge (Long-Tail: Jobcenter, Ausländerbehörde, Sprachen)
- canonical + hreflang x-default auf allen Seiten
- robots.txt, sitemap.xml, favicon.svg

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-23 22:24:37 +02:00

476 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Behördenbriefe einfach erklärt per Foto | BehördenKlar</title>
<meta name="description" content="Brief vom Amt? Foto machen BehördenKlar erklärt ihn in einfacher Sprache, zeigt Fristen, übersetzt in 9 Sprachen. Warteliste: 5 Gratis-Analysen.">
<link rel="alternate" hreflang="de" href="https://behoerdenklar.pages.dev/">
<link rel="alternate" hreflang="tr" href="https://behoerdenklar.pages.dev/tr">
<link rel="alternate" hreflang="ar" href="https://behoerdenklar.pages.dev/ar">
<link rel="alternate" hreflang="en" href="https://behoerdenklar.pages.dev/en">
<link rel="alternate" hreflang="uk" href="https://behoerdenklar.pages.dev/uk">
<link rel="alternate" hreflang="ru" href="https://behoerdenklar.pages.dev/ru">
<link rel="alternate" hreflang="pl" href="https://behoerdenklar.pages.dev/pl">
<link rel="alternate" hreflang="x-default" href="https://behoerdenklar.pages.dev/">
<link rel="canonical" href="https://behoerdenklar.pages.dev/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<meta property="og:site_name" content="BehördenKlar">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:url" content="https://behoerdenklar.pages.dev/">
<meta property="og:title" content="Brief vom Amt? Endlich verstanden.">
<meta property="og:description" content="Foto machen BehördenKlar erklärt Behördenbriefe in einfacher Sprache und 9 Sprachen. Warteliste sichert 5 Gratis-Analysen.">
<meta property="og:image" content="https://behoerdenklar.pages.dev/vorschau.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="BehördenKlar Brief vom Amt. Endlich verstanden.">
<meta name="twitter:card" content="summary_large_image">
<style>
:root {
--papier: #faf7f0;
--papier-dunkel: #f1ecdf;
--tinte: #21211d;
--grau: #6b675e;
--amtsblau: #1d4e89;
--stempelrot: #b3372b;
--marker: #ffe66b;
--gruen: #2e7d4f;
color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: Georgia, 'Times New Roman', serif;
background:
repeating-linear-gradient(0deg, transparent 0 34px, rgba(33, 33, 29, 0.025) 34px 35px),
var(--papier);
color: var(--tinte);
line-height: 1.7;
font-size: 17px;
}
.mono {
font-family: 'Courier New', ui-monospace, monospace;
letter-spacing: 0.02em;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 72px; }
/* ---------- Briefkopf ---------- */
.briefkopf {
display: flex; justify-content: space-between; align-items: baseline;
padding: 20px 0 12px; border-bottom: 2px solid var(--tinte);
font-size: 14px;
}
.briefkopf .absender { font-weight: 700; font-size: 16px; }
.briefkopf .az { color: var(--grau); font-size: 13px; }
/* Sprachleiste */
.sprachen {
padding: 12px 0 0; font-size: 15px; color: var(--grau);
display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.sprachen a { color: var(--amtsblau); text-decoration: none; border-bottom: 1px dotted var(--amtsblau); }
.sprachen .aktiv { font-weight: 700; color: var(--tinte); border-bottom: none; }
/* ---------- Hero ---------- */
header { padding: 44px 0 8px; }
.betreff-label {
font-size: 13px; color: var(--grau); text-transform: uppercase;
letter-spacing: 0.14em; margin-bottom: 10px;
}
h1 {
font-size: clamp(34px, 7vw, 52px);
line-height: 1.12; font-weight: 700; letter-spacing: -0.01em;
}
.markiert {
background: linear-gradient(104deg, transparent 2%, var(--marker) 4%, var(--marker) 96%, transparent 98%);
padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.anrede { margin-top: 26px; font-size: 19px; max-width: 560px; }
.anrede strong { font-weight: 700; }
.hero-fuss { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.cta {
display: inline-block; padding: 17px 30px;
background: var(--amtsblau); color: #fff; text-decoration: none;
font-family: inherit; font-size: 18px; font-weight: 700;
border: 2px solid var(--tinte);
box-shadow: 5px 5px 0 var(--tinte);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinte); }
.stempel {
display: inline-block; padding: 7px 14px;
border: 2.5px solid var(--stempelrot); color: var(--stempelrot);
font-family: 'Courier New', ui-monospace, monospace; font-weight: 700;
font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
transform: rotate(-4deg); opacity: 0.9;
mask-image: radial-gradient(circle at 30% 60%, black 92%, transparent 99%);
}
/* ---------- Abschnitte ---------- */
section { margin-top: 64px; }
h2 {
font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--grau); font-weight: 400; margin-bottom: 20px;
display: flex; align-items: center; gap: 12px;
}
h2::after { content: ''; flex: 1; border-top: 1px solid rgba(33,33,29,0.25); }
h2 .nr { font-family: 'Courier New', ui-monospace, monospace; }
/* ---------- Verwandlung (Kernstück) ---------- */
.verwandlung { display: grid; gap: 14px; }
.brief-karte {
background: #fff; border: 1px solid rgba(33, 33, 29, 0.28);
padding: 22px 24px; position: relative;
box-shadow: 4px 5px 0 rgba(33, 33, 29, 0.08);
}
.brief-karte.amtsdeutsch {
transform: rotate(-0.7deg);
background: var(--papier-dunkel);
}
.brief-karte.klartext { transform: rotate(0.5deg); }
.karten-label {
position: absolute; top: -12px; left: 16px;
font-family: 'Courier New', ui-monospace, monospace; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.1em;
background: var(--tinte); color: var(--papier); padding: 3px 10px;
}
.brief-karte.klartext .karten-label { background: var(--gruen); }
.amtsdeutsch p {
font-family: 'Courier New', ui-monospace, monospace;
font-size: 14.5px; color: #45423b; line-height: 1.75;
}
.klartext p { font-size: 18px; }
.klartext .ampelzeile {
margin-top: 14px; padding-top: 12px;
border-top: 1px dashed rgba(33, 33, 29, 0.3);
font-size: 16px; font-weight: 700;
}
.pfeil {
text-align: center; font-size: 15px; color: var(--grau);
font-family: 'Courier New', ui-monospace, monospace;
}
.quelle-hinweis { margin-top: 10px; font-size: 13.5px; color: var(--grau); }
/* ---------- Zahlen ---------- */
.zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .zahlen { grid-template-columns: 1fr; } }
.zahl-karte {
border: 1px dashed rgba(33, 33, 29, 0.4); padding: 20px 22px;
background: rgba(255, 255, 255, 0.55);
}
.zahl-karte .zahl { font-size: 38px; font-weight: 700; line-height: 1.1; color: var(--amtsblau); }
.zahl-karte .erkl { font-size: 15px; color: var(--grau); margin-top: 6px; }
.zahl-karte .quelle { font-size: 12px; color: var(--grau); margin-top: 8px; font-family: 'Courier New', ui-monospace, monospace; }
/* ---------- Schritte ---------- */
.schritte { counter-reset: schritt; display: grid; gap: 0; }
.schritt {
counter-increment: schritt;
display: flex; gap: 20px; padding: 20px 4px;
border-bottom: 1px solid rgba(33, 33, 29, 0.15);
align-items: baseline;
}
.schritt:last-child { border-bottom: none; }
.schritt::before {
content: counter(schritt, decimal-leading-zero);
font-family: 'Courier New', ui-monospace, monospace;
font-size: 30px; font-weight: 700; color: var(--amtsblau);
flex-shrink: 0; width: 52px;
}
.schritt strong { font-size: 19px; display: block; margin-bottom: 2px; }
.schritt span { color: var(--grau); font-size: 16px; }
/* ---------- Können ---------- */
.koennen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 560px) { .koennen { grid-template-columns: 1fr; } }
.kann {
padding: 13px 0; border-bottom: 1px dotted rgba(33, 33, 29, 0.3);
font-size: 16.5px;
}
.kann::before { content: '☑'; color: var(--gruen); font-size: 18px; margin-right: 10px; }
/* ---------- Antrag / Warteliste ---------- */
.antrag {
background: #fff; border: 2px solid var(--tinte);
box-shadow: 7px 8px 0 rgba(33, 33, 29, 0.9);
padding: 30px 28px; position: relative; margin-top: 8px;
}
.antrag .formular-kopf {
font-family: 'Courier New', ui-monospace, monospace;
font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--grau); margin-bottom: 6px;
}
.antrag h3 { font-size: 27px; line-height: 1.25; }
.antrag .genehmigt {
position: absolute; top: -16px; right: 14px;
transform: rotate(6deg);
}
.antrag p { margin-top: 12px; max-width: 520px; }
.bonus-zeile {
margin: 18px 0; padding: 14px 16px;
background: linear-gradient(104deg, transparent 1%, var(--marker) 3%, var(--marker) 97%, transparent 99%);
font-size: 17px;
}
.antrag .klein { font-size: 13.5px; color: var(--grau); margin-top: 14px; }
.antrag .klein a { color: var(--grau); }
/* ---------- FAQ ---------- */
details {
border-bottom: 1px solid rgba(33, 33, 29, 0.2);
padding: 14px 4px;
}
summary {
font-weight: 700; cursor: pointer; font-size: 17.5px;
list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: 'Courier New', monospace; font-size: 22px; color: var(--amtsblau); }
details[open] summary::after { content: ''; }
details p { margin-top: 10px; color: var(--grau); font-size: 16px; max-width: 580px; }
details a { color: var(--amtsblau); }
/* ---------- Fuß ---------- */
.grussformel { margin-top: 64px; font-size: 18px; }
.grussformel .unterschrift {
font-size: 30px; margin: 10px 0 2px;
font-style: italic;
}
.anlage {
margin-top: 26px; padding-top: 14px; border-top: 2px solid var(--tinte);
font-family: 'Courier New', ui-monospace, monospace; font-size: 13.5px; color: var(--grau);
}
footer { margin-top: 20px; font-size: 14.5px; color: var(--grau); }
footer a { color: var(--grau); }
/* Warteliste-Formular (Brevo) */
.wl-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.wl-input {
width: 100%; padding: 15px 16px; font-size: 17px; font-family: inherit;
border: 2px solid var(--tinte); background: #fff; color: var(--tinte);
}
.wl-input::placeholder { color: #9a958a; }
.wl-btn { width: 100%; cursor: pointer; text-align: center; font-family: inherit; }
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Was kostet die App?",
"acceptedAnswer": { "@type": "Answer", "text": "Die App ist gratis. Die ersten 3 Briefe sind auch gratis (mit Code: 5). Danach gibt es ein günstiges Abo. Sie testen zuerst — dann entscheiden Sie." }
},
{
"@type": "Question",
"name": "Welche Briefe kann die App erklären?",
"acceptedAnswer": { "@type": "Answer", "text": "Briefe vom Jobcenter, von der Ausländerbehörde, Rentenversicherung, Krankenkasse, Familienkasse (Kindergeld), vom Finanzamt oder der Bußgeldstelle — kurz: fast jeden offiziellen Brief und Bescheid." }
},
{
"@type": "Question",
"name": "In welche Sprachen übersetzt die App?",
"acceptedAnswer": { "@type": "Answer", "text": "Arabisch, Türkisch, Englisch, Ukrainisch, Russisch, Polnisch, Farsi, Rumänisch und Französisch. Die deutschen Amts-Wörter bleiben sichtbar, damit Sie sie im Brief wiederfinden." }
},
{
"@type": "Question",
"name": "Was passiert mit meinen Briefen?",
"acceptedAnswer": { "@type": "Answer", "text": "Ihre Briefe bleiben auf Ihrem Handy — sicher verschlüsselt. Für die Analyse wird das Foto einmal sicher an die KI geschickt. Nach spätestens 30 Tagen wird es dort gelöscht. Sie brauchen kein Konto." }
},
{
"@type": "Question",
"name": "Ersetzt die App einen Anwalt?",
"acceptedAnswer": { "@type": "Answer", "text": "Nein. Die App erklärt Briefe — sie ist keine Rechtsberatung. Bei wichtigen Entscheidungen (z. B. Widerspruch) hilft eine Beratungsstelle oder ein Anwalt." }
},
{
"@type": "Question",
"name": "Kommt die App auch für Android?",
"acceptedAnswer": { "@type": "Answer", "text": "Ja, Android ist geplant. Das iPhone kommt zuerst. Auf der Warteliste erfahren Sie es als Erste." }
}
]
}
</script>
</head>
<body>
<div class="wrap">
<div class="briefkopf">
<span class="absender">📬 BehördenKlar</span>
<span class="az mono">Az: KLAR-01/2026 &nbsp;·&nbsp; Anlage: 1 App</span>
</div>
<nav class="sprachen" aria-label="Sprache wählen">
🌐
<span class="aktiv">Deutsch</span>
<a href="tr.html" lang="tr">Türkçe</a>
<a href="ar.html" lang="ar">العربية</a>
<a href="en.html" lang="en">English</a>
<a href="uk.html" lang="uk">Українська</a>
<a href="ru.html" lang="ru">Русский</a>
<a href="pl.html" lang="pl">Polski</a>
</nav>
<header>
<p class="betreff-label">Betreff</p>
<h1>Brief vom Amt.<br><span class="markiert">Endlich verstanden.</span></h1>
<p class="anrede">
Sehr geehrte Damen und Herren, <strong>ein Brief vom Amt muss nicht
schwer sein.</strong> Machen Sie ein Foto. BehördenKlar erklärt den
Brief in einfachen Worten. <em>Brief rein. Klartext raus.</em>
</p>
<div class="hero-fuss">
<a class="cta" href="#anmelden">Jetzt anmelden&nbsp;</a>
<span class="stempel">Bald im App&nbsp;Store</span>
</div>
</header>
<section>
<h2><span class="nr">§ 1</span> Vorher und Nachher</h2>
<div class="verwandlung">
<div class="brief-karte amtsdeutsch">
<span class="karten-label">Vorher · Original vom Amt</span>
<p>
„Gemäß § 32 SGB II wird bei Nichterscheinen ohne wichtigen Grund
eine Minderung des maßgebenden Regelbedarfs in Höhe von 10 vom
Hundert für die Dauer eines Monats festgestellt."
</p>
</div>
<p class="pfeil">— 📷 ein Foto später —</p>
<div class="brief-karte klartext">
<span class="karten-label">Nachher · BehördenKlar</span>
<p>
Wenn Sie ohne guten Grund nicht zum Termin kommen, bekommen Sie
einen Monat lang 10&nbsp;% weniger Geld. Gehen Sie hin — oder sagen
Sie rechtzeitig ab.
</p>
<p class="ampelzeile">🔴 Termin in 5 Tagen &nbsp;·&nbsp; ⏰ Erinnerung ist gestellt</p>
</div>
</div>
<p class="quelle-hinweis">
Dazu bekommen Sie: eine Liste, was Sie tun müssen — und wenn Sie
wollen, eine fertige Antwort.
</p>
</section>
<section>
<h2><span class="nr">§ 2</span> Sie sind nicht allein</h2>
<div class="zahlen">
<div class="zahl-karte">
<div class="zahl">6,2 Mio.</div>
<div class="erkl">Erwachsene in Deutschland haben Probleme mit schweren Texten. Behördenbriefe sind für sie besonders schwer.</div>
<div class="quelle">Quelle: LEO-Studie 2018, Uni Hamburg</div>
</div>
<div class="zahl-karte">
<div class="zahl">~ 60 Sek.</div>
<div class="erkl">braucht BehördenKlar, um einen Brief zu erklären — in Deutsch oder 9 weiteren Sprachen.</div>
<div class="quelle">Türkçe · العربية · English · Українська …</div>
</div>
</div>
</section>
<section>
<h2><span class="nr">§ 3</span> So funktioniert es</h2>
<div class="schritte">
<div class="schritt">
<div><strong>Brief fotografieren</strong> <span>Mit dem Handy, auch als PDF. Gutes Licht reicht.</span></div>
</div>
<div class="schritt">
<div><strong>Klartext lesen</strong> <span>„Was will das Amt von mir?" — kurz, einfach, ohne schwere Wörter. Die Ampel zeigt: Wie viel Zeit habe ich noch?</span></div>
</div>
<div class="schritt">
<div><strong>Richtig reagieren</strong> <span>Liste abhaken, Erinnerung stellen, fertige Antwort anpassen und abschicken.</span></div>
</div>
</div>
</section>
<section>
<h2><span class="nr">§ 4</span> Was die App kann</h2>
<div class="koennen">
<div class="kann">Ampel: Wie dringend? 🔴🟡🟢</div>
<div class="kann">Übersetzung in 9 Sprachen</div>
<div class="kann">Fertige Antworten</div>
<div class="kann">Erinnerung vor jeder Frist</div>
<div class="kann">Termine in den Kalender</div>
<div class="kann">Amts-Wörterbuch — auch ohne Internet</div>
<div class="kann">Die App kann vorlesen</div>
<div class="kann">Kein Konto, keine Anmeldung</div>
</div>
</section>
<section id="anmelden">
<h2><span class="nr">§ 5</span> Warteliste</h2>
<div class="antrag">
<span class="stempel genehmigt">Vorab genehmigt ✓</span>
<p class="formular-kopf">Formular F-01 · Warteliste</p>
<h3>Seien Sie früh dabei</h3>
<p>
Tragen Sie sich jetzt ein. Wir schicken Ihnen <strong>eine</strong>
E-Mail, wenn die App fertig ist. Keine Werbung.
</p>
<p class="bonus-zeile">
🎁 <strong>Ihr Dankeschön:</strong> Sie können <strong>5 Briefe
gratis</strong> erklären lassen — statt 3. Den Code bekommen Sie per E-Mail, sobald die App fertig ist.
</p>
<form class="wl-form" action="https://86550585.sibforms.com/serve/MUIFAAvOQCpFg148k-xD2Ze2PDVKKaFEIaLECCCMe9fGKd_uIurPljyn_IhTrkR0EkM_pQp_8VBzcHZ6N9sKDX5GBZi9elYKN6isXGPUUxcAgO37OKhTFZyMlJiC9ikRmPI8Q2tU2GvqP6esJ5ReGfv1htZV_OfXRIgW59P6pkeUsYKxqdXA7nWOaWxNTYz4MzzoGg7czJMJ2fxuEg==" method="POST">
<input class="wl-input" type="email" name="EMAIL" placeholder="Ihre E-Mail-Adresse" required autocomplete="email">
<input type="text" name="email_address_check" value="" style="position:absolute; left:-5000px;" tabindex="-1" autocomplete="off" aria-hidden="true">
<input type="hidden" name="locale" value="de">
<input type="hidden" name="html_type" value="simple">
<button class="cta wl-btn" type="submit">Auf die Warteliste eintragen →</button>
</form>
<p class="klein">
Wir speichern Ihre E-Mail-Adresse nur für diese eine Nachricht.
Sie können sich jederzeit abmelden — <a href="datenschutz.html">Datenschutzerklärung</a>.
</p>
</div>
</section>
<section>
<h2><span class="nr">§ 6</span> Häufige Fragen</h2>
<details>
<summary>Was kostet die App?</summary>
<p>Die App ist gratis. Die ersten 3 Briefe sind auch gratis (mit Code: 5). Danach gibt es ein günstiges Abo. Sie testen zuerst — dann entscheiden Sie.</p>
</details>
<details>
<summary>Welche Briefe kann die App erklären?</summary>
<p>Briefe vom Jobcenter, von der Ausländerbehörde, Rentenversicherung, Krankenkasse, Familienkasse (Kindergeld), vom Finanzamt oder der Bußgeldstelle — kurz: fast jeden offiziellen Brief und Bescheid.</p>
</details>
<details>
<summary>In welche Sprachen übersetzt die App?</summary>
<p>Arabisch, Türkisch, Englisch, Ukrainisch, Russisch, Polnisch, Farsi, Rumänisch und Französisch. Die deutschen Amts-Wörter bleiben sichtbar, damit Sie sie im Brief wiederfinden.</p>
</details>
<details>
<summary>Was passiert mit meinen Briefen?</summary>
<p>Ihre Briefe bleiben auf Ihrem Handy — sicher verschlüsselt. Für die Analyse wird das Foto einmal sicher an die KI geschickt. Nach spätestens 30 Tagen wird es dort gelöscht. Sie brauchen kein Konto. Mehr dazu in der <a href="datenschutz.html">Datenschutzerklärung</a>.</p>
</details>
<details>
<summary>Ersetzt die App einen Anwalt?</summary>
<p>Nein. Die App erklärt Briefe — sie ist keine Rechtsberatung. Bei wichtigen Entscheidungen (z.&nbsp;B. Widerspruch) hilft eine Beratungsstelle oder ein Anwalt.</p>
</details>
<details>
<summary>Kommt die App auch für Android?</summary>
<p>Ja, Android ist geplant. Das iPhone kommt zuerst. Auf der Warteliste erfahren Sie es als Erste.</p>
</details>
</section>
<div class="grussformel">
<p>Mit freundlichen und verständlichen Grüßen</p>
<p class="unterschrift">Ihr BehördenKlar</p>
<div class="anlage">
Anlagen: <a href="impressum.html" style="color: inherit;">Impressum</a> ·
<a href="datenschutz.html" style="color: inherit;">Datenschutzerklärung</a> ·
Kontakt: <a href="mailto:behoerdenbriefhelfer@gmail.com" style="color: inherit;">behoerdenbriefhelfer@gmail.com</a>
</div>
<footer>
Keine Sorge: Diese Seite ist kein echter Amtsbrief. Hier gibt es
keine Frist und kein Kleingedrucktes — nur eine App, die hilft.
</footer>
</div>
</div>
<!-- Cloudflare Web Analytics: cookielose Reichweitenmessung, keine Nutzer-Profile -->
<script type='module' src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "11f017e9a707466b9151921db6125dde"}'></script>
</body>
</html>