HTML. Hypertext Markup Language. It's almost as old as the internet itself.
We're on HTML5 now, which has brought us from this to this. This isn't a history lesson though, we'll cover all the most important aspects of modern HTML in just 5 minutes starting now. You always start with index.html, which is like the instruction manual for every website you load. Load this javascript, these images, these stylesheets, etc.
In fact, every webpage is like a folder, like one on your computer, that the browser can assemble. with these instructions. So we could create an HTML file with just content like so, and it would appear like so.
But that's not really the point. Things get interesting when we make this content into an HTML element. We do this by adding an opening and closing tag around it.
Now we have one complete element, tags plus content. This is a header tag, one of six that not only tells us how to size the element, but gives search engines valuable information. We're jumping ahead a bit though because what we have so far is not correct HTML. Really, we want to put everything inside an HTML tag, and within that add a head and body tag.
Head tags contain meta information, scripts we want to load before the page does, and often style sheets too. Body is everything else. It's what we want to appear literally on the page, so all of our content and main elements will go inside. We'll often add scripts to the end of our body too. This body, head, and meta stuff is usually called boilerplate.
It's mostly the same every time, so you can just generate it with autocomplete. in most code editors. In mine vs code, you just press exclamation mark and tab. Boom. Now, let's talk about the most common HTML elements.
You have these titles, but you can also have paragraph elements, which you can use to separate long form text content. There are more text elements too that modify your existing text, like underlining, making it bold, italic, but these are a bit weird because you can also use CSS to do this. Did I mention by the way you can nest elements inside each other? I think I did, but you definitely can. Now let's talk attributes which can modify your elements or add properties to them.
Attributes go inside the opening tag. There are global attributes like classes and ids that you can add to any tag out there. A class lets us style an element or select it with JavaScript later on when we add CSS and JavaScript. Pretty useful.
We can apply multiple classes with a space and reapply the same class to any element. Other attributes are element specific. For example, if we want to load an image, we would use an image tag.
And the image tag requires a source attribute to work. The source should be the URL of your image. Then it works! Images have a lot of optional attributes too. Alt for backup text, width, and height.
Let's keep going. Anchor tags are links. They're super important for navigation and require an href attribute that is the URL you want to link to.
We have ordered and unordered lists, depending on whether you want numbers or bullet points. Use the li tag inside them for each item. You can create button elements and use them as links.
or style them with CSS and add JavaScript to do some pretty cool stuff. Next up, we've got forms. With these, users can log in, create posts, make payments, and more.
And you'll do this by wrapping one or more input elements. Now, you can have the basic text, but you can also have emails and passwords. Beyond that, you can have checkboxes, radios, and select dropdowns. You can link an input to a label with an ID on the input and a for attribute on the label.
And when you click the label, it will activate your input. I'm using checkbox as an example, but this works for all the inputs. The submit action can be triggered by a button or in certain cases by hitting enter.
For form submission, add the action attribute and then the name attributes to your individual inputs which will put their values in the URL when you submit. And there's a bunch more attributes for inputs like disabled, autofocus, and required. Most people still pull up a reference for this even if they've done it a hundred times.
There's one more weird attribute you can put on anything too, a data attribute. You can store any string data on an element and then retrieve it later. Okay, let's talk about container elements. You can put stuff inside a div or a span and then style or select this container. Spans are for inline text and divs are for sections, but an anti-div movement has actually emerged.
More on that soon. Last up, we've got style and script tags, which flips the language you're writing between the tags. Inside style, CSS, and script, you guessed it, JavaScript. So you can write all three languages in a single HTML file, but to keep things organized, you should generally separate them. Just make a second file, it's not hard, and then you can import that file, like so for CSS, and like so for JavaScript.
Finally, let's talk about that anti-div movement called semantic HTML. Instead of a div which is a generic container, you're supposed to use more descriptive containers, like these. These containers don't function any differently, but they're supposed to be better for search engines. And for developers, assuming you name your containers correctly, that is. Anyway, that's HTML in 5 minutes.
It's really not too bad or complicated. Hope you learned something. Let me know what you want me to explain or build in 5 minutes, and I'll see you real soon.