CS 100 (Learn) — CS 100 (Web) — Module 07
To understand the HTML language, you will need to understand tags.
Every tag has a name (or identifier) that specifies the type of the tag.
An HTML begins with a less than symbol (<) and ends with a greater than symbol (>).
<tagname>
These are often referred to as "angle brackets" or pointy brackets (as opposed to round brackets (), square brackets [] or curly/brace brackets {}).
Formally, angle brackets 〈are slightly different〉 (and require unicode), but in the HTML community it is common to refer to the combination of the less than and greater symbols (<>) as "angle brackets".
HTML tags are case-insensitive.
In other words, <tagname> is equivalent to <TAGNAME> or <TagNamE>. Nearly every HTML style guide recommends using lower case (<tagname>) exclusively.
Many HTML Tags appear as pairs. For example, the emphasis tag:
You can <em>add emphasis</em> to your text
You can add emphasis to your text
To add emphasis you need an opening tag <em> and the closing tag </em> to indicate respectively where the emphasis begins and ends.
The name of the tag is the same, but the closing tag has a preceding slash (/).
Paired tags are much like "quotation marks" in English. They surround the content they affect.
An HTML element is the technical term for everything that begins with a start tag and ends with an end tag, including the tags themselves.
In the above example, the HTML element would be: <em>add emphasis</em> and is referred to as an <em> element.
We will be using this "element" terminology sparingly in this course and only for correctness. However, if you want to learn more about HTML or are reading HTML documentation, this terminology is quite common.
Paired tags may be nested. For example, you can have a <strong> element within an <em> element.
You may need to <em>add some <strong>importance</strong> within emphasis</em> on occasion.
You may need to add some importance within emphasis on occasion.
An element may be fully contained (or nested) within another element, but it cannot begin inside of an element and end outside of it.
For example:
<x>.....<y>.....</y>...<z>......</z></x>
is allowed, but
<x>.....<y>........<z>...</y>...</z></x>
is not allowed because the opening <z> tag appears within <y>....</y>, but its matching closing tag does not.
Not all HTML tags are paired.
For example, consider the tag to insert a horizontal line (or horizontal rule): <hr>
This is text before the horizontal rule.
<hr>
This is text after the rule.
This is text before the horizontal rule.
This is text after the rule.
As an aside, the <hr> element is known as an "empty" (or "blank") element because it has no content. We are only mentioning this in case you want to learn more about HTML elements.
A tag can also include attributes, which contain additional information to control the behaviour of the tag (element). For paired tags, the attribute must appear in the opening tag.
An attribute is usually the combination of the attribute name and its value, written as: attributename="value"
The general syntax for a tag with attributes is:
<tagname attribute1="value1" attribute2="value2">
You may see examples of attributes without values or values that are not enclosed in quotes (""), but for this course you should follow this syntax.
We have seen an example of an attribute used with the <a> (anchor) tag. The href (hypertext reference) attribute specifies the destination of a link.
You can visit the <a href="https://en.wikipedia.org/wiki/HTML">Wikipedia HTML</a> page for more information.
You can visit the Wikipedia HTML page for more information.