This tutorial will walk you through getting started with HTML coding. It covers basic principles of how to create different semantic tags to organize the structure of your page content.

To follow along with this tutorial, download the example.rtf file. This is a zipped file, so you will need to decompress or extract it.

DEMO: Start Coding with HTML

The following is a playlist of five videos explaining how to build a simple, structural HTML page with semantic markup, including the use of section, article, header, footer, heading levels, paragraphs, blockquotes, asides, lists (ul, ol, dl), anchor links, image tags, ARIA roles, and a variety of attributes.

 

Synopses of what each video covers by number:

1. Figuring out how to envision the document outline.
2.  Translating the your visual document outline to code.
3. Adding the real content, adding ID attributes, understanding htmlentities
4. Placing images in the HTML with the ‘img’ tag, relative pathways, using Pixlr Editor and/or PhotoShop to edit image, creating a link with an absolute pathway
5. Creating named anchors and internal relative links
6. Creating a ‘nav’ list of links, and basic intro to Google Chrome Inspector

---

Additional Resources

Class Lecture Review

• HTML + CSS Principles Lecture
• 3-part video lesson series for getting started with the Brackets code editor

External Resource Links

• HTML tag information
• Check your code on the server against the W3C HTML Validator
• HTML Character Entities (codes for special characters)
• Pixlr Editor (for free online image editing)

(updated 8/2015)