nicht angemeldet
brauch Hilfe beim formatieren von Text
Matthias Scharwies
Tabellenkalk
TS
Gunnar Bittersmannhey,
ich bekomme einen bestimmten Text nicht formatiert. Ich würde gerne einen Hintergrund für einen bestimmten Text bestimmen und entsprechend den Ausenabstand (margin) oder Innenabstand (padding) anpassen, damit ich einen schönen großen Hintergrund habe.
Ich schaff es aber nicht den Abstand zwischen den Texten zu vergrößern und die Hintergründe überlappen sich dann. Selbst höhe (height) funktioniert nicht bei mir. Was ich verändern kann mit margin ist der Abstand von links und rechts, aber nicht von oben und unten.
Ich muß noch dazu sagen das ich in der Lernphase bin. Hoffe ihr könnt mir helfen. Es geht um den Abschnitt "<strong>".
Hier mal meine CSS-Datei.
/* Normalisierung */
body {
background: gray;
font-family:Arial;
}
h1, h2, h3, p, span, strong { color: #404040; }
strong {
padding: 1em;
margin: 1em 1em;
color: red;
background: rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 0 DarkRed, 1px -1px 0 DarkRed, -1px 1px 0 DarkRed, -1px -1px 0 DarkRed;
text-decoration:underline;
}
a[href] { color: blue; }
table, th, tr, td {
padding: 0;
margin: 0;
border-style: dotted;
}
ul, ol, li, dl, dt, dd {
display: block;
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: list-item;
margin-left: 2em;
}
@media print {
body { background: white; }
h1, h2, h3, p, span, strong { color: black; }
a[href] {
color: black;
text-decoration: none;
}
}
Und hier meine HTML.
<!doctype html>
<html>
<head>
<!-- HTML-Type -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link href="main.css" rel="stylesheet" type="text/css" />
<!-- Titel, Beschreibung und Stickwörter-->
<title>Suleiman's Heimat 2.0</title>
<meta name="description" content="Privater Server welcher zum Lernen benutzt wird.">
<meta name="keywords" content="suleiman, Suleiman, SULEIMAN">
<!-- Den Inhalt nicht an Suchmaschienen übermitteln
und die Suchmaschienen dürfen nicht Hyper-Links folgen -->
<meta name="robots" content="noindex,nofollow">
</head>
<body>
<section id="menubar"><ul>
<li><a class="menubutton" href="#menu"><img src="menu.png"></a></li>
</ul></section>
<header><ul>
<li><h1>Heimat 2.0</h1></li>
</ul><header>
<nav class="nav"><ul>
<li><a href="index.html" class="active">Übersicht</a></li>
<li><a href="#">Blog's</a></li>
<li><a href="#">rubbel die Katz</a></li>
<li><a href="../test02/">Test02</a></li>
<li><a href="#">Allgemeine Info's</a></li>
</ul></nav>
<section id="main">
<h2>Überschrift</h2>
<p>Hier entsteht ein Text.</p>
<strong>Beispiel für einen ... <br>wichtigen Textblock.</strong>
<p>Noch mehr ..<br>Textblock.</p>
</section>
<footer><ul>
<li>Suleiman © 2017</li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Impressum</a></li>
</ul></footer>
</body>
</html>
-
Servus!
Ich muß noch dazu sagen das ich in der Lernphase bin.
Herzlich willkommen.
Hoffe ihr könnt mir helfen. Es geht um den Abschnitt "<strong>".
strong ist ein Inline-Element, das innerhalb von p stehen muss. Dieses p (paragraph) ist ein Block-Element, das du dann mit margin, padding, height, etc beliebig gestalten kannst.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Danke, das war der Fehler.
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
-
Hallo,
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
D.h. du hast einen „wichtigen Textblock“ in ein Überschriftselement gepackt. Ich bin mir nicht sicher, ob man da wirklich von „es funktioniert“ sprechen kann!
Gruß
Kalk-
Servus!
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
D.h. du hast einen „wichtigen Textblock“ in ein Überschriftselement gepackt. Ich bin mir nicht sicher, ob man da wirklich von „es funktioniert“ sprechen kann!
Ich würde lieber
<p id="kernaussage">...</p>verwenden und dies dann beliebig mit CSS gestalten:#kernaussage { margin: 1em auto; max-width: 70%; font-size: 300%; font-weight: bold; color: hotpink; }Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hello,
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
D.h. du hast einen „wichtigen Textblock“ in ein Überschriftselement gepackt. Ich bin mir nicht sicher, ob man da wirklich von „es funktioniert“ sprechen kann!
Ich würde lieber
<p id="kernaussage">...</p>verwenden und dies dann beliebig mit CSS gestalten:Wenn es im gesamten Dokument nur eine "Kernaussage" gibt...
#kernaussage { margin: 1em auto; max-width: 70%; font-size: 300%; font-weight: bold; color: hotpink; }Herzliche Grüße
Matthias Scharwies
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
Servus!
Ich würde lieber
<p id="kernaussage">...</p>verwenden und dies dann beliebig mit CSS gestalten:Wenn es im gesamten Dokument nur eine "Kernaussage" gibt...
ok, dann doch ne Klasse!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hello,
Ich würde lieber
<p id="kernaussage">...</p>verwenden und dies dann beliebig mit CSS gestalten:Wenn es im gesamten Dokument nur eine "Kernaussage" gibt...
ok, dann doch ne Klasse!
Naja, für Suleiman sind ja alle Möglichkeiten interessant. Fehlt jetzt also noch Gunnar, der aufzeigt, dass es bei wiederkehrendem Zusammenhang im Markup auch ganz ohne Klassen geht ;-)
Wenn z. B. der erste Absatz hinter einer <h2>-Überschrift immer eine Kurzübersicht geben soll, die dann fett gedruckt|gerendert werden soll und mit einem großen Buchstaben (ich kenne den Begriff dafür nicht, halt wie oft in Märchenbüchern üblich...) beginnen soll, dann geht das ja auch anders 😀
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
Servus!
Wenn z. B. der erste Absatz hinter einer <h2>-Überschrift immer eine Kurzübersicht geben soll, die dann fett gedruckt/gerendert werden soll und mit einem großen Buchstaben (ich kenne den Begriff dafür nicht, halt wie oft in Märchenbüchern üblich...) beginnen soll, dann geht das ja auch anders 😀
Initiale
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
@@TS
Ich würde lieber
<p id="kernaussage">...</p>verwenden und dies dann beliebig mit CSS gestalten: ok, dann doch ne Klasse!Fehlt jetzt also noch Gunnar, der aufzeigt, dass es bei wiederkehrendem Zusammenhang im Markup auch ganz ohne Klassen geht ;-)
Nein, es fehlt noch Gunnar, der aufzeigt, dass ihr beide falsch liegt und weder eine Klasse noch eine ID genügen, um eine besondere Bedeutung auszuzeichnen.
Ach, da isser ja.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
-
-
Hello,
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
HTML dient der semantischen und funktionellen Auszeichnung von Elementen. HTML unterscheidet im Wesentlichen zwischen Blockelementen, denen Du dann auch Höhe und Breite zuweisen kannst und Inlineelementen, die immer in einem Blockelement als Elternelement stehen müssen.
In deinem Fall könnte man jetzt sagen:
Absatz | nimm ein <p>
mit besonderer Bedeutung | gib ihm eine Klasseund der Klasse weist Du dann im CSS die passenden Eigenschaften zu, die noch fehlen, also noch nicht von der Elternelementstruktur ererbt wurden.
<p class="wichtig">Hier steht die Beschreibung zum Chef: blond, blöd, betrunken.<p>p.wichtig { font-weight: bolder; color: red; }Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
@@TS
HTML dient der semantischen und funktionellen Auszeichnung von Elementen.
Wenn du genauer erklären würdest, was du damit genau meinst, würde ich dir vermutlich widersprechen.
HTML unterscheidet im Wesentlichen zwischen Blockelementen, denen Du dann auch Höhe und Breite zuweisen kannst und Inlineelementen …
Nein, HTML weiß nichts über Höhe und Breite. CSS weiß. Es muss heißen: „CSS unterscheidet im Wesentlichen …“
… Inlineelementen, die immer in einem Blockelement als Elternelement stehen müssen.
Nein, dem ist nicht so. Beispiel:
<p><strong>Now, Therefore <em>the General Assembly</em> proclaims <em>this Universal Declaration of Human Rights</em></strong> as a common standard of achievement for all peoples and all nations, to the end that every individual and every organ of society, keeping this Declaration constantly in mind, shall strive by teaching and education to promote respect for these rights and freedoms and by progressive measures, national and international, to secure their universal and effective recognition and observance, both among the peoples of Member States themselves and among the peoples of territories under their jurisdiction.</p>Die
em-Elemente haben einstrong-Element als Elternelement, was kein Blockelement ist.Du meintest wohl: als Vorfahrenelement. Dem ist immer so, da Inhalte in
bodyundhtmlstehen.In deinem Fall könnte man jetzt sagen:
Absatz | nimm ein <p>
mit besonderer Bedeutung | gib ihm eine KlasseUnd wie wäre damit die besondere Bedeutung im Markup verankert? Also wie wird die besondere Bedeutung allgemein zugänglich? Gar. Nicht.
Zur Auszeichnung einer besonderen Bedeutung braucht man ein besonderes Element:
<p><strong> … </strong></p>oder<p><em> … </em></p>und der Klasse weist Du dann im CSS die passenden Eigenschaften zu,
Webseiten sollten auch ohne CSS funktionieren.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hello,
HTML unterscheidet im Wesentlichen zwischen Blockelementen, denen Du dann auch Höhe und Breite zuweisen kannst und Inlineelementen …
Nein, HTML weiß nichts über Höhe und Breite. CSS weiß. Es muss heißen: „CSS unterscheidet im Wesentlichen …“
Heute kann ich wieder ganz viel lernen.
Wie macht man denn das, dass mit CSS die Elemente angezeigt werden? Ist das schon CSS 5.0 - geht ganz ohne HTML?
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
Hallo,
Wie macht man denn das, dass mit CSS die Elemente angezeigt werden?
Zum Anzeigen verwendet man üblicherweise einen sogenannten Browser, der das mitgelieferte CSS und/oder sein Default-CSS dafür verwendet.
Gruß
Kalk-
Hello,
Wie macht man denn das, dass mit CSS die Elemente angezeigt werden?
Zum Anzeigen verwendet man üblicherweise einen sogenannten Browser, der das mitgelieferte CSS und/oder sein Default-CSS dafür verwendet.
Ach, das ist also so geblieben?!
Sichtbar gemacht wird das Ganze also immer noch mit Hilfe eines Browsers. Aber wie weiß der dann, welche Elemente er anzeigen soll, wenn es kein HTML mehr gibt? Also wie das nur mit CSS funktionieren soll, ist mir schleierhaft. Aber warten wir Gunnars Erklärung dazu doch einfach ab ;-P
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
Hallo,
Sichtbar gemacht wird das Ganze also immer noch mit Hilfe eines Browsers. Aber wie weiß der dann, welche Elemente er anzeigen soll, wenn es kein HTML mehr gibt?
Hab ich was überlesen? Gunnar schreibt nicht, dass es kein HTML mehr gibt, er schreibt, dass HTML nix über Höhe und Breite weiß, weil HTML nur für die Struktur und Semantik zuständig ist.
Gruß
Kalk-
@@Tabellenkalk
weil HTML nur für die Struktur und Semantik zuständig ist.
Was meinst du mit „Semantik“?
Semantik bezogen auf die Dokumentstruktur? Ja, dafür ist HTML zuständig. Dann verstehe ich aber die Doppelung „Struktur und Semantik“ nicht.
Sematik bezogen auf den Dokumentinhalt? Nein, das kann HTML nicht. Dazu bedarf es Auszeichnung in einem allgemein verständlichen Vokabular wie Schema.org (Dublin Core, …), in HTML eingebettet mit RDFa (oder microdata, würg).
LLAP 🖖
PS: Das ist die Stelle, wo ich schon bei @TS Widerspruch angemeldet hatte.
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
weil HTML nur für die Struktur und Semantik zuständig ist.
Was meinst du mit „Semantik“?
Semantik bezogen auf die Dokumentstruktur? Ja, dafür ist HTML zuständig. Dann verstehe ich aber die Doppelung „Struktur und Semantik“ nicht.
In dem Sinne, dass HTML mit der Struktur eine Grundlage für die Semantik liefert:
„Hey HTML, wat meinste mit ‚h1‘?“
„jeah, this is a first heading!“
„Na, dann lass uns doch ‚Hauptüberschrift‘ sagen!“Gruß
Kalk-
@@Tabellenkalk
In dem Sinne, dass HTML mit der Struktur eine Grundlage für die Semantik liefert:
Nicht wirklich. Bei der (auf den Inhalt bezogenen) semantischen Auszeichnung ist es völlig egal, an welche HTML-Elemente die Attribute
typeofundproperty(bzw.itemtypeunditemprop) gekoppelt werden.„Hey HTML, wat meinste mit ‚h1‘?“
„jo, det is a erstes heading!“
„Na, dann lass uns doch ‚Hauptüberschrift‘ sagen!“Mit
h1ist klar, dass es sich um eine Überschrift handelt. Es ist aber nicht klar, was die Überschrift besagt.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hello,
Mit
h1ist klar, dass es sich um eine Überschrift handelt. Es ist aber nicht klar, was die Überschrift besagt.Könnten wir uns dann auf den Begriff Metasemantik einigen? HTML ist ja sozusagen die Körpersprache des Inhaltes.
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
Hallo,
Mit
h1ist klar, dass es sich um eine Überschrift handelt.Aber nur, weil du weißt, wofür das „h“ steht. Es könnte genausogut für „hide“, „hoax“ oder „hutzliputz“ stehen.
Es ist aber nicht klar, was die Überschrift besagt.
Jetzt willst du dir den Inhalt anschauen. Das ist nach meinem Verständnis der Semantik nicht deren Aufgabe.
Gruß
Kalk-
@@Tabellenkalk
Mit
h1ist klar, dass es sich um eine Überschrift handelt.Aber nur, weil du weißt, wofür das „h“ steht.
Ein HTML-Parser weiß das auch.
Es könnte genausogut für „hide“, „hoax“ oder „hutzliputz“ stehen.
Diese hätten aber nicht implizit
role="heading". ;-bEs ist aber nicht klar, was die Überschrift besagt.
Jetzt willst du dir den Inhalt anschauen. Das ist nach meinem Verständnis der Semantik nicht deren Aufgabe.
Nicht bei Semantik von HTML, eben. Deshalb frage ich mich ja, warum du „weil HTML nur für die Struktur und Semantik zuständig ist“[1] schriebst und was denn da der Unterschied zwischen Struktur und Semantik wäre.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
Hervorhebung von mir ↩︎
-
Hallo,
Deshalb frage ich mich ja, warum du „weil HTML nur für die Struktur und Semantik zuständig ist“[^1] schriebst und was denn da der Unterschied zwischen Struktur und Semantik wäre.
Wie ich bereits schrieb: HTML liefert die Grundlage für die Semantik.
Eine Struktur als Gerüst muss ja erstmal nicht sinnbehaftet sein. Die Semantik baut als Rolle der Bedeutung darauf dann eine gewisse Sinnhaftigkeit auf.Gruß
Kalk -
Hello,
Mit
h1ist klar, dass es sich um eine Überschrift handelt.Aber nur, weil du weißt, wofür das „h“ steht.
Ein HTML-Parser weiß das auch.
Welche Sprachregelung soll denn nun gelten? Hak mal bitte ab, oder mach dein Totenkreuz daneben...
- HTML ist eine Beschreibungssprache mit der Struktur und Metasyntax von Inhalten beschreiben werden
- Mit HTML werden Elemente in einer verzweigten Baumstruktur erzeugt
- HTML kann diesen Elementen Funktionalitäten zuweisen
- Diesen Elementen können mit CSS weitere Eigenschaften für die optische Anordnung und Darstellung (Design) zugewiesen werden
- Mit JavaScript kann auf die Elemente, deren Funktionseigenschaften (Attribute) und deren Design zugegriffen werden und man kann sie (teilweise?) damit verändern.
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
@@TS
Welche Sprachregelung soll denn nun gelten? Hak mal bitte ab, oder mach dein Totenkreuz daneben...
1. HTML ist eine Beschreibungssprache mit der Struktur und Metasyntax von Inhalten beschreiben werden
☠ für Struktur. Was genau meinst du mit Metasyntax?
2. Mit HTML werden Elemente in einer verzweigten Baumstruktur erzeugt
☠ Im Browser wird aus HTML das DOM generiert, ja.
3. HTML kann diesen Elementen Funktionalitäten zuweisen
Was meinst du damit? HTML-Elemente wie
a,form,button(wenn Submit-Button),details,audio, video` haben Funktionalitäten. (☠)4. Diesen Elementen können mit CSS weitere Eigenschaften für die optische Anordnung und Darstellung (Design) zugewiesen werden
☠
5. Mit JavaScript kann auf die Elemente, deren Funktionseigenschaften (Attribute) und deren Design zugegriffen werden und man kann sie (teilweise?) damit verändern.
Wenn wir genau sein wollen (was wir bei „Welche Sprachregelung soll denn nun gelten?“ wohl wollen), dann hat das nichts mehr mit HTML zu tun. Mit JavaScript kann man das DOM ändern.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
☠
[ ] Du hast begriffen, was ein Totenkopf symbolisiert.
Gruß
Kalk -
Hello,
Welche Sprachregelung soll denn nun gelten? Hak mal bitte ab, oder mach dein Totenkreuz daneben...
1. HTML ist eine Beschreibungssprache mit der Struktur und Metasyntax von Inhalten beschreiben werden
☠ für Struktur. Was genau meinst du mit Metasyntax?
Du bringst mich vollkommen durcheinander! Ich meinte "Meta-Semenatik", also die Gliederung der Elemente durch Überschriften, Blöcke, Absätze, (Bilder-)Reihen, Tabellen, ...
2. Mit HTML werden Elemente in einer verzweigten Baumstruktur erzeugt
☠ Im Browser wird aus HTML das DOM generiert, ja.
3. HTML kann diesen Elementen Funktionalitäten zuweisen
Was meinst du damit? HTML-Elemente wie
a,form,button(wenn Submit-Button),details,audio, video` haben Funktionalitäten. (☠)Und weitere können durch Attribute gesteuert werden.
4. Diesen Elementen können mit CSS weitere Eigenschaften für die optische Anordnung und Darstellung (Design) zugewiesen werden
☠
5. Mit JavaScript kann auf die Elemente, deren Funktionseigenschaften (Attribute) und deren Design zugegriffen werden und man kann sie (teilweise?) damit verändern.
Wenn wir genau sein wollen (was wir bei „Welche Sprachregelung soll denn nun gelten?“ wohl wollen), dann hat das nichts mehr mit HTML zu tun. Mit JavaScript kann man das DOM ändern.
Was soll ich aber mit JavaScript ohne das DOM, also auch HTML?
Wäre schön, wenn wir uns mal einig werden könnten über die Begrifflichkeiten und Zusammenhänge des ganzen Paketes. Das hat schließlich auch Einfluss auf alles Geschreibsel, was wir hier (z. B. fürs Wiki) von uns geben.
Und das Gesamtkunstwerk könnten wir dann mal als Skizze verewigen, aus der die Zusammenhänge ganz klar werden. Da kann dann auch das/ein/diverse Backends andocken.
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
@@TS
Was soll ich aber mit JavaScript ohne das DOM, also auch HTML?
Ohne Dom gar nichts, aber das DOM muss ja nicht mit HTML generiert werden.
Das HTML könnte so aussehen:
<!DOCTYPE html> <title>My SPA</title> <script src="my-spa.js"></script>Der Rest (die Generierung des DOM) passiert mit JavaScript.
LLAP 🖖
PS: Vielleicht sollte man noch
<noscript>Ohne JavaScript läuft hier gar nichts!</noscript>einfügen.--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hello,
Was soll ich aber mit JavaScript ohne das DOM, also auch HTML?
Ohne Dom gar nichts, aber das DOM muss ja nicht mit HTML generiert werden.
Das HTML könnte so aussehen:
<!DOCTYPE html> <title>My SPA</title> <script src="my-spa.js"></script>Der Rest (die Generierung des DOM) passiert mit JavaScript.
LLAP 🖖
PS: Vielleicht sollte man noch
<noscript>Ohne JavaScript läuft hier gar nichts!</noscript>einfügen.Das sind jetzt aber "alternative Fakten" frei nach Donald Duck ;-)
Was wird denn im DOM von JavaScript generiert? Wie kann ich die Struktur denn visualisieren, die da im Speicher schlummert?
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
@@TS
Das sind jetzt aber "alternative Fakten" frei nach Donald Duck ;-)
Nein.
Was wird denn im DOM von JavaScript generiert?
Dazu musst du natürlich in my-spa.js reinschauen:
var element, textNode; element = document.createElement('h1'); textNode = document.createTextNode('My SPA'); element.appendChild(textNode); document.body.appendChild(element);Wie kann ich die Struktur denn visualisieren, die da im Speicher schlummert?
Im Browser deiner Wahl. In dessen Entwicklungswerkzeug.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hello,
Wie kann ich die Struktur denn visualisieren, die da im Speicher schlummert?
Im Browser deiner Wahl. In dessen Entwicklungswerkzeug.
Wie würde man sie denn auf Papier dokumentieren?
Liebe Grüße
Tom S.--
Die Krawatte ist das Kopftuch des Westens
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@suleiman1
Ich habe <strong> durch <h3> ersetzt und schon funktioniert es.
Nein. „Beispiel für einen ... wichtigen Textblock“ ist keine Überschrift, also kein
h3.Du darfst HTML-Elemente nicht danach wählen, ob dir deren von Browser vorgegebene Darstellung gefällt.
Manche Nutzer (von Screenreadern) springen auf einer Seite von Überschrift zu Überschrift. Die Navigation wird ihnen erschwert bis unmöglich gemacht, wenn
-
Überschriften nicht als solche ausgezeichnet sind, sondern als
<div class="heading"> -
Texte als Überschriften ausgezeichnet sind, obwohl sie keine Überschriften sind.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
-
-
-
@@suleiman1
Es geht um den Abschnitt "<strong>".
margin-topundmargin-bottomwirkt nicht beidisplay: inline, d.h. Inline-Elemente haben keinen vertikalen Abstand.Elemente mit
display: inline-blockaber schon.
body { font-family:Arial; }Nutzer, die kein Arial auf ihrem System haben, bekommen den Text dann in der Defaultschriftart des Browsers zu sehen. Das ist dann oft eine Serifenschriftart wie Times New Roman.
Wenn du das nicht willst, unbedingt die generische Schriftfamilie angeben, hier
sans-serif.Auf Systemen, die sowohl Arial als auch Helvetica bzw. Neue Helvetica installiert haben, wird man wohl nicht Arial wollen. Die Angabe sollte so aussehen:
body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
<!doctype html> <html>Hier fehlt die Angabe der Sprache des Inhalts (in dem Fall Deutsch). Das sollte so aussehen:
<!DOCTYPE html> <html lang="de"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Das kannst du in HTML5 kürzer haben:
<meta charset="utf-8" /><link href="main.css" rel="stylesheet" type="text/css" />Die
type-Angabe ist überflüssig.<section id="menubar"><ul> <li><a class="menubutton" href="#menu"><img src="menu.png"></a></li> </ul></section>Dem
imgfehlt der Alternativtext. Wedersectionnochul/lisind hier gerechtfertigt. Das ist einfach:<a class="menubutton" href="#menu"><img src="menu.png" alt="zum Menü"></a><header><ul> <li><h1>Heimat 2.0</h1></li> </ul><header>Ebenfalls kein
ul/li.<section id="main"> <h2>Überschrift</h2> <p>Hier entsteht ein Text.</p> <strong>Beispiel für einen ... <br>wichtigen Textblock.</strong> <p>Noch mehr ..<br>Textblock.</p> </section>Für den Hauptinhalt nicht
section, sondernmainverwenden:<main id="main"> <h2>Überschrift</h2> <p>Hier entsteht ein Text.</p> <strong>Beispiel für einen ... <br>wichtigen Textblock.</strong> <p>Noch mehr ..<br>Textblock.</p> </main>LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory