HTML Review

We'll use this content to practice some basic HTML and CSS. Specifically, we'll cover:

• HTML Element Anatomy
• HTML Element Functions
• Semantic Use of HTML
• Heading elements
• Basic text formatting (paragraphs, emphasis, strong, etc.)
• Lists
• Hyperlinks

What's an HTML element?

Also referred to as as tags, HTML elements are special words enclosed in brackets that provide formatting and structure information for a document that will be displayed through software such as a Web browser.

Some people refer to HTML as code, or even programming, though it's really more of a "light" form of code known as Markup. HTML stands for HyperText Markup Language. When HTML is applied to a document, that process is known as "marking up" the document.

A typical HTML element has the following components:

• A word, known as the name of the element (such as p, strong, h1 and so on)
• Brackets enclosing the element name. These brackets are the "less than" and "greater than" symbols, like so: < and >
• The element's name and the brackets are combined to form tags. Every element has an opening tag: <strong>
• After the opening tag of many elements is the content of that element. Content can be text or other HTML elements.
• Most elements also have a closing tag, which look like these: </strong>

Put those all together and you have an HTML element: <strong>POW!</strong> or <h1>Heading</h1>

Elements can also have attributes, which are added into the opening tag: <p class="intro">A paragraph with a class attribute.</p>

And some elements are "self closing", consisting only of an opening tag with a slash before its end bracket.<img src="imagename.jpg" />

HTML Element Functions

There are many HTML elements available for use, which can be grouped by the functions they perform:

• Basic elements for defining an HTML document
• Formatting text
• Creating lists
• Creating tables of information
• Creating interactive areas, such as forms
• Linking to other documents or files
• Creating structure for layout
• Adding images
• Adding Cascading Style Sheets
• Adding meta information to the document
• Embedding scripts and multimedia objects

Also see: HTML Elements Ordered by Function

Semantic Markup

Put simply, semantic markup is using HTML elements for their intended purposes. It's a process that involves analysis of the content being marked up, making decisions about which elements are best suited for the different parts of a document, and applying those elements appropriately.

A good overview of semantic markup can be found here.