Hello! Welcome to your first lesson in the "Create an Education Web Site" course. I'm excited to guide you on this journey. Given your goal to build a feature-rich educational platform, we're starting right at the beginning with the absolute foundation of every website on the internet: HTML.
This lesson will focus on answering one fundamental question: What is HTML and what is its purpose in web development? By the end of our 60 minutes, you'll understand why HTML is the essential first step and how it acts as the skeleton for any webpage, including the ones you'll soon be building for your own site.
The Three Pillars of the Web
Every website you've ever visited is built using a combination of three core technologies: HTML, CSS, and JavaScript. A great way to think about them is through an analogy:
- HTML (HyperText Markup Language) is the structure or skeleton of the page. It defines the content itself—the text, the images, the links.
- CSS (Cascading Style Sheets) is the presentation or the artist. It styles the HTML, controlling colors, fonts, and layout.
- JavaScript is the behavior or the wizard. It adds interactivity, like pop-up messages, animations, or fetching new data without reloading the page.
Since you have experience with Figma, you can think of HTML as the raw elements you'd place on a canvas: the text boxes, the image placeholders, the buttons. It's about defining what is there, not what it looks like or what it does when you interact with it. In this course, we'll start with HTML, then move to CSS, and finally JavaScript, building up your skills one layer at a time.
To see this relationship in action, let's watch a short video.
HTML, CSS, JavaScript Explained [in 4 minutes for beginners]
This video from Danielle Thé provides a quick and clear analogy for how HTML, CSS, and JavaScript work together. It effectively shows what a website looks like with only HTML.
Watch the section from 00:31 to 01:20. Pay close attention to the roles of 'The Builder' (HTML), 'The Artist' (CSS), and 'The Wizard' (JavaScript), and especially the visual example of an HTML-only website.
As you saw, a website with only HTML is functional but not very visually appealing. It contains all the content, but it lacks the design and polish that CSS provides. This is why HTML's role is so specific and foundational: it's all about structure and content.
What Does "HTML" Actually Mean?
Let's break down the acronym: HyperText Markup Language.
HyperText
This refers to text that contains links to other pages on the web. When you click a link, you're using hypertext to navigate from one document to another. This system of interlinked documents is the very essence of the World Wide Web.
Markup Language
This is the most crucial part to understand. HTML is not a programming language like Python or Java. A programming language is used to perform logic, calculations, and make decisions.
A markup language, on the other hand, is used to "mark up" or annotate text to give it meaning and structure. You use HTML to tell the web browser how to display the content. You "wrap" your content in HTML tags to tell the browser, "This text is a heading," "This is a paragraph," or "This should be a bulleted list."
To dig a little deeper into this distinction, please read the first few paragraphs of the following article from Codecademy.
What is HTML Used For? I Codecademy
This article, 'What is HTML Used For?', clearly explains the difference between a markup language and a programming language.
Read the first two paragraphs, stopping at the example code block. Focus on the distinction it makes between markup languages and programming languages.
So, HTML doesn't calculate your quiz score or process a payment. Instead, it provides the structural elements for the quiz—the questions, the answer choices, and the "Submit" button.
What Is HTML Used For?
At its core, HTML's purpose is to organize and structure content for the web. Think about the educational site you want to build. HTML will be responsible for:
- Structuring Web Pages: Defining the main heading for a course, the subheadings for different modules, and the paragraphs for lesson descriptions.
- Navigating the Internet: Creating the links in your navigation bar that take users from the homepage to the "Courses" page or the "About Us" page.
- Embedding Media: Placing images, like a course thumbnail, or embedding a video lesson directly onto your page.
Let's read a bit more from the Codecademy article to see a list of HTML's capabilities.
What is HTML Used For? I Codecademy
Now let's explore the concrete applications of HTML. This section of the same article details exactly what we use HTML to accomplish.
Read the section titled 'What is HTML used for?'. You can skim the subsections on 'Game development' and 'Interacting with native APIs' for now, as they are more advanced.
Test your understanding!
Imagine you are building a course page for your educational website. The page needs to have a title, a short description, and a list of lessons. Which of the following tasks is the direct responsibility of HTML?
- Making the title text blue and bold.
- Defining which text is the title, which is the description, and which items form the lesson list.
- Making the page automatically check off a lesson when a user clicks on it.
- Storing the user's progress in their account.
Show answer
The correct answer is 2.
HTML's job is to define the structure and semantics of the content. It tells the browser "this is a title," "this is a paragraph," and "this is a list."
- Task 1 (styling) is the job of CSS.
- Task 3 (interactivity) is the job of JavaScript.
- Task 4 (data storage/backend) is beyond the scope of HTML and would involve a server-side language and a database.
Conclusion
In this introductory lesson, we've established the fundamental role of HTML in web development.
Key Takeaways:
- HTML stands for HyperText Markup Language.
- It is the standard language used to create the structure and content of web pages.
- It is a markup language, not a programming language, meaning it annotates content for the browser rather than performing logical operations.
- HTML works together with CSS (for styling) and JavaScript (for interactivity) to create modern websites.
You now have the foundational knowledge to understand why we're starting with HTML. You can't paint a house or install wiring before you've built the frame.
Preview of the Next Lesson:
Now that we've covered the "what" and "why" of HTML, our next lesson will dive into the "how." You'll get your hands dirty with code for the first time as we learn how to create a basic HTML document with the correct structure, setting up the essential doctype, <html>, <head>, and <body> elements.