HTML & CSS - Tipps und Tricks

• xxxq

HTML

• Geschütztes Leerzeichen:  
• Zeilenumbruch erzwingen: <br>
• Textabsatz: <p>....</p>
• Link <a> mit Attribut: download
• Text hochstellen: <sup>....</sup>
• Text tiefstellen: <sub>....</sub>
• Zitat: <blockquote>....</blockquote>
• xxx: <cite>
• Trennlinie: <hr>

• Tutorial Republic: HTML5 Elemente/Tags English
• selfhtml: HTML Elemente/Tags Deutsch

CSS

• overflow-wrap (word-wrap) CSS3
  Quelle: MDN Web Docs: overflow-wrap English
  • overflow-wrap: break-word; erlaubt Umbrüche innerhalb eines Wortes TIPP
    Responsive Lösung für lange URLs, die die Gerätebreite überschreiten
  • overflow-wrap: normal; bricht Wörter nur an erlaubten Breakpoints um defaultnormal
• font-weight
  Quelle: https://www.udacity.com/blog/2021/01/html-css-font-weight.html
  • 100 = thin
  • 200 = extra light (ultra light)
  • 300 = light
  • 400 = normal
  • 500 = medium
  • 600 = semi bold (demi bold)
  • 700 = bold
  • 800 = extra bold (ultra bold)
  • 900 = black (heavy)
• xxx
• xxx

Random Notes

<a> Anker

<h3 id="Ankername">Überschrift</h3>

<a href="#Ankername">Link</a>

<a href="/dokument.html#Ankername">Link</a>

• https://www.heise.de/tipps-tricks/Wie-setzt-man-in-HTML-einen-Anker-3908051.html
• https://www.heise.de/tipps-tricks/Verweis-auf-einen-Anker-in-HTML-so-geht-s-3908083.html

<a> E-Mail

<a href="mailto:">Send email to nowhere</a>

<a> Telefon / Mobile

<a href="tel:+41989397959">+41 98 939 79 59</a>

<a> Download

<a href="/" download="my_painting.png">Download my painting</a>