HTML: The Very Basics
The language of the modern web is HTML5. It’s a great thing. You probably don’t understand why yet, but you will.
Our most basic page:
That’s really boring, you might say. Well yes, it is. If you opened it in a browser it would be a blank page. But it is important because before we get into actually having stuff on our page, we should probably figure out what is going on here.
We’ve saved the file as a .html file. You can do this from any editor, including Notepad, TextEdit or Word (i do not recommend using word under any circumstances). All you have to do is write .html after your file name. This tells the browser, “hey! this ones for us! let’s render it” and starts the whole process of displaying your web page.
We’ve opened and closed some tags. Namely, the HTML, HEAD, and BODY tags. Note how the HTML tag is opened before the HEAD, and closed after the BODY is closed.
Opening and closing, let’s cover that. Its like drawing a box around some things to group them together. It basically just tells the browser “all of these things are grouped under this other thing”.
Opening tags look like this <element> and closing tags have a leading forward slash </element>. There are some tags that are what is called “self closing” meaning instead of needing a pair of them, you just need to put a slash at the end of the opening tag. Like so: <element /> We’ll get into which ones these are and why they are different later.
So HTML, HEAD, and BODY are all containers. We put things in them. The browser expects certain things to be inside of each of them, and knows what to do with those things.
The browser expects the HTML container to have a HEAD and a BODY.
The HEAD is kind of like an area to get all of the small talk out of the way before you get to the real conversation. It’s mostly an area to store formal things, like the TITLE of the page, which shows up in your browser window’s toolbars. The HEAD also stores other important information.
The BODY is where all of your content will go. Every time you look at a page on the internet, you’re looking at the BODY of the HTML file. This is where most of the fun stuff happens. We’ll talk more about the BODY in the next post.
I know this was a very basic post, but I’m trying to teach the content in little-tiny-bite-sized pieces. It’s a lot to take in all at once, and letting these most basic concepts sink in will help. Try looking at the source of this or any other page and examine the HEAD and BODY and see all the wonderful things that are in each.
Go ahead and create your own HTML file and place words inside of the head and the body. Open the file in your browser. What shows up? What doesn’t? Is it in the source code even if it’s not on the screen?