• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

welche Attribute in HTML und welche in CSS

Morphues

Neues Mitglied
hallo, liebes forum

ich habe vor eine woche angefangen mich mit dem programmieren zu beschäftigen die Grundlagen von HTML und CSS habe ich jetzt durch, ich möchte jetzt eine eigene Webseite einrichten rein zum üben, und ich bin auf ein folgendes Problem gestoßen und zwar welche Attribute gehören in HTML und welche sollte man lieber in CSS schreiben? würde mich für eine antwort verdammt freuen:D


Gruss Morph
 
HTML strukturiert, CSS formatiert, JavaScript dynamisiert.

Es gibt zwei zulässige Formatierungsattribute in HTML: <em> und <strong>. Der Rest ist CSS.
 
hallo, nein ich meinte welche Attribute sollten auf ein Stylesheet zugewiesen werden.

Beispiel: man kann z.b denn Hintergrund in HTML schreiben man kann aber auch einen Hintergrund auf ein Stysheet zuweisen.

Gruss
 
Es gibt zwei zulässige Formatierungsattribute in HTML: <em> und <strong>. Der Rest ist CSS.
Gefragt war aber nach Attributen.
Da gibts im <font>-Tag size, face, color; im <body>-Tag alink, vlink, link, hlink, bgcolor; bei <table> border; dazu bei fast allen Tags width und height.
Mehr fällt mir spontan nicht ein. Keines von denen sollte aber verwendet werden. Mir ist kein Fall bekannt, bei dem es sinnvoll wäre in HTML zu formatieren.



 
Ob es da Vorschriften gibt, glaub ich nicht, sonst würde es auch keinen Sinn machen, dass man CSS sowohl global als auch bei den HTML-Elementen angeben kann. Ich persönlich mache es so:

Alles, was global wirken soll, wie Farben, allgemeine Schriftgrößen, Hintergrund, .... habe ich auch global in einer CSS-Datei und weise es den Elementen über class oder id zu. Alles was nur auf einer Seite für deren Layout wichtig ist (wie die spezielle Anordnung von Elementen) lasse ich auch lokal. So bleibt die CSS relativ überschaubar und bei speziellem Layout ändere ich halt die entsprechende Seite.
 
Tronjer schrieb:
Es gibt zwei zulässige Formatierungsattribute in HTML: <em> und <strong>.

Ich habe es jetzt nicht extra nachgeschlagen, aber em und strong sind Elemente, keine Attribute, und haben meines Wissens eine ausschließlich semantische Bedeutung. em heißt nicht „kursiv“, sondern „betont“ und strong heißt nicht „fett“, sondern „hervorgehoben“ oder sowas in der Art. Ob eine Betonung nun kursiv dargestellt wird oder blau mit grün gepunktetem Rand, ist semantisch gesehen irrelevant. Das ist Sache des Stylesheets.

Die Attribute zur Formatierung von HTML-Elementen (siehe alogheo) sind fast durchgehend veraltet und sollten nicht mehr verwendet werden. Gleiches gilt für reine Formatierungs-Elemente wie font. Das gehört ins CSS.

NetAktiv schrieb:
Alles was nur auf einer Seite für deren Layout wichtig ist (wie die spezielle Anordnung von Elementen) lasse ich auch lokal.

Damit meinst du sicherlich das style-Attribut, also Inline-Styles, oder das style-Element im Header.

- SELFHTML: Stylesheets / CSS-Formate definieren / HTML-Elemente direktformatieren
- SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden
 
Ich habe es jetzt nicht extra nachgeschlagen, aber em und strong sind Elemente, keine Attribute, und haben meines Wissens eine ausschließlich semantische Bedeutung. em heißt nicht „kursiv“, sondern „betont“ und strong heißt nicht „fett“, sondern „hervorgehoben“ oder sowas in der Art. Ob eine Betonung nun kursiv dargestellt wird oder blau mit grün gepunktetem Rand, ist semantisch gesehen irrelevant. Das ist Sache des Stylesheets.

Stimmt, das war von mir nicht ganz sauber formuliert. Genaugenommen handelt es sich dabei um Inline-Elemente zur logischen Auszeichnung, deren Interpretation vom Browser übernommen wird, und die ohne weitere Style-Zuweisung den Text fett, bzw. kursiv darstellen. Ich verwende sie gelegentlich alternativ zu <span>, wenn ich innerhalb von Blockelementen Klassen vergeben will. Die Verwendung von Style-Attributen im Head macht dann Sinn, wenn man globale Stylesheets bewusst überschreiben will, bsw. bei einer Website mit vielen einzelnen Seiten, von denen mit Ausnahme einiger weniger alle gleich formatiert sein sollen. Von Style-Zuweisungen in Tags halte ich wiederum nichts, weil sie bei Änderungen einen vergleichbaren Schreibaufwand erzeugen, wie die Zuweisung von Attributen über HTML.

Da ich mich mit meinem Erfahrungslevel selber noch zu den Einsteigern zähle, lasse ich mich hier aber auch gerne korrigieren.
 
um sicher zu stellen also attribute wie:

style
width
height
align
valign
colspan
rowspan


sollte man nicht mehr verwenden? aber wie kann man dann die breite und die höhe eines bildes verändern wenn man das "width" und "height" nicht benutzen darf? gibts dafür eine neue lösung?


Gruss
 
Inline-CSS ist nun nicht verboten, style kann durchaus genutzt werden.
Höhe und Breite eben per CSS definieren, entweder inline oder per Stylesheet
 
Inline-CSS ist nun nicht verboten, style kann durchaus genutzt werden.
Höhe und Breite eben per CSS definieren, entweder inline oder per Stylesheet


dass die attribute nicht verboten sind ist schon klar, wenn die profis meinen dass die attribute nicht mehr verwendbar sind sollte man sich vielleicht auch daran halten?
 
Style dient zur Zuweisung von CSS und kann natürlich verwendet werden. Width und height im image tag sind auch zulässig, sofern dabei die Proportionen des Originalbildes beibehalten werden und es nicht vergrößert wird. Sauberer ist es allerdings, Bilder in Photoshop auf das gewünschte Format zu bringen.
 
Viele HTML-Element-Attribute, die nur zur Formatierung bestimmt waren (etwa align, bgcolor), existieren in neuen HTML-Standards nicht mehr. Ihre Funktionalität wurde von CSS übernommen (text-align, background-color).

Viel mehr gibt es dazu nicht zu sagen. Semantik („Das hier ist eine Überschrift, das hier ist ein Absatz.“) ist Sache von HTML, Formatierung („Überschriften sind rot und 30px hoch, Absätze haben anderthalbfachen Zeilenabstand und stehen im Blocksatz.) ist Sache von CSS.

Wenn der Unterschied zwischen Semantik und Formatierung (oder Inhalt und Design) klar ist, beantworten sich die meisten solcher Fragen von allein.

Eine Liste der in der neuesten Version von HTML verfügbaren Attribute gibt es hier:

- Index — HTML5

Es gibt gewisse Randfälle wie das width-Attribut, das für diese Elemente zulässig ist: canvas; embed; iframe; img; input; object; video.

Auch die würde ich im Normalfall nicht verwenden, sondern in CSS auslagern. Ich habe mehreren Theorien, warum das Attribut für diese Elemente noch zulässig ist, möchte das aber nicht ausführen.

colspan und rowspan sind zudem im Grunde semantische Attribute („Diese Zelle bildet den gemeinsamen Wert der Zeile für die folgenden drei Spalten.“). Das wäre eine wichtige Information für eine Anwendung, die die Tabelle ausliest. Eine Formatierungsangabe („Diese Zelle soll sich über drei Spalten erstrecken.“) ist inhaltlich nicht verwertbar. Eine auslesende Anwendung könnte da nur denken: „Aha, hier ist eine Zelle, die aus irgendeinem Grund breiter ist. Dahinter fehlen dann allerdings zwei Zellen.“

Der Einsatz von style ist grundsätzlich legitim, führt aber häufig zu Redundanz.

HTML:
<h2 style="color: red; font-size: 30px;">Überschrift 1</h2>

<h2 style="color: red; font-size: 30px;">Überschrift 2</h2>

Einfacher zu warten ist:

HTML:
<h2>Überschrift 1</h2>

<h2>Überschrift 2</h2>

Code:
h2 { color: red; font-size: 30px; }

Dann noch schnell ein Wort zu den Attributen class und id. Die dürfen im Rahmen von CSS natürlich eingesetzt werden, wobei class die produktivere Wahl ist und id meiner Meinung nach tendenziell nur für solche Elemente gesetzt werden sollte, die per Fragment-Identifier im URL direkt angesprungen werden können sollen ([noparse]http://www.example.org/test.php#meine-id[/noparse]). Letzteres ist aber keine grundsätzliche Regel.
 
aber wie kann man dann die breite und die höhe eines bildes verändern wenn man das "width" und "height" nicht benutzen darf? gibts dafür eine neue lösung?

Hallo.

Du sollst sogar width und height bei Bildern verwenden.
Denn so stellst du beim laden der Seite sicher das der Paltz für die Bilder gleich reserviert wird und dein Design nicht anfängt zu "hüpfen".

Gruss
Elroy
 
Hallo.

Du sollst sogar width und height bei Bildern verwenden.
Denn so stellst du beim laden der Seite sicher das der Paltz für die Bilder gleich reserviert wird und dein Design nicht anfängt zu "hüpfen".

Gruss
Elroy

danke, coole seite übrigens ist genau das was ich gesucht habe bin gerade beim durchlesen.



Gruss
 
Elroy schrieb:
Du sollst sogar width und height bei Bildern verwenden.
Denn so stellst du beim laden der Seite sicher das der Paltz für die Bilder gleich reserviert wird und dein Design nicht anfängt zu "hüpfen".

Ich denke das lässt sich auch per CSS erreichen. Das wäre nur ohne Inline-Styles (style-Attribut in einem HTML-Element) unter Umständen etwas umständlich. Man kann ja schlecht für jedes Bild mit neuen Abmessungen eine eigene CSS-Klasse einrichten. Das ist vermutlich auch ein Grund, warum width und height bei sowas noch zulässig sind, denn Inline-Styles werden tendenziell eben eher nicht empfohlen.

Das ist aber gefährliches Halbwissen.
 
Zurück
Oben