Javascript und valides HTML

Javascript und valides HTML (52 Beiträge, 387 Mal gelesen)

Du bist nicht angemeldet. [ Login/Registrieren ]

Ich habe das Problem, dass mein HTML erst valide ist, sobald Javascript ausgeführt wird.

Beispielsweise wird HTML Code mittels z.B. mittels jquery "append" eingefügt, sodass korrektes HTML entsteht.
Ist diese Vorgangsweise ok?

Wenn nein, wie macht mans korrekt?

Ich habe das Problem, dass mein HTML erst valide ist, sobald Javascript
ausgeführt wird.

Beispielsweise wird HTML Code mittels z.B. mittels jquery "append" eingefügt,
sodass korrektes HTML entsteht.
Ist diese Vorgangsweise ok?

Nein, eine Seite sollte auch ohne JavaScript valide sein und vor allem auch funktionieren. Ausnahmen bestätigen die Regel.

Wenn nein, wie macht mans korrekt?

Wo ist das Problem dabei valides HTML zu schreiben?

Wo ist das Problem dabei valides HTML zu schreiben?

Wo schreib ich das HTML hinein, dass in dem Kontext nicht stehen darf?
z.B. soll einer Definitionsliste ein Punkt hinzugefügt werden.

Wo schreib ich das HTML hinein, dass in dem Kontext nicht stehen darf?
z.B. soll einer Definitionsliste ein Punkt hinzugefügt werden.

Und wo genau ist hier das Problem?

Die Liste ist doch auch ohne dem Punkt valid? Schreib die leere Liste in den HTML-Code und die Punkte kannst du dann mit JS hinzufügen.

Oder füge die ganze Liste per JS in den übergeordneten Container...was auch immer.

14.05.2014, 15:13 Uhr - Editiert von mko, alte Version: hier

Keine Ahnung ob das ok oder korrekt ist...das scheint heutzutage eh niemanden mehr zu interessieren.

Warum kann aber dein Ursprungs-HTML-Code nicht auch schon valid sein? Ein div ist z.B. auch alleine valid, egal ob jetzt was drinnen hängt oder nicht.

14.05.2014, 15:01 Uhr - Editiert von mko, alte Version: hier

Kannst du konkrete Beispiele für das ungültige HTML nennen?

Meiner Meinung nach sollte der HTML Inhalt zu jedem Zeitpunkt gültig sein.

test

z.B. füge ich einer Definitionsliste einen weiteren Punkt hinzu.

Dieser Punkt steht an einer anderen Stelle im Body und sieht so ähnlich aus:

eins

zwei

Natürlich darf das so nicht im Body stehen, da der dl - Tag fehlt.

In der Javascript Datei solls nicht stehen, oder macht man darum ein script Tag mit CDATA?

Dieser Punkt steht an einer anderen Stelle im Body und sieht so ähnlich aus:

eins

zwei

Natürlich darf das so nicht im Body stehen, da der dl - Tag fehlt.

Ja warum machst du es dann so?

In der Javascript Datei solls nicht stehen, oder macht man darum ein script
Tag mit CDATA?

Ich versteh immer noch nicht, wo das Problem liegt. Schreib doch einfach valides HTML. Was hindert dich daran?

Schritt 1: Erstelle ein HTML-Dokument, das valide ist, und das auch sinnvoll bedienbar ist.

Schritt 2: Erweitere das HTML-Dokument mit JavaScript.

Solange Schritt 1 nicht gegeben ist, macht es keinen Sinn Schritt 2 zu beginnen.

14.05.2014, 16:32 Uhr - Editiert von hellbringer, alte Version: hier

Ich verstehe immer noch nicht was genau dein Problem ist. Poste doch den Code der dir Schwierigkeiten macht.

test

http://www.austrokamin.com/edelstahlkamine/edelstahlkamin-doppelwandig/bausatz-edelstahlkamin-standard-113mm.html

Was ich nicht kapier ist, dass die Tooltips auf jedem Smartphone immer unten angezeigt werden.

Was ich nicht kapier ist, dass die Tooltips auf jedem Smartphone immer unten
angezeigt werden.

Auf meinem iPhone wird nichts unten angezeigt. Was meinst du?

Klick einmal auf ein Fragezeichen.
Der Tooltip sollt eigentlich direkt unterm Fragezeichen erscheinen.
Auf meinem und anderen Android Handys erscheint der Tooltip immer ganz unter, bei der Artikelbeschreibung.
Sogar position absolute und top:0 , left: 0 ändern daran nichts.

Klick einmal auf ein Fragezeichen.
Der Tooltip sollt eigentlich direkt unterm Fragezeichen erscheinen.

http://666kb.com/i/cochjnnzbdfk0x9ki.png

Als unbedarfter ist mir nur aufgefallen, dass es "mit unterschiedlichen Innenrohren erhältlich" heissen muss

Und jetzt bei Wandkonsole

Und jetzt bei Wandkonsole

http://666kb.com/i/cocieqmvtxch0ulyq.png

Bei Android leider nicht.

Passt auf meinem Nexus 4 auch. Aktuellstes Android, mit Browser und Chrome getestet.

Komisch. Beim Firefox passts auch, bei meinem Android Browser nicht.

Ja und was sagst du?

Da gibts z.B folgende Passage:

Ausführung*

und das steht mitten im Body außerhalb von dl und ist deshalb nicht ok.
Wo schreibt man HTML Code, der ohne Javascript nicht valide ist, hinein?

Muss ich das innerhalb eines tags stehen?

und das steht mitten im Body außerhalb von dl und ist deshalb nicht ok.
Wo schreibt man HTML Code, der ohne Javascript nicht valide ist, hinein?
Muss ich das innerhalb eines tags stehen?

Wie wärs mal sich mit den HTML-Grundlagen zu beschäftigen? Offenbar hast du da ganz große Lücken, ohne das böse zu meinen.

HTML dient dazu Daten zu strukturieren. Um deine Frage zu beantworten wüsste man also wissen, welche Struktur du dir überlegt hast. Man kann nicht einfach kunterbunt irgendwo seine Elemente hinknallen nach dem Motto "mit JavaScript kann mans ja richten".

Auch ohne JavaScript muss die Seite vernünftig aufgebaut sein. JavaScript ist nur ein Zusatz, das darfst du nie vergessen. Setze nicht voraus, dass JavaScript vorhanden sein muss. Wenn du nach diesem Motto Seiten erstellst, gehst du automatisch vielen Problemen aus dem Weg.

14.05.2014, 19:57 Uhr - Editiert von hellbringer, alte Version: hier

Das ist alles schön und gut. Mit Grundlagen kenn ich mich aus und kann dir soviel sagen:

1. Das CMS allein funktioniert schon ohne JS nicht und dabei handelt es sich um Magento, das ist nicht ganz unbedeutend.

2. Bezüglich JS-Verbreitung weiß ich, dass diese weit über 90% liegt (hab mal was von 98% gelesen). Sollte ich mich um die 2% kümmern müssen, dann müsste ich mich auch um IE6 und dergleichen kümmern, was ich aber nicht vor hab.

3. Natürlich wäre eine Lösung mittels PHP auch möglich. Dazu fehlt mir aber das entsprechende know-how. Eine Extension, die das macht, was ich brauche habe ich leider nicht gefunden und einen Magento Dienstleister damit zu beauftragen würde vermutlich etliche tausend Euro kosten und kommt daher nicht in Frage.

Meine Frage war eigentlich nur, wo man solchen HTML Code hinschreibt.

Magento

Mein Beileid.

Bezüglich JS-Verbreitung weiß ich, dass diese weit über 90% liegt (hab mal was
von 98% gelesen). Sollte ich mich um die 2% kümmern müssen, dann müsste ich
mich auch um IE6 und dergleichen kümmern, was ich aber nicht vor hab.

Wie gesagt, da gehts mehr um das grundlegende Konzept als um die 2%. Es geht darum sauber zu arbeiten und nicht zu pfuschen. Dadurch hat man weitläufig gesehen wesentlich weniger Probleme.

Beachte außerdem, dass auch Suchmaschinen kein JavaScript nutzen. Durch solche unnötigen Spielereien behinderst du also auch Suchmaschinen und verschlechterst die Suche nach deiner Seite.

Natürlich wäre eine Lösung mittels PHP auch möglich. Dazu fehlt mir aber das
entsprechende know-how. Eine Extension, die das macht, was ich brauche habe
ich leider nicht gefunden und einen Magento Dienstleister damit zu beauftragen
würde vermutlich etliche tausend Euro kosten und kommt daher nicht in Frage.

Also hast du ein Magento-Problem und kein JavaScript-Problem?

Meine Frage war eigentlich nur, wo man solchen HTML Code hinschreibt.

Ohne weitere Informationen zu haben kann ich nur die Antwort geben: Dort, wo er hingehört. Du hast ja bis jetzt immer noch kein brauchbares Beispiel geliefert, an dem man dir irgendwelche Lösungsmöglichkeiten aufzeigen kann. Und deine komplette Seite will ich auch nicht durchackern, außer du bezahlst mich nach Stunden.

14.05.2014, 20:15 Uhr - Editiert von hellbringer, alte Version: hier

Auch ohne JavaScript muss die Seite vernünftig aufgebaut sein. JavaScript ist
nur ein Zusatz, das darfst du nie vergessen. Setze nicht voraus, dass
JavaScript vorhanden sein muss. Wenn du nach diesem Motto Seiten erstellst,
gehst du automatisch vielen Problemen aus dem Weg.

Das ist heute einfach nicht mehr korrekt.
Technisch gesehen ist es eine sinnlose Einschränkung.
Wirtschaftlich gesehen ist es eine Verschwendung von Ressourcen und schafft einem nicht mehr Kunden.

test

14.05.2014, 20:43 Uhr - Editiert von Diabolo2000, alte Version: hier

Das ist heute einfach nicht mehr korrekt.

Doch, das gilt heute wie damals.

http://en.wikipedia.org/wiki/Progressive_enhancement

14.05.2014, 20:44 Uhr - Editiert von hellbringer, alte Version: hier

Erklär mir bitte welche Art von Kunde mit einem Gerät auf deine Website zugreift, dass kein JS unterstützt?

test

Dieser Beitrag bezieht sich auf eine ältere Version des beantworteten Postings!

Erklär mir bitte welche Art von Kunde mit einem Gerät auf deine Website
zugreift, dass kein JS unterstützt?

Suchmaschinen.

Und das Suchmaschinen-Ranking (heute hipp "SEO" genannt) ist immer noch ein wichtiges Thema für den Kunden.

Auch der behindertengerechte Zugang wird dadurch verbessert.

Also man muss es dem Kunden nur richtig verkaufen und nicht einfach sagen "is halt so".

Außerdem ist der Mehraufwand geringfügig, bzw. langfristig betrachtet eventuell sogar geringer. Man muss er nur einmal behirnen, dann macht man es automatisch. Es ist halt eine andere Denkweise. Statt "pfusch ma mal schnell was zsamm" ist es halt "überleg ma mal, was ma überhaupt wollen".

14.05.2014, 20:50 Uhr - Editiert von hellbringer, alte Version: hier

Ist halt die Frage:

wie ich bereits gesagt habe, wird schnell mal von anderswo ein unsichtbares div mittels Javascript sichtbar gemacht.
Google indexiert ja auch unsichtbare Bereiche.

Außerdem: wenn Google Javascript NICHT ausführt, dann kann ich ja einen Bereich haben, der ohne Javascript sichtbar ist, dann aber unsichtbar gemacht wird und bei einem Event (z.B. Mausklick) wieder sichtbar gemacht wird.

wie ich bereits gesagt habe, wird schnell mal von anderswo ein unsichtbares
div mittels Javascript sichtbar gemacht.

Falsche Richtung. Mach die Inhalte per Default sichtbar und blende sie erst mit JavaScript aus. So sieht sie auch jeder ohne JavaScript, und mit JavaScript merkst du keinen Unterschied zu deiner Variante.

Google indexiert ja auch unsichtbare Bereiche.

AFAIK ist Google mittlerweile sogar so schlau unsichtbare Bereiche zu erkennen und aus dem Suchergebnis auszuschließen, da damit viel Schindluder getrieben wird.

Außerdem: wenn Google Javascript NICHT ausführt, dann kann ich ja einen
Bereich haben, der ohne Javascript sichtbar ist, dann aber unsichtbar gemacht
wird und bei einem Event (z.B. Mausklick) wieder sichtbar gemacht wird.

Na bitte, klappt ja, wenn man will.

Wenn ich sage "JS required zur Benutzung der Website", dann mein ich nicht "AJAX Albtraum"...

Außerdem stimme mir "die Großen" zu.
Probier mal Facebook oder Twitter ohne JS aus.

test

14.05.2014, 21:19 Uhr - Editiert von Diabolo2000, alte Version: hier

Außerdem stimme mir "die Großen" zu.
Probier mal Facebook oder Twitter ohne JS aus.

Funktioniert problemlos.

Gefällt mir.

Ja mir ist schon klar, am besten wärs, wenn alles auch ohne Javascript funktionieren würd.
Bei den meisten Tooltip Plugins, die ich gefunden hab wird von irgendwo ein div geladen und an die entsprechende Stelle gesetzt.

Ganz genau das gleiche ist bei mir der Fall.

Gefällt mir.

Klar, dass es dir gefällt. Quasi der Freibrief zum Weiterpfuschen. Bis zum nächsten Problem halt...

Bei den meisten Tooltip Plugins, die ich gefunden hab wird von irgendwo ein
div geladen und an die entsprechende Stelle gesetzt.
Ganz genau das gleiche ist bei mir der Fall.

Dann setz den <div> an die richtige Stelle, und schon ist alles OK und du machst die Seite nicht kaputt.

Auch für dich zum Nachlesen:

http://en.wikipedia.org/wiki/Progressive_enhancement

14.05.2014, 20:53 Uhr - Editiert von hellbringer, alte Version: hier

Was ist die richtige Stelle?
Wennst ein absolut positioniertes div hast, muss es ja egal sein, an welcher Stelle es im Code steht.

Das hat auch gar nix mit Javascript zu tun.

Mein Code ist jetzt übrigens valide, habs einfach in ein

eingepackt.

Was ist die richtige Stelle?

So, dass es zur Datenstruktur passt.

Wennst ein absolut positioniertes div hast, muss es ja egal sein, an welcher
Stelle es im Code steht.

Vergiss die Positionierung. Das ist Aussehen, also CSS. Das hat mit HTML und seiner Struktur nichts zu tun. Die Positionierung funktioniert nur auf grafischen Endgeräten. Also Suchmaschinen und Screenreader bleiben da außen vor.

14.05.2014, 21:00 Uhr - Editiert von hellbringer, alte Version: hier

Insofern is ja gscheiter, das Element mittels JS zu verschieben, als mit CSS absolut zu positionieren.

Insofern is ja gscheiter, das Element mittels JS zu verschieben, als mit CSS
absolut zu positionieren.

Nein. Du solltest außerdem geistig Darstellung von Datenstruktur trennen.

Wenn du die Positionierung in der Datenstruktur (also HTML) meinst, dann ergibt sich die Position schon alleine aus der Struktur. Da braucht nichts herumverschoben werden.

Wenn du die Positionierung am grafischen Client meinst, dann ist CSS dafür zuständig.

JavaScript übernimmt hier nur die Aufgabe des Ein- und Ausblendens.

15.05.2014, 10:50 Uhr - Editiert von hellbringer, alte Version: hier

Dieses Forum ist eine frei zugängliche Diskussionsplattform.
Der Betreiber übernimmt keine Verantwortung für den Inhalt der Beiträge und behält sich das Recht vor, Beiträge mit rechtswidrigem oder anstößigem Inhalt zu löschen.
Datenschutzerklärung