---

Let's start with the very basics. Want to follow along and try out some of the coding? Go to this free live HTML coder to get interactive feedback.

---

Above is an example of a Hypertext Mark Up Language (HTML) tag. Tags must be surrounded by < and >. The first arrow tells the webpage that the tag has begun, and anything after it is coding. The tag must be ended when finished with the second arrow. If you do not, the computer will think that words you put after are not part of the coding.


One is an example of "random word" showing up as part of the code because the ending arrow wasn't added.
Two is an example of the command for "font" being cut off because the ending arrow begins too early.
Be aware that both of those mistakes will break your code. It will look strange!

Now that we have <b>, we can put some words after it. Once we finish our word, sentence, or paragraph, we put the end tag which is the same as the start tag but with a / after the first arrow.



The same goes for any other tag whether the tag makes words bold, italic, or makes a blue box (boxes are in the DIV/SPAN unit).

---

Now that you know about tags, you must learn how to set up a HTML page. This does not mean you have to have a file on your computer because websites offer coding for customization.

Before I continue, using a live HTML editor is fine for beginners, although if you think you'll be invested into coding and want a more organized experience, I highly suggest downloading a free website coding software such as Visual Studio Code which will color code for you, keep files organized, and auto-save work. On a website coding software, you will have to look up the tutorial for the certain software you're using to learn its interface and features. Within the software, you will make a HTML document by naming it something such as website.html. Only one file is needed for simple coding and I will go further into why you would need multiple HTML files in Unit 6.

This is the bare minimum you will need:



I suggest putting an indent on certain tags to keep things easier to read as having everything on the same vertical line can get confusing.

I have added a number before each line to make it easy for reference to the coding. On line 3 is the head. This is where you put your site title (the tab title), your stylesheets (Unit 4), different stylesheets for coding (Unit 6), as well as the favicon, which is the small icon that shows up on the tab.

Below is the heading of a site I coded:



You may have noticed <!--BootStrap-->. This is an HTML comment which allows you to label coding and stay organized for yourself and/or others. A HTML comment can span one line or be on multiple lines. Below is an example of a comment spanning multiple lines. In these comments, you can put coding as well as text. As long as the coding is inclosed within the comment's beginning and end tag, the coding you put within the comment will be nullified. Comments will be visible within the raw code but not in the resulting website and often look faded in color.