Rundown of HTML

A long time ago I had a friend who was trying to get into programming, and stoked to be learning HTML. I wanted to say that HTML isn’t a programming language, but I think I bit my tongue. I don’t think that’s the right attitude toward someone trying to learn a new skill. Besides, I think some of the arguments against HTML being a programming are flawed. For example, you can think of each tag or element as a variable all its own. Especially once you start using CSS and start assigning IDs or Classes to each one. I’m technically stretching the definition by academic standards, but I don’t really care. The only difference between ID and Class in CSS is semantics and a single character anyway. Anyway, I thought it might be fun to go through the basic anatomy of a webpage.

The first tag you use in a HTML document is <!DOCTYPE HTML>, and it is the one of the only tags you will not close. I don’t recall this being necessary back when I started, but it gives the browser a heads up that the page is an HTML page. There’s a lot of fun things you can do with webpages that are not always directly related to HTML. After the !DOCTYPE tag you have the <HTML> tag so the browser knows where the HTML resides. You can write JavaScript and CSS within HTML based pages, but it’s generally not recommended. Then, like the human body you have the head tag.

The head tag provides all the meta data about the website: its title, relevant keywords for bots, page description, author, and so on. In fact, if you look at a page’s source code (just right click and select “View Page Source”) you will usually see a title and quite a few meta tags near the top. This is also where you import your CSS stylesheets so the browser processes them as the page loads, and where you should import any JavaScript too. Importing a CSS stylesheet uses the <link rel=> tag, and JavaScript uses the <script src=></script> tag. Nothing you do in this part of the document will show up on the page itself, but the title will show up in the browser tab. All the fun stuff occurs in the body of the document.

The body of the document is what appears when the page loads. I recommend visiting W3School for a comprehensive breakdown of what you can do, and examples in the body of the document. However, you’ll likely use <h> and <p> tags no matter what you’re doing. That is because the h in <h> stands for header, and the number tells the browser the size of that header. On the other hand, the p in <p> stands for paragraph. You can also use numbered or ordered lists (ol), unordered or bulleted lists (ul), tables, forms, and so on. One quick thing to note about tables is that they are usually for displaying information in an organized manner. At the end of the day though W3Schools has an HTML validator tool, so I sincerely recommend checking them out as a resource.

At the end of the day I think HTML can work as an introduction to programming. It may not be dynamic on its own, but a lot of the underlying grammar is in place. You could use like three tags and technically create your own HTML page as long as it’s saved as “.html” file type. It might seem overwhelming at first, but there’s nothing wrong with having a cheatsheet. I built my first website back in 2003 or 2004 or something, and it was horrible; I still use W3Schools myself from time to time because it’s convenient.

Leave a comment

Your email address will not be published. Required fields are marked *