A quick introduction to Hyper Text Markup Language (HTML)
HTML has now evolved five generations and has all kinds of fancy new capabilities. It is, however, still in a slightly awkward phase because there are still some browsers that do not fully support it. This means when we use HTML5 we need have to have graceful fall-back options (which is called unobtrusive programming). We'll talk more about this in later tutorials.
[Author's note: I wrote the first couple dozen tutorials in this series a few years ago and I'm in the process of updating the content to reflect the evolution of best practices in the industry. Please comment if you see anything I missed that should be updated. Thanks!]
THIS IS WHAT HTML LOOKS LIKE
<!DOCTYPE html>
<html>
<head>
<title>The title of my document</title>
</head>
<body>
<h1>A primary heading</h1>
<p>A paragraph</p>
<p>Another paragraph</p>
</body>
</html>The opening line is the HTML5 declaration. The second line is closed by the last line, and it's a good habit when writing HTML to always immediately print the closing ‘tag' after you open one (i.e. when you write <p>, always get the closing </p> in there so you don't forget it).
Lines 3–5 are the of the document, which doesn't get seen by end users but provides browsers the metadata (the title, description, links to different assets the document should know about, etc.).
The of the document then contains tags — <p> and <h1> are the examples, but there are many others. Opening tags can have attributes like an id or class (i.e. <p id=”first_paragraph” class=”cool_subtitle”>), which then can be used by CSS or JavaScript (which we'll discuss later) to enhance the user interface (UI) and user experience (UX) around that tag.
GET PRACTICE WRITING HTML
W3 Schools has an excellent browser-based “try it yourself” thing here. You should open it up now, go in and change text, add more tags, get a feel for what happens if you don't close a tag, etc…
And that's all you need to know for now. You will learn more about the different tags as we use them in future examples. Just remember that HTML is simply “markup” for a web document — it is not a scripting language and is not meant for doing anything fancy on it's own. In fact, it is good practice to treat HTML as semantic markup only (i.e. don't think about the visual design), which is why HTML5 uses tags like <article> and <section> now.
— —
Continue to the next post in this series: CSS Introduction — or go back to the Mac or Windows tutorial for setting up your local environment for developing apps.