Part 1: HTML Fundamentals

Tags and Attributes

The point of HTML markup is to communicate the structure or semantics of the content on your page through headings, paragraphs, lists, hypertext links, etc. While we may have to bend this rule every so often, HTML should not be used to effect a particular visual presentation: that’s the job of CSS.

Most tags are paired (<p>some content</p>), but a few are “self-closing,” like the break tag (<br />) and the image tag (<img src="photo.jpg" />). Any tag can have an attribute, which might be essential to its working at all (the src attribute in <img src="photo.jpg" />), or might only be useful in conjunction with CSS (the id attribute in <p id="footer">some content</p>). Note that this syntax is consistent across all tags: <tag attribute="value" otherattribute="othervalue">some content</tag>.

Typography

Straight HTML text is limited to the ASCII character set. Therefore you should use typographic entities to create “smart” quotes, en and em dashes, ampersands, fractions, etc. You can speed up this process by running your text through a markup generator like Textile or Markdown. Other typographic tricks include using a non-breaking space before the last word in a paragraph (this will prevent that word from ending up alone on the last line) and adding a <span class="caps"> around acronyms (you can then globally letter-space and reduce the font-size of span.caps with CSS).