Basics1
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 resusandae? Consequatur harum corporis non obceati dolor molestias beatea maxime omnis necessitatibus natus. Enim, officia pariatur! Deleniti, perspiciatis quod?
Bold <strong></strong>
The em' element is an inline element that will italisise / emphasise the text contained within the syntax. The txt is call the child nod.
Lorem ipsum dolor sit, amet consectetur adipisicing elit>. Cum delectus qui resusandae? Consequatur harum corporis non obceati dolor molestias beatea 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
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.
This text is within the 'div' element.
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.