Dive into HTML

1. What is HTML?

   HTML (Hyper Text Markup Language) is the language used to tell computers how to structure webpages. Document writing software, like Microsoft Word, allows you to structure text into paragraphs and lists, bold and coloured print, etc. HTML is used to mark text in a way in which browsers can interpret and present the text in a structured form.

   Here’s a really simple web page:

   I can <em>hear</em> you!

   Because the sentence is wrapped in what we call "tags," this page displays as a single line of text with the word “hear” italicized. The <em> tag tells the computer to emphasize anything inside of it. If a blind person were listening to the webpage, a computerized voice would place emphasis on the word “hear.”

2. Elements are the building blocks of a webpage.

   The combination of an opening tag placed before the desired text — in this case, <em> — its corresponding closing tag placed after the text — </em> — and the content in between is called an element. There are many kinds of elements. Aside from the <em> element, one of the most useful elements is <a>, which can be used like this:

   <a href=“http://wikipedia.org”>Wikipedia</a> is cool.

3. Attributes add meaning to elements.

   The above element is slightly more complex because it includes an attribute, or piece of information that adds meaning to the element’s content. In this case, the href attribute tells a computer that “Wikipedia” is associated with — or hyperlinked to — the website wikipedia.org. That means clicking (or tapping) on the word will take the reader to Wikipedia’s website. Some elements don’t actually contain any content, and hence have no closing tag, but represent special kinds of content themselves. One example is the <img> tag:

   This is serious!
<img src=“http://seriouscat.com/serious_cat_is_serious.jpg”>

   Another example of an attribute is adding cite to a block quote. So for the <blockquote> you should, as good journalistic practice, add a cite attribute which is a link to where the quote has come from, e.g. <blockquote cite="http://source_of_quotation.html">quotation</blockquote>.

4. Elements can be nested

   Finally, it’s also possible to put elements inside each other, also known as nesting them:

   <a href=“http://en.wikipedia.org/wiki/Lolcat”>
   <img src=”http://seriouscat.com/serious_cat_is_serious.jpg”>
</a>
   This links the picture of a cat to the Wikipedia entry on Lolcat.

5. Some common tags:

   • <p> = paragraph
   • <h1> = primary header
   • <h2> = secondary header
   • <em> = making text italics (<strong> is the tag for making text bold)
   • <ul> = an unordered or bulleted list (like this one)
   • <li> = marks a piece of text as being a list item
   • <blockquote> = marks a piece of text as being a quotation
   • <img> = image tag for inserting a picture

   There is a complete list of all HTML elements here: https://developer.mozilla.org/en/HTML/Element

   Want a refresher? We have an HTML cheatsheet.