Frage zu <p> <span>...

[freakXHTML]

Hallo zusammen,
wenn ich nun meine Website mit Text füllen möchte, wo schreibe ich diesen genau hin? Es ist sicherlich nicht gut diesen einfach in einen div zu schreiben. Benutze ich hier <p> oder nutzt man doch noch Tabellen??

Dazu habe ich gleich eine erste Frage:
Ich habe mit divs das Layout meiner Website gestaltet (mit CSS). Kann ich nun jetzt in einen div ein p-Tag schreiben?

Außerdem kann ich mir folgendes Phänomen nicht erklären:

Ich möchte eine h2 Überschrift in ein p-Tag schreiben. Das sieht dann so aus:

<p style="border:1px solid black;min-height:400px; min-width:685px;">                
 
      <h2 style="border-bottom:1px solid black; width:300px; font-family:Verdana, Arial; font-size:14pt; font-weight:normal;">Gude</h2>
      </p>

Ich habe den p-Absatz mit einem Rahmen sichtbar gemacht. Die h2 Überschrift befindet sich jedoch nicht in diesem, sondern darunter? wenn ich p durch div ersetze, dann befindet sich die Überschrift im Rahmen. Warum???

Vielen Dank für eure Hilfe
lg, freakXHTML

 

[XraYSoLo]

überschriften (<hx>s) stellen eine eigene ebene dar, die man nicht ohne weiteres umschließen kann. versuchs mit <span> oder DIVs.

Nils aka XraYSoLo

 

[fiedel]

Hi freakXHTML!

wenn ich nun meine Website mit Text füllen möchte, wo schreibe ich diesen genau hin? Es ist sicherlich nicht gut diesen einfach in einen div zu schreiben. Benutze ich hier <p> oder nutzt man doch noch Tabellen??

Die Frage ist ganz einfach zu beantworten, wenn dir die Bedeutung der Tags klar ist! Das p-Tag (paragraph = Absatz) verwendest du für Textabsätze, das table-Tag für tabellarische Daten. Die Bedeutung des div-Tags ist die Gruppierung von mehreren Tags/Elementen (mindestens 2).

Ich möchte eine h2 Überschrift in ein p-Tag schreiben.

Das liegt daran, dass es (glaub ich) nicht erlaubt/valide ist.

Gruß,
fiedel

 

[Efchen]

wenn ich nun meine Website mit Text füllen möchte, wo schreibe ich diesen genau hin?

In das Tag, was diesen Text am besten beschreibt. Ein normaler Textabsatz wird durch <p> definiert.

Es ist sicherlich nicht gut diesen einfach in einen div zu schreiben. Benutze ich hier <p> oder nutzt man doch noch Tabellen??

Nein, in <div> oder <table> zu setzen wäre semantisch falsch. Und nur darum gehts bei HTML, um die Semantik.

Ich habe mit divs das Layout meiner Website gestaltet (mit CSS).

Man macht mit HTML kein Layout, also nicht mit <table> und nicht mit <div>, sondern ausschließlich mit CSS. Tags setzt man, um die logische Bedeutung (= Semantik) des Inhalts festzulegen. CSS baut lediglich auf diesen Tags auf.

Kann ich nun jetzt in einen div ein p-Tag schreiben?

Klar. Aber nicht alleine, das würde keinen Sinn machen, denn <div> ist zum Gruppieren da. Und eine Gruppe besteht nunmal immer aus mindestens zweien. Es besteht keine Notwendigkeit, ein <p> in ein <div> zu packen, man packt ja Geschenke auch nur einmal in Einwickelpapier ein.

Ich möchte eine h2 Überschrift in ein p-Tag schreiben.

Das ist Unsinn. Entweder der Inhalt ist eine Überschrift oder ein Textabsatz. Beides ist unlogisch und geht daher auch nicht.

Gruß,
-Efchen

 

[freakXHTML]

Aber ich kann doch das Layout so gestalten ??? !!!:

Ich erstelle divs (Navigation, Header, main content) und positioniere sie mit CSS an die Stelle, wo sie sein sollen?? So erhalte ich doch ein Layout?

Oder ist dies auch falsch?

Vielen Dank
lg, freakXTHML

 

[Efchen]

Aber ich kann doch das Layout so gestalten ??? !!!:
Ich erstelle divs (Navigation, Header, main content) und positioniere sie mit CSS an die Stelle, wo sie sein sollen?? So erhalte ich doch ein Layout?

Du kannst auch mit nem BobbyCar auf der Autobahn fahren.

Aber sinnvoll ist das nicht. Man macht Layout nicht mit HTML, mit keinem Tag, egal ob <div> oder <table> oder sonst irgendeines.

Du musst auch gedanklich Inhalt von Layout trennen.

Nimm Dir Deinen Inhalt.
Schreib ihn nieder.
Zeichne ihn semantisch korrekt mit HTML aus.

Das Ergebnis nimmst Du un formatierst es mit CSS zum gewünschten Layout und Design.

Was Du wahrscheinlich (entnehme ich Deinen anderen Posts) machst, ist zuerst das Layout aufmalen, das dann mit <div> nachbilden und am Ende Deinen Inhalt schreiben. Damit bleibt die Semantik aber idR auf der Strecke und Du bekommst div-Suppe.

Um z.B. eine Navigation zu machen, setzt man nicht ein <div> und schreibt später was da rein, man überlegt vorher, wie man die Bedeutung "Navigation" in HTML auszeichnet - als Liste. Daher setzt mal in den HTML-Code eine <ul> für die Navigation. Kein <div>. Das braucht man nur zum Gruppieren. Ein <div> mit einer <ul> drin ist normalerweise sinnfrei. Du hast ein Block-Element (die Liste) und packst es in noch ein BLock-Element (das div). Wozu? Geschenke packt man eben auch nur einmal ein.

 

[neuroleptika]

..
Ich erstelle divs (Navigation, Header, main content) und positioniere sie mit CSS an die Stelle, wo sie sein sollen?? So erhalte ich doch ein Layout?
Oder ist dies auch falsch?
..

Nein,
das ist nicht falsch.
#navigation, #header und #main-content könnten dein Grundgerüst sein.
Meistens sind das divs die weitere Elemente umschliessen.
Natürlich lassen sich alle Elemente positionieren.

 

[FoXMorayn]

so funktioniert das zuordnen von überschrift und text überall sehr gut:

<h1>
<h2>
<p>
<h2>
<p>

 

[freakXHTML]

Hallo,
vielen Dank für die zahlreichen Antworten. Ich möchte nun alles noch mal mit meinen eigenen Worten zusammfassen und würde euch dann bitten, dies zu bestätigen bzw zu verneinen.

Also: Ich möchte nun eine Website erstellen:

1.) Ich schreibe meinen Text mit XHTML und achte erstmal auf keine Formatierung.

1.1) Ich nutze für "normalen" Text <p> und <span> und wenn ich mehrere Elemente zusammenfassen möchte, nutze ich <div>. (Wenn ich nun aber verschiedene Listen habe, dann müsste ich die doch auch eigentlich in divs zusammenfassen????!!!). Überschriften, Listen, Tabellen usw. stehen in keinen Divs, können aber mittels CSS an die richtige Position gebracht werden.

2.) Danach erstelle ich Stylesheets und erstelle durch Klassen, IDs etc. mein Layout.

Vielen Dank
lg, freakXHTML

 

[Efchen]

1.) Ich schreibe meinen Text mit XHTML und achte erstmal auf keine Formatierung.

Du meinst wahrscheinlich das richtige. Pedantisch wie ich bin, würde ich das nur anders formulieren.
Ich schreibe meinen Text (Inhalt) und zeichne ihn semantisch sinnvoll mit (X)HTML aus. Dabei achte ich nicht auf das Aussehen (CSS-Formatierung).

1.1) Ich nutze für "normalen" Text <p> und <span>

Nein.
Ich nutze für Textabsätze <p>.
Ich nutze für Überschriften <hx> (mit x=1-6).
Ich nutze für Adressen <address>
usw.
<span> ist das "allgemeine Inline-Element", der kleine Bruder von <div>. Verwendet wird es eigentlich nur, um den Teil eines Textes zu markieren, um damit später ein besonderes Aussehen zu erwirken. Allgemeiner Text wird normalerweise nicht einfach so mit <span> ausgezeichnet.

und wenn ich mehrere Elemente zusammenfassen möchte, nutze ich <div>. (Wenn ich nun aber verschiedene Listen habe, dann müsste ich die doch auch eigentlich in divs zusammenfassen????!!!).

Wenn DU mehrere Listen in einem logischen Bereich gruppieren willst, dann fasst Du halt mehrere Listen in einem <div> zusammen. Ja.

Überschriften, Listen, Tabellen usw. stehen in keinen Divs

Nein.
Auch Überschriften, Listen und Tabellen stehen ggfs. in <div>. Wenn sie zu einer logischen Gruppe gehören. Nicht aber, wenn sie als einziges Tag existieren.
a) EIne Banner-Überschrift: Hier reicht ein <h1>, ein zusätzliches <div> ist nicht erforderlich.
b) Links ein Menu (<ul> ohne <div>), floatend, rechts daneben der Content, der nicht "unter das Menü fließen" soll, sondern einen konstanten Abstand nach links haben soll: Hier wird ein <div> benötigt (mit einem festen margin-left), in dem sich natürlich Überschriften, Listn, Tabellen, Textabsätze usw. tummeln. Sie werden zu einem logischen Bereich gruppiert, der außerdem existieren muss, um allen Elementen gemeinsam ein margin-left zu geben.

Überschriften, Listen, Tabellen usw. können aber mittels CSS an die richtige Position gebracht werden.

Jederzeit. Genauso wie alle anderen Elemente.

Danach erstelle ich Stylesheets und erstelle durch Klassen, IDs etc. mein Layout.

Prinzipiell ja.
Wenn Du perfekt bist (was kaum einer schaffen wird :-)) erstellst Du Deine Klassen und IDs schon vorher und musst für Design und Layout nur noch am Stylesheet feilen. Aber das schafft wohl kaum einer, spätestens aufgrund der Browser-Unterschiede sind oft noch Änderungen am HTML-Code notwendig, manchmal ist sogar das ein oder andere <div> nachträglich noch sinnvoll.

Vielen Dank

Gern geschehen!

 

[_Thor_]

1.) Ich schreibe meinen Text mit XHTML und achte erstmal auf keine Formatierung.

Wenn du mit Formatierung das aussehen im Browser meinst, ist das richtig. Das ist erstmal völlig uninteressant.

1.1) Ich nutze für "normalen" Text <p> und <span> und wenn ich mehrere Elemente zusammenfassen möchte, nutze ich <div>. (Wenn ich nun aber verschiedene Listen habe, dann müsste ich die doch auch eigentlich in divs zusammenfassen????!!!). Überschriften, Listen, Tabellen usw. stehen in keinen Divs, können aber mittels CSS an die richtige Position gebracht werden.

Für Texte benutzt du <p>, wenn du innerhalb dieses Elementes einen Teil des Textes anders Formatieren willst, kannst du dafür <span> benutzen, soll dieser Teil jedoch besonders hervorgehoben werden, also wihtiger sein als der Rest, macht man das mit <em> oder <strong>.

Wenn du mehrere Listen hast und diese gemeinsam Formatieren möchtest, kannst du sie mit einem <div> umschließen.

2.) Danach erstelle ich Stylesheets und erstelle durch Klassen, IDs etc. mein Layout.

Richtig.

 

[freakXHTML]

Hallo,
herzlichen Dank für die Antworten. Ich bin schon um einiges weiter. Doch eine Frage zu den überschriften muss ich dennoch stellen. Ich weiß, dass ich mit h1 Überschriften anfangen sollte und erst dann h2, h3... nutzen soll.

Wenn ich nun meinen "content-Absatz" habe, und verschiedene Überschriften nutzen möchte, die jedoch alle gleich aussehen...soll ich dann immer h1 nutzen oder soll ich h1, h2, h3 nutzen und diese mit CSS so formatieren, dass die gleich aussehen???

Vielen Dank
lg, freakXHTML

 

[thuemmy]

Mit dem h1 bis h6 unterscheidest Du die Wertigkeit der Überschrift. Wie die nachher aussehen sollen, ist egal.

Gruß thuemmy

Stell es Dir so vor:

h1 - Das Leben von Peter Lustig
h2 - Kindergartenzeit
h2 - Schule
h3 - Grundschule
h3 - Gymnasium
h4 - Unterstufe
h4 - Mittelstufe
h4 - Oberstufe
h2 - Arbeitsleben

usw.

Gruß thuemmy

 

[_Thor_]

Man benutzt die Überschirft, die der Ebene entspricht, in welcher sie sich befindet.

Semantik -> HTML
Aussehen -> CSS

Damit sollte deine Frage eigentlich beantwortet sein.

 

[Bernhard]

...soll ich dann immer h1 nutzen oder soll ich h1, h2, h3 nutzen und diese mit CSS so formatieren, dass die gleich aussehen???

Vielen Dank
lg, freakXHTML

Vergleiche es mit einer Zeitung: jede Seite hat eine wichtigste Überschrift,
das ist <h1>. <h1> darf auf einer Seite nur einmal vorkommen.

Grüße
Bernhard

 

[Efchen]

Wenn ich nun meinen "content-Absatz" habe, und verschiedene Überschriften nutzen möchte, die jedoch alle gleich aussehen...

*meep*

Ich muss es auch nochmal ganz deutlich sagen, damit es wirklich ankommt :-)

Wie die *aussehen* sollen, ist bei der Auszeichnung mit HTML irrelevant. Es geht hier nur um die Wichtigkeit, die "Ordnung" der Überschrift. Hast Du gleichwertige Überschriften, bekommen die alle den selben Tag.

Beispiel:

<h1>Seitentitel</h1>
<h2>1. xxx</h2>
<h3>1.1 xxx</h3>
<h4>1.1.1 xxx</h4>
<h4>1.1.2 xxx</h4>
<h3>1.2 xxx</h3>
<h3>1.3 xxx</h3>
<h2>2. xxx</h2>
<h3>2.1 xxx</h3>

 

[freakXHTML]

Hey,
vielen Dank für die Antworten. Ich verstehe immer mehr!! Wenn ich nun ein Bild einbaue, muss ich den img-Tag in ein div, p, span etc einbauen. Warum?

Da muss ich dann ja gegenenfalls ein div nutzen, obwohl ich gar keine Elemente zusammenfassen möchte.

Wenn ich ein einzelnes Bild darstellen will....worein schreibe ich mein img-Tag?

vielen dank
lg, freakXHTML

 

[Bernhard]

Hey,
vielen Dank für die Antworten. Ich verstehe immer mehr!! Wenn ich nun ein Bild einbaue, muss ich den img-Tag in ein div, p, span etc einbauen. Warum?

Da muss ich dann ja gegenenfalls ein div nutzen, obwohl ich gar keine Elemente zusammenfassen möchte.

Wenn ich ein einzelnes Bild darstellen will....worein schreibe ich mein img-Tag?

vielen dank
lg, freakXHTML

Nein, dann verwendest Du einfach nur das img-Tag und gibst diesem eine id oder
eine Klasse, so dass Du ihm mittels CSS Eigenschaften geben kannst.

Grüße
Bernhard

 

[_Thor_]

In XHTML1.0 strict muss ein <img> allerdings in einem Blockelement stehen, daher wäre ein <p> denkbar, wenn das Bild zwischen 2 Texten steht, oder eben ein <div>.

Umgehen kann man das ganze, indem man den gesamten Content gruppiert.

 

[Efchen]

Bilder: Da gibts auch was zu beachten.

Es gibt zwei Arten von Bildern:
1. Bilder, die Content darstellen oder den Content unterstützen.
2. Bilder, die nur zur Zierde sind.

Wenn Du richtig aufgepasst hast, weißt Du, worauf ich hinaus will.

Bilder der Variante 1 gehören in den HTML-Code, also in ein <img>-Tag. Da diese Art von Bildern für gewöhnlich den TExt unterstützen, passen sie am besten in den daugehörigen <p>. Content-Images sind aber auch Banner, in denen eine Überschrift steht. Solche Bilder stehen dann natürlich in einem entsprechenden Überschrifts-Tag, z.B.

<h1><img src="banner.jpg" alt="Herzlich Willkommen bei schlumpf.info!" /></h1>

Bilder, die nur zur Zierde sind, haben mit dem Content nichts zu tun, haben also auch im HTML-Code nichts zu suchen (welchen Wert sollte man da dem alt-Attribut auch geben? "Bild"? Welche Suchmaschine oder welchen Vorlesebrowser interessiert das?), die kommen in den CSS-Code: als Hintergrundbild.
In dem Fall wird man höchstwahrscheinlich sogar ein einzelnes, leeres <div> in den Code stellen, dem dann mit height/width die Größe des BIldes und per background das Bild zugewiesen wird. Hier kann ein leeres <div>, das also auch nicht zum Gruppieren da ist, durchaus Sinn machen.