Michael Hartl - Learn Enough HTML to Be Dangerous

If tech is the new literacy, technical sophistication is like being able to read and write. This includes being able to figure things out on your own (like sounding out words while reading) and look things up when you need them (like consulting a dictionary or thesaurus while writing).

On the Web, the alphabet is HTML.

In Learn Enough HTML to Be Dangerous, well constantly be on the lookout for chances to improve our technical sophistication. Well deploy our website immediately to production ( to learn how to make HTML websites the Right Wayprofessional-grade from the start.

Because of our pragmatic approach, the tools well be using use are all professional-grade (). They are the same tools covered in the Learn Enough Developer Fundamentals sequence, which you should follow now if youre not already familiar with them. The individual tutorials are available for free on the Web:

1. Learn Enough Command Line to Be Dangerous on the Unix command line
2. Learn Enough Text Editor to Be Dangerous on text editors
3. Learn Enough Git to Be Dangerous on version control with Git

To get even more out of the sequence, you can join our subscription service, the Learn Enough Society, which includes streaming videos and special enhanced versions of the online tutorials, among other benefits.

Figure 1: The tools of the trade (kitten not included).

If youre just getting started with HTML, the Developer Fundamentals sequence represents a little bit of overhead, but the benefits are enormous. To our knowledge, this combination of software development best practices and deploying to a live website is unique among introductory HTML tutorials, and gives you a tremendous advantage both when collaborating with others and when taking your skills to the next level by learning to build more complicated sites.

Learn Enough HTML to Be Dangerous focuses on core HTML, starting with a hello, world! page that well deploy to production (!) in , which will allow us to see the effect of simple style rules on plain HTML elements.

The resulting site will be functional, but well run into several important limitations imposed by working with raw HTML. This will set the stage for the next Learn Enough tutorial, Learn Enough CSS & Layout to Be Dangerous, which creates a fully modern website using Cascading Style Sheets (CSS) to separate the design of the site from its HTML structure, while covering site layouts and advanced styling as well.

Underneath every website, no matter how simple or complex, you will find HTML. In this tutorial, by creating and deploying a simple but real website, well gain an understanding of the underlying structure that every site uses to organize and display content online.

As a technology standard, HTML has been constantly evolving ever since its introduction in 1993 by Tim Berners-Lee, the original web developer (. The latest public release, which is what we will be using in this tutorial, is HTML5 (that is, version 5 of HTML). The companies that create web browsers take the specs from the W3C and implement the behaviors that are expected when the browser comes across any of the allowed formatting, such as making text bold or changing its color (or even doing both at the same time).

Figure 2: Sir Tim Berners-Lee, the original web developer.

Fortunately, we wont need to get into a lot of specifics or worry about what has changed from version to version. Just know that new features are being added regularly to expand browser functionality and modernize the technology. Common elements, including the ones well be covering in this tutorial, havent changed much since the beginning, but that doesnt mean that they will always be safethe HTML spec is a constantly evolving creature being assembled by a committee (.

Figure 3: HTML in animal form.

As the name HyperText Markup Language indicates, HTML is a markup language, not a programming language. HTML allows a web author to organize and define how content should be displayed, which means it can do things like add text formatting; make headings, lists, and tables; and include images and links. You can think of an HTML file as an ordinary written document that has been carefully annotated by the author. Some of the notes might highlight parts of the text, some might include an image that has been paper-clipped to the document, and others might tell you where to find additional information.

The HyperText part of the HTML acronym refers to the way links on the Web allow you to move from one document to another in a non-linear fashion. For example, if you are reading the .)

Technologically, hypertext is a great improvement over non-linked documents, as it eliminates the need to flip or scroll through pages of content to find what you are looking for. These days, the ability to link between documents is something that we all take for granted, but when the HTML specification was created it was an innovation important enough to be included in the name of the technology.

HTML source is plain text, which makes it ideal for editing with a text editor (as discussed in which are the text annotations alluded to above.

Figure 4: HTML uses tags for everything.