Webseiten Aufbau/Strukturen erkennen

  • Ahoi liebe Community,


    Ich bin noch recht neu im Bereich HTML und CSS und lese/lerne mich so langsam durch mein ganzes Lernmaterial (Ich nutze dazu Lernapps via Handy, da die Lektionen kurz sind, immer einen kleinen praktischen teil sowie ein Quiz haben)

    Jetzt habe ich meine HTML Teil durch und möchte natürlich langsam hier und da praktisch etwas machen und stelle immer wieder fest, wenn ich auf anderen Webseiten surfe das ich teilweise schwer einschätzen kann, was auf diesen Webseiten, was für ein HTML-Element ist.

    Das mag zum großen Teil daran liegen das die Elemente immer stark via CSS verändert sind.


    da ich bei CSS noch nicht so weit bin, kenne ich natürlich noch nicht die ganzen Möglichkeiten wie weit man Elemente anpassen/ändern kann.


    Gibt es eine Möglichkeit wie man einen besseren Überblick darüber kriegt was für HTML-Elemente in einer Webseite verbaut sind, wie das ganze aufgebaut ist mit welchen Bausteinen usw.?

    oder ist das einfach Learning by doing und man kriegt immer mehr ein Auge dafür?


    Vielen Dank für die Hilfe und entschuldigt die evtl doofe Frage.

  • Es gibt da ein Hilfsmittel, das Du u. U. noch nicht kennst und unbedingt kennen solltest: Das sind die Entwicklerwerkzeuge deines Browsers. Mit dem HTML-Inspektor kannst dir jedes Element, das Du auf der Webseite siehst, anzeigen lassen kannst, sowohl das HTML als auch das CSS. Drücke Strg+Umsch+I oder F12 bei Edge. Oder Rechtsklick auf das Element, das dich interessiert und dann "Element untersuchen" o. ä.

  • Optisch erkennen kann man die hinterlegten Elemente nicht.


    Mit einem Handy lassen sich Seiten auch nur schwer untersuchen.


    Browser von Desktoprechnern bieten in der Regel die Möglichkeit den Quelltext direkt anzuschauen. Wobei der recht umfangreich und / oder unübersichtlich sein kann.


    Für den Firefox (aber wohl auch andere Browser) gibt es AddOns, mit denen man eine Webseite "untersuchen" kann. Zum Beispiel Überschriften, Container, Listen, ... in der Webseite markieren.

  • ja am handy lerne ich meistens nur. der rest wird am pc gemacht. oder vllt kleinere arbeiten via handy sofern ich mal etwas zeit habe. aber hauptsächlich ist es zum lernen da :)


    da mit dem entwicklerwerkzeug klingt sehr gut nach dem was ich suche ich schau mir das mal an.geht ja auch erstmal nur darum zu erkennen was ist ne tabelle was ein knopf usw usw.