Introduction to mark-up

Basics

The Paragraph tag <p></p>

The paragraph tag is syntax that wraps paragraphs in need code blocks. Paragraphs are block level elements, which we will discuss later.

Inline elements

Bold <strong></strong>

The 'strong' element is an inline element that will bold the text contained within the syntax. The text is called the child node.

Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum delectus qui recusandae? Consequatur harum corporis non obcaecati dolor molestias beatae maxime omnis necessitatibus natus. Enim, officia pariatur! Deleniti, perspiciatis quod?

Italics <em></em>

The 'em' element is an inline element that will italisise / emphasise the text contained within the syntax. The text is called the child node.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum delectus qui recusandae? Consequatur harum corporis non obcaecati dolor molestias beatae maxime omnis necessitatibus natus. Enim, officia pariatur! Deleniti, perspiciatis quod?

Inserting images

Images are also inline elements. There are a couple of ways to insert an image. The easiest way is to reference an image from the internet directly. Be careful as you may not have copyright permission to publish this in this manner.

Remote path reference

This is a Kookaburra picture.

Local path reference

Win this Paspaley Pearl

Creating a link

A hyperlink (links) are a clickable reference to take the viewer from one page to another.

Example

Here is a link to a really cool live active cyber-security threat tracker.

The target attribute to a link anchor 'a' syntax tells the browser how to handle the new page. Default (left blank) opens it in the current window. target="_new" opens it in a new tab.

Here is a link to a really cool live active cyber-security threat tracker that will open in a new tab.

Block-level elements

Block level elements occupy the entire width of the containing element. For example, a paragraph below has the width of the window as it's containing element, so will take the entire width, even if it does not use it.

Example

This text will occupy an entire row.

This text will appear on it's own new row below.

Structural mark-up elements

Structural elements are syntax that define sections within our mark-up document. Elements like 'header', 'nav', 'main' and 'footer' are frequently used.