HTML/CSS Vocabulary and Syntax

Here is a summary of the most important vocabulary terms that pertain to the structure
and appearance of web pages. The following code snippet illustrates each of the terms:

<h2 id="s1"
style="font-size:20px;
text-align:center;">Section 1</h2>

Click or tap on any of the boldface terms below to highlight the corresponding portion of the example:

HTML:
Hyper-Text Markup Language, the language used
to define the logical structure of web pages, breaking them down into various elements using tags.

Element: A logical unit of an HTML document, such as a header, a paragraph,
or a link. Every element begins with an opening tag; most also include content and a
closing tag. (The code snippet above consists of a single element.)

Opening tag:
A unit of HTML code, enclosed in angle brackets, that marks the beginning
of an element. Examples include <h2>,
<p>, and <a>. Some opening
tags, such as <img> and <br>, are self-contained
elements that have no content or closing tag.

Closing tag:
A unit of HTML code that marks the end of an element, such as </h2>,
</p>, and </a>. Each closing tag is the same as the corresponding
opening tag, except for an additional slash after the first angle bracket and the omission of any
attributes.

Content:
Everything between the opening and closing tags of an HTML element.
The content can consist of text and/or nested HTML elements.

Attribute:
A property or characteristic of an HTML element, such as id
or src or style or onclick, that is specified
inside its opening tag using the syntax attributename="value". Attribute values should
be enclosed in quotes (though browsers don't always enforce this rule), and multiple
attribute assignments are separated by spaces. The order in which multiple attributes are specified
doesn't matter.

CSS: Cascading Style Sheets, the language used to specify
the appearance (e.g., fonts, colors, borders, and placement) of HTML elements. CSS code can be
placed in an external .css file or inside the special HTML <style> element, but
for simple web pages it is easiest to assign it using the style attribute.

Property: Any characteristic of the appearance or placement of an HTML element
that can be specified using CSS, such as color or font-family or
margin. The syntax for specifying a property is property-name:value;
(note the colon before the value, the semicolon after it, and the absence of quotes). The order in which
multiple properties are specified doesn't matter.

So in the code snippet above, there are two CSS properties that are specified in the
style attribute, which is one of two attributes specified in the opening tag
of the h2 HTML element. Got it? :)