HTML 101

Let's get into it 🫡

HTML Elements & Tags

let's just check out a line of HTML code:

<p>I am a paragraph</p>

that line of code is referred to as an HTML element. an element is made with tags. the tags are the code that describe what kind of element you are writing.
our little example is using p tags. p stands for paragraph and is typically how you render text on a screen.
the p tag, like most HTML elements open and close; then the text you are rendering goes inside the tags.
close the tag with the forward slash (/).
most HTML tags need to open and close but some can self close, like the image tag:

<img src="path/to/image" alt="pic name" />

theres a ton of HTML tags. the truth is a lot of them are semantic, have kind of rare use cases and a lot are not used or even supported anymore. if you want you can check them all out (opens in a new tab). learning all of the tags is totally not necessary. I'll show the most important ones and some nice to know ones but as always with coding, Google and ChatGPT are your best friends.

Anatomy Rundown

note: you do NOT have to memorize this, just be familiar with it

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

above is technically a valid web page. that's all you need to start putting shit on a computer screen.
the anatomy (opens in a new tab) is pretty straight forward.
- the DOCTYPE tag is actually not even necessary in most cases anymore
- open up <html></html> tags to tell the computer that is what you are doing
then you have the <head></head> which is where you put things that aren't going on the computer screen; like your page title, meta data and usually scripts to connect things like JavaScript, CSS files, APIs, etc.
and then <body></body> is where you put everything you do want on the screen.

NOTE you may have heard of the tabs vs spaces debate and noticed on the above example the way the HTML tags are formatted. for the record, that shit is all technically optional and computers do not give a fuck how the code looks (unless its python 🐍 but thats a different conversation). making your code pretty makes it easier on your eyes, easier to read, easier to edit, find bugs, etc. the convention is if you are opening a tag, indent the ones nested inside.

1. HTML 1.2 Exercise