Introduction: Terminology and Tags
Writing HTML is much like any other kind of writing with its own rules and guidelines. A few terms may be new to you, so we'll start with a general overview. The specific coding in the examples may not be meaningful at the moment. Instead focus on the general terminology and we'll get to the specific coding later.
Case and Space
HTML is not case sensitive. However, the current standard is to use all lowercase letters for coding. There are a few exceptions to this rule that involve escape sequences or entities (<, >, &, © ), but in general stick to lowercase letters for coding.
HTML browsers ignore extra spaces between tags in your documents, so you can use spaces and extra lines in your code to make it readable.
When you write in (X)HTML, you are coding using specific commands. These commands are made of tags and attributes.
The Web Page
A web page is made up of text content (i.e., the words that appear on the page), references (i.e., complex content like links, images, and media files), and markup (i.e., instructions to displaying content).
There are three types of markup: elements, attributes, and values.
Elements and Tags
Web pages contain a number of different components called elements. Tags are used to identify these elements.
Non-empty Element. A non-empty element contains an opening tag, content, and a closing tag.
Example
<em> wow </em>
Empty Element. An empty element contains what looks like an opening and closing tag together.
Example
<img src="frog.jpg" />
HTML tag commands are written between the less than (<) and greater than (>) signs, also known as angle brackets. Both the opening and closing tags use the same command word. However, the closing tag carries an extra forward slash (/) symbol. In XHTML, the closing tag is ALWAYS required.
Go to W3 School for examples of tags.
In the example below, notice the tag for boldface and the tag for italics.
Examples
<b> This text will appear as bold. </b>
<i> This text will appear as italic. </i>
Attributes and Values
Many tags have special options such as noting the width of a visual. These are called attributes. When you add attributes to an HTML tag, make sure that each attribute goes inside the angle brackets of the start tag. In XHTML, all attribute values must be inside a pair of double quotes. They should be in lowercase like all HTML. In the examples below the specific color number, type face, and size are quotes. Many attributes require a value such as a number or word.
Examples
<img src="frog.jpg" alt="photograph of a tree frog" width="150" />
<abbr title="Association for Educational Communications and Technology"> AECT </abbr>
Nesting Tags
The order of your tags is very important. All tags have a start and end tag. Not all kinds of tags can contain all other kinds of tags. Notice that the bold tags are on the outside and the link tags are on the inside. They are nested. Nested tags are also referred to as parents and children.
Example
<b><a href="frog.html">Go to my frog page.</a></b>
Block Level Tags
There are block level tags and inline tags. Some elements are designed to be part of a group of commands called block level tags, while others are specific to a particular piece of content called inline tags.
Block tags relate to paragraphs or areas of text that might cover multiple lines. These tags include <p> <div> <blockquote> <pre> <h1>.
The <div> tag is a block level. In other words, it defines a section (or division) of a document.
Example
<blockquote>
This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines.
</blockquote>
Result
This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines. This is a long quotation that will go over multiple lines.
For some fun, try the quote editor at Tryit Editor v1.4.
Inline Tags
Inline elements are used to describe their content. They are for things like making a word italic or making a book title bold. The inline tags include <em> <cite> <strong> <span> <code> <b> <i> <sub> <big> <small>. Be sure to use start and end tags.
Visual agents or speech synthesizer agents apply standard parameters that would show the change in the element such as a change in the look of the text or sound of the words.
Use <em> for emphasis (often italics).
Use <strong> for even more emphasis (often bold).
Use <cite> for a citation or a reference to other sources (often italics).
Use <address> for the start of an address. You should use it to define addresses, signatures, or authorship (often italics).
For some fun, try the address editor at Tryit Editor v1.4.
Use <acronym> to show the spelled out version when holding the mouse over the acryonym or abbreviation. This doesn't work with all browsers.
For some fun, try the acronym editor at Tryit Editor v1.4.
Use <sub> for subscript text and <sup> for superscript text.
For some fun, try the subscript and superscripteditor at Tryit Editor v1.4.
Example
For more information, check out the book <cite>Frog and Toad Are Friends</cite>.
Comments
Some web developers like to put comments in their coding. These can be copyright notices, reminders, or other personal or professional notes. Use angle brackets, an exclaimation point (!) and two dashes. No need for the ! after the last 2 dashes - such as <!--Put your note here.--> for comments.
Example
<!--This code is adapted from the XYZ quiz resources website.-- >