Skip to content
Lucia LADDERHTML Fundamentals Chapter 01Loading learning progress…
HTML-01-01 · LESSON 1 / 4 · ± 8 MINUTES
What is HTML?
After this lesson, you can distinguish the roles of HTML, CSS, and JavaScript, then mark up headings and paragraphs with HTML.
BEGIN WITH A QUESTION
Understanding begins with a question.
Imagine a recipe without a title, ingredient list, or ordered steps. All the words are there, but it is difficult to use. A web page also needs markers that give its content structure.
Distinguish the roles of HTML, CSS, and JavaScript, then mark up headings and paragraphs with HTML.
UNDERSTAND THE CONCEPT
HTML gives content meaning
HTML stands for HyperText Markup Language: markup for content that can be linked together. With <h1>, you say ‘this is the main heading’. With <p>, you say ‘this is a paragraph’. The browser reads these markers and displays the page.
Three complementary roles
HTML defines content and meaning; CSS controls presentation such as color and spacing; JavaScript adds behavior such as calculating a total after a button is pressed. HTML already provides basic interactions, including links and form controls. You do not need to learn all three at once.
Start with something small
In this course, you write HTML in the editor and see the result in the preview. The browser's default appearance is enough. The first goal is content that is correct and easy to understand.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h1>Sky Notes</h1>
<p>Today I learned about the Moon.</p>BROWSER RESULT
Two elements produce a heading and a paragraph. The browser supplies default styles even without CSS.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Give your notes structure
Create a main heading reading ‘Small Garden’ using h1, followed by a paragraph about a plant you would like to care for. Also answer the three questions about the roles of web technologies.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- The heading and paragraph are separate elements.
- Element pattern: <tag-name>content</tag-name>.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- HTML gives content meaning, rather than merely making text large.
- CSS controls presentation; JavaScript adds programmed behavior.
- A simple HTML website can be built without CSS or JavaScript.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.