What’s HTML and how does it work? | Web Demystified, Episode 1


Hello! Welcome to a new episode of Web Demystified. I’m Jeremie and today we’re gonna talk about HTML HT… What? Basically HTML is a descriptive language that allows us to tell a web browser how to handle text content. It doesn’t make any sense, does it? Nope! Okay, we’d better get into some details. HTML is the oldest language of the web. Even though it took a few years to be formally defined, the very first web page created by Tim Berners Lee was already using a proto HTML. and if you’re curious about it that page is still online If you are interested in the history of HTML, Wikipedia is definitely your friend. Here, we’re gonna focus on the technical side of things. HTML is an acronym standing for HyperText Markup Language It is quite self-descriptive but that requires a little explanation. Let’s start with that markup language thing. It just means HTML provides a system to annotate some plain text with tags. Those tags add semantic value to any text that will be used by browser to understand how to handle that text. Yeah, yeah, fine. How does it look? An HTML tag is a small string of text made up of a pair of angle brackets surrounding its name on which you can specify further related information using attributes. By surrounding some text with an open tag and a closing tag you are creating what we call an HTML element. And we’ve created a paragraph! [hissing cat] Once you have created HTML elements you just have to nest them in order to create an HTML document. Here is the basic structure of such a document Hey, slow down! Where are all those tags coming from? and what the heck is that DOCTYPE thing at the top? All very good questions. First, a quick word about that DOCTYPE line. That line is a hint that tells web browsers that your HTML document is a fully-fledged modern HTML document. If you omit it browsers will considered your document like all those documents that have been created in the early days of the web before HTML was standardized. For backwards compatibility with those old documents they have a special display mode called: “The Quirks mode” This display mode is… well… quirky! To make it short every browser has a different quirks mode for historical reasons. Meaning you can face different behaviors from one browser to the other… yes, more than usual. So unless you are looking for trouble or know exactly what you doing, you should avoid that display mode. In clear: just add that DOCTYPE line to your document and don’t worry too much about it. If you are not afraid of headaches, you can read more in here Okay, let’s get more practical: what elements can you use to create your own HTML documents? HTML follow rules defined by the HTML Specification. Which is maintain by the World Wide Web Consortium, a.k.a W3C an organization that would definitely have its own video. That specification defines all the expected behaviors of an HTML document, which includes more than a hundred elements with all their associated nesting constraints. That’s a lot! If you want to explore all those various tags and their individual behavior, I advise you NOT to get into the HTML specification! It’s long, it’s full of boring details… It’s not beginner friendly, It’s not even web developer friendly To be honest, it is not friendly even for the very authors. It’s a highly technical document made for browser makers. Instead I suggest you take a look at the MDN Web Documentation it will provide you with a complete, yet easy to understand, documentation of all HTML tags. As a quick overview, there are tags for many things: Document sectioning Document metadata Block text semantics Inline text semantics Images & Multimedia Embedded content Scripting Forms Data tables and many more! Yes, that’s a lot but you clearly don’t have to remember everything. I don’t! To be fair, one of the cool things about HTML, it’s how resilient it is. It just means that even if you do make mistakes, it okay. Browsers will do their best to display something no matter what. So, I would say that at this point you should just fiddle with HTML and have fun with it. Wow, hold on a second. What about that Hypertext thing you mention earlier? Yeah! Right. Hypertext is just a fancy word to say that a HTML document can create a link to another HTML document. Such link can be simply activated either by clicking, by touching or by using a keyboard to move to that other document. That sounds quite ordinary these days but in 1990, that was kind of revolutionary to be able to move from one document to the next without having to type its address. To create such links, HTML provides the “a” element You can use it like this, and it will be rendered like that. Note the blue color and the underline which are the default look and feel for links Now, if you click on it your browser will load the document available at the address provided by the HREF attribute. And that’s all the knowledge you need to know to start understanding HTML. Okay, let’s recap. HTML is a markup language that allows to structure a text in order to make it understandable by web browsers. That HTML markup is made of elements formed by tags put around text. All valid HTML elements and their nesting rules are defined in a specification maintained by the W3C. Yes, it’s that simple! Frankly, HTML alone is a bit dull.
We definitely need something else to make it pretty. You know what, next up we’ll talk about CSS. Thank you all for watching this video. if you want to learn more and start fiddling with HTML I highly suggest you have a look at the learn section of MDN In the meantime, if you enjoyed this episode, do not hesitate to like it and to share it with your friends. Spreading knowledge will definitely fill up your karma tank. To continue the discussion feel free to comment down below or join me and my colleagues on Twitter. And finally… Long live the open web, see you next time!

Leave a Reply

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