What is HTML? Hypertext Markup Language is the standard way to format text for use on web pages. So if you ever find yourself needing to edit a webpage or create one from scratch, this is the most basic way to display anything on a page.
Basic Structure
HTML is broke up into several different elements, noted by tags. You can write anything you want on your web page, but these tags are at the core of HTML and are used to give your text its structure. Tags are noted with angle brackets <> and wrap around the text that it affects. It should be noted that the tags need to go in a specific order, like so:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph text.</p>
</body>
</html>
Let’s break that down. The first tag is <!DOCTYPE html> and that’s just a one-time declaration to help the computer understand that it’s about to read an HTML document. That way, it knows what to expect. You don’t need to close this tag.
Next, it’s the <html> tag. Everything, the whole page, is contained inside this tag.
The <head> tag is where you keep file path references associated files, like CSS files for styling, Javascript files for functions, and other page metadata like titles. The <head> tag closes with a forward slash and closes out all the page metadata before the <body> tag begins.
Finally, the <body> tag surrounds the main content of your page. Inside this tag, you’ll find lots of tags like <p> (paragraph text), <h1> (largest header text) through <h6> (smallest header text), <ul> (unordered list AKA bullet points), <ol> (ordered list AKA numbered), <a> (anchor tag, used for making clickable links) and <form> for forms. There are several more, but those are some of the most common tags you’ll find.
Why Tags?
These tags server two main purposes. The first and primary purpose is to tell your web browser how to interpret all the text coming from a web page. Is it a title? A paragraph? A list? Table? This provides the overall structure of the page. HTML is often referred to as the “skeleton” of the web page. It’s functional, but not necessarily the most beautiful thing out there.
Additionally, tags provide a great element that CSS files can use to apply style. So instead of applying a style to ALL text in an HTML document, CSS can select just the headings (<h1> tags) and apply styles to just the text inside those element tags.
That’s it for the basics! There are tons of free online courses and videos out on the web to help help get to grips with the basics of web design and development. In this day and age with so much of our lives existing on the internet, it definitely doesn’t hurt to know some of the basics of how the web works.