Author: Jon Penland

Jon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.

  • Logical Tags

    (adsbygoogle = window.adsbygoogle || []).push({}); Note: this article is presented for historical value only Logical tags are now often referred… Read More...

  • How to Create a Newspaper-Style Column Layout

    How to create a newspaper or magazine style column layout using the CSS columns property. This tutorial includes examples of how to implement all CSS columns properties including count, width, gap, rule, span, and fill.

  • Invalid HTML

    Applets, frames, acronyms, and the use of tables for page layout are just a few of the invalid HTML practices covered in this tutorial.

  • Tables Tutorial

    This tutorial teaches how to create HTML tables and covers all of the main table elements as well as the rowspan and colspan attributes.

  • Styling Tables

    Learn how to style HTML table borders, backgrounds, text, and more. This tutorial will also you teach you how to create a fully-responsive table that renders beautifully on devices of all sizes.

  • HTML Character Codes

    HTML character references are used to add reserved characters and those that don't appear on the keyboard to an HTML document. This page includes an explanation of how to use character entity reference codes and a complete listing of all HTML character reference codes.

  • HTML Media

    The HTML5 audio and video elements add native media playback capability to modern web browsers. Learn how to use these new HTML5 elements in this tutorial.

  • Semantic Markup

    In this tutorial you will learn what semantic markup is, why it is important, and how you can ensure that the HTML you write is semantically meaningful and accurate.

  • HTML Lists

    HTML lists may be ordered, unordered, or descriptive. Learn when to use each type of list and the correct syntax for adding lists to an HTML document.

  • How to Create Responsive Menus with CSS

    Tutorial on creating fully responsive vertical and horizontal navigation menus including responsive drop down menus that open on click without requiring any JavaScript.

  • How to Create Simple Image Transformations

    Image transformations are a common feature of modern web design. This tutorial will teach you how to use CSS to transform an image when a website visitor hovers over it.

  • No Borders Around Image Links

    Years ago, many web browsers automatically added a border around image links. Adding borders around image links rendered in modern browsers must be done manually, and this tutorial shows you how.

  • Forms

    This guide to HTML forms introduces all of the elements and attributes used to create forms for the web. New HTML5 form elements such as datalist and output are also covered.

  • Getting Started With Forms

    Learn how to use text, email, phone, radio button, checkbox, submit, date, and text area form elements in this tutorial as we create the front end of a reservation request form for a fictional hotel.

  • Form Styling and Design

    Learn how to design and style a form to make the best use of the available space and produce an attractive visual design.

  • Form Usability and Accessibility

    In this tutorial, learn how to make forms that are accessible and usable by implementing proper design principles and HTML features such as the tabindex attribute and label element.

  • Fonts and Web Typography

    A complete reference to font stacks, web fonts, and web typography. Learn how to design and set the presentation of text on your website.

    In this section we'll talk about setting the fonts in your page: maki

  • HTML Document Meta

    The head element of an HTML document contains instructions for web crawlers and browsers about how to understand, index, and display your website. In this tutorial you'll learn about the most important pieces to include in the head element and the proper syntax for each.

  • SEO — Search Engine Optimization

    Search engines want to deliver results that are relevant, useful, and high quality. In this tutorial, you will learn the most important steps to take to optimize your website for search engine traffic.

  • HTML Document Structure

    HTML5 includes several new tags which you can use to add rich semantic meaning to your markup. In this short tutorial, we'll show you how to use these new tags and how to use them to create an HTML template.

  • How to Make an Image Map

    Image maps are a pure-HTML way to hyperlink different parts of an image to different destination. Add in a free jQuery plugin and image maps render beautifully on all types of devices. Read this tutorial to learn how to create image maps.

  • The Rules of ALT

    Every image element on a webpage should include a text alternative as a fallback for visitors who aren't able to view the image as well as those using screen readers. Craft text alternatives properly by following these guidelines.