A browser can show a heading, a paragraph and a link because a web document tells it what those pieces of content are. HTML (HyperText Markup Language) describes the content and structure of that document. Hypertext can connect to other content through links. Markup means adding labels, called tags, around content.
Start with one sentence
Suppose you are making a book club page. The words “Welcome to our book club” alone do not explain whether they are a heading or a description. Add a pair of tags:
<h1>Welcome to our book club</h1><h1> starts a level-one heading; </h1> ends it. The words between them are visible to the reader. The h means heading and 1 indicates its level. To add a paragraph, use p, short for paragraph:
<h1>Welcome to our book club</h1>
<p>We read a book together every week.</p>Read the source from top to bottom: first a heading, then a paragraph. The browser supplies their initial appearance, including a larger heading and space around paragraphs. You do not need styling code yet. The next lesson explains tags and elements in more detail.
Three languages, three responsibilities
HTML describes content and structure. CSS controls appearance, such as text colors. JavaScript uses programming instructions to control behavior, such as changing content after a click. We learn them in that order. No previous programming language is required.
Open your first page
Compare the plain-text and marked-up examples in the Lab, then change the words inside body. The Lab displays a complete file; lesson three will explain its outer structure.
For local practice, create index.html in a plain-text editor, paste the complete source, save using UTF-8 and open it in a browser. Check that its actual name is not index.html.txt. After editing, save and refresh the browser. This simple local page does not require an internet connection or a web server.
Page experiment: What is HTML?
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
Two source lines usually display on one line; their content roles are not marked.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: What is HTML?
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Add your group name in one h1 heading.
- Use a p for one introduction sentence; check that the tags themselves are not visible.