Learn HTML5 At Your Own Pace. Ideal for Beginners

Learn to structure text with HTML5 block level tags, using paragraphs and headings (h1–h3) to format content. Explore accessibility and search engine considerations and content styling separation.

Explore how inline tags modify text within a paragraph, using strong and em for emphasis, and compare legacy b and i. Learn about blockquote, address, and code with monospace fonts.

Learn to use the line break (br) and other self-closing tags, add horizontal rules (hr), and insert non-breaking spaces and HTML entities for symbols like copyright, euro, and yen.

Learn how to format text with HTML lists, including ordered, unordered, and definition lists. Use ol, ul, dl, li, dt, and dd tags, and the type attribute to customize markers.

Discover how HTML5 content-specific tags like header, footer, section, figure, and aside help structure web pages, improve accessibility, and aid search engine indexing.

Create a multi-page html5 site by using header, section, and footer, build an attractions pages list for San Francisco hotspots, and reuse a template for cable cars and other pages.

Learn to create links in documents with the anchor tag and href, linking to web addresses. Understand absolute links, common schemes like http/https/ftp, and the target attributes _self and _blank.

Learn how relative links simplify testing on local files by using file paths, folder structures, and dot dot slash to move up or down folders, while contrasting with absolute links.

Learn to create links to files and emails in HTML5, including linking to slideshows and zip downloads, and using mailto to open the user's email client.

Learn to create on-page links using anchor tags, hrefs, and id attributes to jump to sections like Chinatown and Fisherman's Wharf, with back-to-top navigation.

Learn to build a navigation menu by adding anchor links with href, structuring with nav and header tags, and applying it across pages like cable cars and Chinatown.

Learn to add images to web pages with the img tag and relative image paths. Provide alt text to improve accessibility and arrange images inline with text.

Use the figure tag to surround images, manage layout, and group multiple images, then add a figcaption for accessible captions; understand placement and search engine implications.

Link images with anchor tags, reuse text-link techniques, and build image maps with hotspots and coordinates to navigate to multiple pages.

Learn to prep web images by resizing to pixel height and saving in web-friendly formats like jpeg, gif, or png, balancing quality and file size.

Add images to the website project by inserting image tags with src, width, height, and alt text, and place the logo on the home page.

Learn how to apply css rules directly in html using the style attribute, center headings with text-align and italicize text with font-style, and group styles with span and div.

Use a style tag in the head to write reusable CSS rules instead of the style attribute. See how h1 selectors and cascading determine the final look.

Learn to set text color with the css color property using hex values or rgb equivalents. Hex codes map red, blue, and green, with 00 black and ff white.

Set and manage text size using the font-size property across paragraphs and headings, exploring px and ems units, and assign distinct sizes to h1, h2, and h3 for clear hierarchy.

Define font-family in CSS, specify Helvetica for paragraphs with fallbacks like Arial and Times New Roman, and end with a generic sans-serif; apply via the body to all text.

Learn how to target elements with tag, class, and id selectors in CSS, apply color and style rules, and understand cascading and specificity in HTML documents.

Learn how pseudo selectors target subparts of elements, using first-letter for drop caps and anchor hover, then apply link and visited selectors to change colors and font size.

Group selectors with commas to style h1, h2, and h3 together with a color. Use a compound selector like div p to target a paragraph and adjust its font size.

Move styles from the document into a separate .cssa style sheet file and link it with a proper link tag (href, rel, and type set to text/cssa) to apply styling.

Set up a stylesheet for the site, link it from the index page, and apply a top-down approach by defining body typography, header sizes, and hex colors with comments.

Set up quotes on pages with aside and blockquote, center and italicize them at 16px, add copyright and pop out classes, and implement link hover effects across pages.

Explore HTML5 tables to display data in rows and columns using table, tr, and td tags. Add a caption, borders, and use colspan to stretch a cell across multiple columns.

Replace table data cells with th headers to visually distinguish column headers and provide semantic context, using scope='col' to help browsers and search engines understand the data.

Style HTML tables with CSS by applying borders, colors, and border-collapse behavior; set width, text alignment, padding, and center the table with auto margins.

Learn to structure HTML5 tables using T head, T body, and T foot to mark sections and style columns with call group tags and classes like seasons, temps, and rainfall.

Build a web page table from city statistics, with caption, header and data rows. Center the table and style the caption and cells with css, then preview.

Explore how CSS block elements apply borders, backgrounds, width, height, margins, padding, and overflow to control layout, visibility, and scrolling in HTML5 pages.

Explore how margins and padding affect layout using div blocks to measure a paragraph, reset body margins for cross-browser consistency, and learn how width, borders, and padding size elements.

Explore how CSS shorthand consolidates margin, padding, and border properties, compare it to longhand values, and implement top, right, bottom, and left spacing.

Learn how the position property moves elements with static, relative, absolute, and fixed settings, and offset a text box using top and left to see layout changes.

Master nested blocks in HTML5 by positioning divs with relative and absolute coordinates to build a two-column layout, using left and right columns and percentage widths.

Explore how floats push images to the left or right and make text wrap around them, then learn to control wrapping with the clear property and simple class selectors.

Explore how floats and clears affect div-based layouts as you stack blocks, float left or right, observe overlapping, wrapping, and clear behavior to build responsive HTML5 layouts.

Learn how to structure a simple web page with header, nav, sections, and footer, wrapped in a centered 600-pixel page div identified by an id, and styled with floats.

Learn to structure a web page using a page div with an id, center it at 800px, and organize content with header, nav, section, blockquote, and footer.

Master CSS margins and padding for paragraphs and headings, create image left and image right classes to float content, and style navigation and header with group selectors and anchors.

Learn to create html forms with the form tag, including action and post method, build username and password inputs with name attributes, and add a submit button for testing.

Learn to extend forms with name and email text inputs, a submit button, and radio groups for gender plus checkboxes for multiple options like car, mansion, and yacht.

Explore how to create form controls beyond inputs using the select tag, options, value attributes, and the selected attributes to build pulldown menus, lists with sizes, and multiple selections.

Learn to add a textarea for multi-line comments, set rows and cols, include a name attribute, add a hidden field to track survey data, and use reset and send controls.

Explore new HTML5 form tags, including self-validating email fields, input types, labels, fieldsets, legends, and simple styling with divs to create accessible, browser-friendly forms.

Learn to create a contact us page on your website using a reusable template, form tags, labels, and inputs, with a post method and email action.

Learn to structure a form with fieldset and legend groups for personal info and checkboxes, then style with css by removing borders, adjusting margins, and hiding bullets.

Learn how to add video to websites by preparing html5 playback formats and using a free converter to create mp4, webm, and lgv variants.

Learn how to set up the HTML5 video tag with src, type, width, and height attributes, and enable autoplay and controls for functional playback and proper rendering in the browser.

Learn how to serve html5 videos across browsers by using a video tag with multiple source tags for mp4, webm, and ogg, ensuring autoplay, controls, and loop compatibility.

Learn to embed an HTML5 video page with multiple sources (mp4, ogg, webm), controls, and centered display using a figure tag.

Optimize HTML pages for search engines by using proper meta tags for description and keywords, arranging content with header and section tags, and using clean file names with dashes.

Test your web pages across multiple browsers to spot layout differences, then validate HTML and CSS with online validators from the W3C to ensure standards compliance before publishing.

Choose a reliable host with 24/7 support and backups, register a domain, and upload your site files via an ftp client, keeping local and remote folders in sync.

Explore essential HTML5 tags and CSS properties with quick reference links, and learn to diagnose and tweak pages in your browser using the Firebug tool.