Übersichtlicher programmieren?

Mach Einrückungen, Kommentare und blocks zb:

<div>
  <img src=></img>
</div>

gibt auch dort IDEs die den Text durchformatieren, kann da phpstorm empfehlen. Ansonsten eben manuell einrücken und wo sinnvoll in klassen/funktionen aufgliedern.

Versuche die unterschiedlichen Ebenen (Styles, Markup, Skripte) so gut wie möglich zu trennen. Bei JavaScript und CSS dürfte das am einfachsten fallen, da du beide Sprachen in eigene Dateien auslagern kannst.

Bezüglich PHP wäre es vorteilhaft, ein MVC-Framework mit Template-Engine zu nutzen (z.B. Laravel, Phalcon, Symfony, Yii, o.ä.), denn ein solches gibt schon gut durchdachte Strukturen vor.

Aber auch ohne Framework kann man sich erste Ansätze schaffen, eine stärkere Trennung vorzunehmen.

• Entwickle, wo es geht, objektorientiert
• Lagere deine Klassen und Funktionen in eigene Dateien aus und inkludiere sie nur in andere Dateien; Anwendungslogik hat in Views (HTML) nichts zu suchen
• Lege dir eine klare Ordnerstruktur an (z.B. models, views, controllers, ...)
• Bau dir ein Routingsystem (es gibt etliche Webartikel dazu)
• Verzichte auf globale Variablen
• Wenn du PHP und HTML vermischen musst, verwende die alternative Syntax, die PHP zur Verfügung stellt
• Verzichte möglichst darauf, HTML in PHP-Strings zu verwenden; inkludiere stattdessen den PHP-Code in HTML, so wie hier:

<?php $name = "Josef"; ?>
<p>My name is <?= $name ?></p>

• Lagere wiederverwendbare Komponenten (Bsp.: Footer) in eigene Dateien aus und binde sie wo benötigt nur noch ein

Ansonsten ist, wie dir hier bereits geschrieben wurde, eine IDE nützlich (z.B. PhpStorm oder Visual Studio), die dich mit Syntax Highlighting u.ä. unterstützen kann.

Schau dir Code-Beispiele an oder benutze gute Quellen wie Codecadamy um Programmieren zu lernen. Benutze Kommentare, Spacing und erweitere deine Projekte in eigene Klassen und Files um nicht alles in einem einzigen File zu haben.

MFG