Ressources

HTML Glossary

This is a glossary of terms and topics in HTML as covered in Codecademy courses. It does not attempt to completely define and explain terms, but rather provides a general overview that is appropriate for someone new to the language. For a more comprehensive treatment of these topics, we recommend the Mozilla Developer Network HTML documentation.

Tags & Elements

Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags). Tags also have attributes, which are

Syntax

<tag attribute='value'>content</tag keyword>
tag : Tag keywords include html, head, body, script, div, span, and many more...
attribute : Some property of this particular html tag
value : The value that this attribute should take on for this tag
content : String literal or more html tags

Children

An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and psuedo-elements.

Example

<ul id='parent'><li id='child'></ul>

For example, the <li> element is a child of the <ul> element.

Comments

HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments in other languages.

Syntax

<!-- This is an HTML comment! -->

Comments are preceded by '<!--' and end with '-->'

HTML

The basic tag that defines an html document.

Usage

<html> The rest of your web page goes in here! </html>

Tag that surrounds important content that is invisible to the user, but is important to the browser. Elements within this tag contain metadata about the page and links to stylesheets, scripts, etc.

Syntax

<head> 
<title>
<meta ...>
</head>

Title

This tag tells the browser what to display as the page title at the top and tells search engines what the title of your site is. It goes inside <head> tags.

Example

<title> HTML Glossary </title>

Try and make your page titles descriptive, but not overly verbose.

Link elements are used to connect your document to a related resource (very different from hyperlinks, which show up on the web page). Links appear only in the section of a document so they do not alter the content, but only the presentation. Links are most commonly used to connect to a stylesheet, script, favicon, or alternate format of the page such as an RSS feed or PDF.

Example

<link type='text/css' rel='styles.css' />
Common attributes rel, type

Body

The container for all of a page's content. Comes after the <head> tag, within the overall <html> tag.

Syntax

<html> 
<head> ... </head>
<body>
...
</body>
</html>

Anchor tags are used to create a hyperlink or to act as an anchor marking a place for another link within the page to scroll to. The most common attribute is href, which tells the link where to go.

Example

the following text is <a href='someurl.com'>hyperlinked</a>
Common attributes href, target

Formatting

Tags that add formatting, such as bold, italics, and underlining to text. These aren't used too often because they carry no meaning like <strong> and <em> and are purely for presentational purposes.

Syntax

<b>bold</b>, <i>italicized</i>, and <u>underlined</u>.

Divs

A block level container (or 'division' of the web page) for content with no semantic meaning.

Syntax

<div id='myID' class='myClass'>...</div>
Common attributes id, class

Headings

Heading elements like <h1>, <h2>, <h3>, ... allow you to use six levels of document headings, ranging from largest to smallest, breaking up the document into logical sections. For example, the word 'Headings' above is wrapped in a <h2> tag.

Syntax

<h1> This is a header! </h1>

Paragraphs

One of the most common tags in HTML - it denotes a paragraph of text. It often has other elements nested inside of it, such as <img/>, <a>, <strong> and <em>.

Syntax

<p> This is paragraph text! </p>

Line breaks

This tag is used in a block of text to force a line break. This is to be used for things which are a single paragraph, but where this formatting is necessary such as poems or addresses. To separate paragraphs, separate each paragraph into a separate <p> element instead.

Example

<p> Some text <br/> that spans two lines </p>

The resulting element on a web page will look like:
Some text
that spans two lines

Horizontal rules

By default, this tag creates a black line one pixel tall that runs the width of its container, but it can be styled otherwise with CSS.

Example

This text has a <hr/> rule through it

For example, there is a rule between the header right above ("Horizontal rules") and the explanatory text starting with "By default...".

Images

The img tag embeds an image into your HTML. Always found with the 'src' attribute, which tells the browser where to find the image.

Syntax

<img src='mylocalimage.jpg'/>

Note that the img tag is self-closing, and you can reference either local or absolute sources for the image (web sources will start with 'http://').

Lists

These tags are used in the creation of lists. The <ol> tag begins an ordered list (usually marked by numbers) and the <ul> tag begins an unordered list. Both tags utilize the <li> tag to denote each list item.

Syntax

<ul> 
<li> ... </li>
<li> ... </li>
</ul>

Definitions

Basic labels that define and separate parts of your markup. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash. (Note: there are some self-closing HTML tags, like image tags)

Syntax

content
tag keyword Tag keywords include html, head, body, script, div, span, and many more...
content String literal or more html tags

Semantic formatting

These tags are similar to the previously mentioned formatting tags which have fallen out of favor. The difference is that these tags have semantic value (meaning). <em> is used for something that you wish to emphasize and <strong> is used for something that is important. With both of these elements, you can convey the level of emphasis or importance with nesting. The more times that you nest the element within itself, the higher the magnitude of the text it contains.

Example

<p> <strong><strong>Warning:</strong>Acid can cause severe burns</strong> </p>

'Warning' is more important than the message here.