Ich habs auch nicht so mit der Semantik vom Code. Mit sematisch ist ein guter übersichtlicher Code gemeint denn man z.B mit dem Tabulator bearbeitet.
Semantik hat nichts mit der Übersichtlichkeit von Code zu tun. Semantik heißt eigentlich, dass man mit HTML (einer Auszeichnungssprache) den Inhalt auszeichnet, eben die Elemente für bestimmte Sachen wählt, für die sie gedacht sind. Beispiel:
Eine Überschrift als <b><font size="5">Überschrift</font></b> auszuzeichnen ist falsch. Die Schrift ist zwar groß und fett, wie man es von einer Überschrift gewohnt ist, allerdings sagen uns die Tags nichts über die Bedeutung des Inhalts wieder. Mit <h1>Überschrift</h1> kennzeichnet man wirklich eine Überschrift ersters Ordnung. Wie diese aussieht, bestimmt man mit CSS. HTML ist nur für den Aufbau zuständig, nicht aber dafür, wie das ganze später aussieht. Die semantisch korrekte Auszeichnung spielt besonders für behinderte Menschen eine große Rolle, da diese unter Umständen mit anderen Geräten im Internet unterwegs sind als wir. Beispiel hierzu wäre ein "Screenreader", der einem die Webseite quasi vorliest. Verwendet man hier unnötig komplizierten oder nicht korrekten Code, kann das sehr schnell verwirrend für denjenigen werden, der sich vorlesen lässt.
Zu eurem Beispiel:
<p></p> kennzeichnet einen Textabsatz. Wenn du also Text schreibst, kommt dieser in <p></p>. Wie viel Abstand dieser Absatz nach oben und nach unten hat, bestimmst du in CSS. <br /> sollte man nur in sehr wenigen Fällen benutzen, beispielsweise in <adress> oder zum Darstellen eines Gedichtes.
Habe vielleicht die Semantik etwas mit der Barrierefreiheit vermischt, das geschieht zur später Stunde, wenn man eigentlich im Bett liegen sollte ;)
Edit: Ganz so lang wie Martins Posts sind sie noch nicht, aber meine wachsen auch beständig ^^
