HTML PRIMER

HTML stands for Hyper Text Markup Language. I guess Hyper Text means it is more active than Plain Text — and it is. Hyper Text can be various sizes, colors, typefaces (fonts), clickable, etc. It can include images, tables and various other types of content.

Example 01 on the left, shows us what a plain text file looks like. Example 02 on the right shows us what a rendered HTML file looks like.

TEXT

Text is probably the most important part of a webpage. Words help us to communicate complex ideas concisely. We introduce you to how HTML paragraphs and headings are to be coded.

PARAGRAPHS

As in any book, the paragraph is the most used grouping of text.The two most important HTML Elements that display paragraphs are the p element and the pre element.

p stands for paragraph. It looks like this: <p>TEXT IN HERE</p>

pre stands for preformatted paragraph. It looks like this: <pre>TEXT IN HERE</pre>

p wraps text when it runs out of space while pre does not.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 

This is preformatted text preformatted text preformatted text preformatted text preformatted text preformatted text preformatted text preformatted text.

p ignores new lines while pre uses them.

<p>There's a new line right after the word “new”.</p>

<pre>There's a new 
line right after the word “new”.</pre>

HEADINGS

The h1, h2, h3, h4, h5, and h6 elements represent headings or titles for their sections. Think of h1 as your main title on the top of your page. Then h2 which heads the lower ranking sections or subdivisions of your document. Within those h2 sections you could have less important h3 headings, all the way to the least important heading h6.

THE IMPORTANCE OF USING HEADINGS

Why are headings important? It organizes your document into logical sections or groups. We call this hierarchical documents. Organizing your content makes it easier for Google and people to read. Example 03 below shows us how headings are used in an HTML document.