We all use the internet. We all have visited a website before. Unless you downloaded this blog article and are reading this from a file right now, you are using our blog website (blog.richcode.org). So how is the internet made?

The internet is vast, and there are quite a few ways to make a functioning page. The most common is using HTML, or HyperText Markup Language. HTML constitutes the part of the internet that you see and use directly.

HTML

HTML is similar to a text editor, such as Google Docs and Word. Unlike these tools, HTML indicates what text needs to be red, what needs to be bolded, and what needs italicizing using plaintext. It does this by “selecting” pieces of text using HTML tags. A tag usually looks something like this:

Nonbolded text <b>Bolded text</b> Nonbolded text

If I loaded an HTML page with the code above, it would look like this:

Nonbolded text Bolded text Nonbolded text

The <b> and </b> are HTML tags. The <b> tag is the opening tag, which starts the selection. The </b> tag is the closing tag, ending the selection. The stuff between, in this case Bolded text, is the selected items, otherwise known as the content. The opening tag, content, and closing tag together make an element: <b>Bolded text</b>

Important: Never use an HTML opening or closing tag if it is not part of an element

Also notice, the b inside <b> is the tag name. This indicates what you want to do with the text, and what the selection should look like. The b tag is used for bolding text.

Here is a table of some common HTML tags:

Let’s go into the other ones a bit too!

Paragraph

The <p> tag creates a paragraph of text. This will not format the text in any way other than adding spacing before and after the paragraph. Additionally, paragraphs start on a new line. This tag is good practice to use for just about all text.

Headings

Headings are by default bolded, and have font sizes usually larger than normal text. <h1> is the largest font size, followed by <h2>, so on, until <h6>. They will look something like this:

h1

h2

h3

…

so on. Once you get to around <h4> and <h5>, the font sizes start becoming very small, and in some browsers dip below the regular text font size. Headers, like paragraphs, always start on a new line. They will also be given a bit of space below and above, just like a paragraph. However, these are generally reserved for headers only, do not use them to bold text; use the <b> tag instead.

Links

In HTML terms, these are called anchor tags (hence the character a), a term established a long time ago. Nowadays, the word links will do. Links are usually in a blue, cyan color with an underline. When you click on it, it takes you to a URL. For now, just knowing the definitions will be enough; there is another knowledge point behind how to use them.

Lists

Unordered lists are lists without numbers, like bullet points. They are indicated by <ul> tags. The list items are in the content of the <ul> tag.

Ordered lists are numbered, or have a certain order. They are indicated by <ol> tags. The list items are in the content of the <ol> tag.

Both of these kinds of lists use the tag <li> to indicate a list item. The list item’s contents contain the text of the list item.

<ul>
  <li>This is a bullet point</li>
  <li>This is another bullet point</li>
</ul>

<ol>
  <li>This is item one</li>
  <li>This is item two</li>
</ol>

The above will look like this:

• This is a bullet point
• This is another bullet point

1. This is item one
2. This is item two

Note that the <li> tags are inside the content of the <ul> and <ol> tags. This is called tag nesting.

Bold

In essence, <b> and <strong> do the same thing: make text bold. However, <b> is supposed to be a style, while <strong> indicates how the text should be understood.

(If you don’t understand this, don’t worry.)

There is an answer on StackOverflow about this, in case you want to learn more.

https://stackoverflow.com/a/271776/16954055

All you need to know is that both of them work and both of them bold text.

Italics

Again, <i> and <em> both indicate italicized text, and they have the same classification as <b> and <strong>. More information is provided in the StackOverflow link above. The usage of these tags is the same as <b> and <strong>.

The line break

The <br> tag indicates a line break and is one of the few tags that stands as an element by itself, meaning that it does not need content or a closing tag. Unless you are using the <p> tag, you usually will not have line breaks in your text unless you use the <br> tag.

Some text
<br />
Some text after a line break
<br /><br />
Some text after two line breaks <br /><br /><br />
text after 3 line breaks

Try writing some HTML yourself using what you have learned today!