Published on

Websites, the Internet, and Web Development #1

  • avatar
    Lucas Wang

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 ( 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 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

HTML element diagram

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:

h1 to h6Headings (1 to 6)
aAnchor (Link)
ulUnordered List
olOrdered List
liList Item
strong or bBold
em or iItalic
brLine Break

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


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 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:




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.

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.


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.

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

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

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.


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.

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


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!