Learning objectives
Recognize an element; distinguish structure from presentation; save a local HTML file.
Prerequisites
A text editor and a web browser. No programming experience is required.
Understand the markup
HTML describes the meaning and structure of a document. A heading identifies a topic, a paragraph groups prose, and a link connects a reader to another resource. The browser parses your source into a document tree and renders that tree. HTML is a markup language: writing a heading does not define a calculation or an algorithm.
An element commonly has a start tag, content, and an end tag. In <p>Hello</p>, the tags name a paragraph and Hello is its text. The tags are instructions to the parser rather than text the reader should see. Some elements, including img and input, are void elements and do not have end tags. Nest elements so each child closes before its parent closes.
Create a folder named journal and save a plain-text file as index.html. Open that file in your browser. Edit the text, save it, and reload the page. This local workflow needs neither a hosting account nor a build tool. A file URL is useful for basic markup practice; later examples involving fetch or modules may require a local HTTP server.
Use HTML for meaning, CSS for presentation, and JavaScript for behavior. Browsers provide useful default styling, but visual appearance does not determine an element's meaning. A large paragraph is still a paragraph; a heading remains a heading when styled with small text.
Try a working example
<main>
<h1>My reading journal</h1>
<p>I am learning to describe content with HTML.</p>
</main>Expected output
A large heading appears above one paragraph. The CSS changes color and spacing without changing the heading or paragraph semantics.
Another example
<h1>Reading journal</h1>
<h2>October</h2>
<p>I finished my first short story.</p>Common mistakes
Saving index.html.txt produces a text document on some systems. Enable filename extensions and verify the real filename. Do not use a word processor that saves formatted text.
Accessibility and browser notes
Headings help readers navigate with assistive technology. Choose heading levels by document structure, not by the size you want.
Check your work
After reloading, inspect the page with the browser developer tools. Find the heading and paragraph in the Elements panel and compare them with your source file. Edit the source file rather than the temporary developer-tools view when you want a lasting change. If the page has not updated, verify that the tab points to the same file you saved.
Practice
Create a journal page with a main heading, a month heading, and two paragraphs. Change one sentence and reload it.
Review the solution
<main>
<h1>Reading journal</h1>
<h2>October</h2>
<p>I read a story about a lighthouse.</p>
<p>Next I will try a science essay.</p>
</main>Related lesson
Build a complete HTML document
Specifications and further reading
The source is only the first representation
A browser does not paint the source file directly. It decodes bytes, tokenizes markup, builds a document tree, applies styles, calculates layout, and paints the result. You do not need to memorize every engine stage to start, but this sequence explains an important debugging habit: compare the file, the parsed Elements tree, and the visible result separately. The parser can repair invalid markup, so a page that appears correct can still contain structural errors.
For example, placing a block-level structure inside a paragraph can make the parser close that paragraph earlier than you expect. Your stylesheet then targets a different tree from the one you imagined. Before adding increasingly specific CSS, inspect whether the element is really the child you thought it was.
Treat HTML as a contract between the content author, browser, and people using the page. A native link participates in browser navigation, supports keyboard activation, and offers context-menu actions. A generic container with a click handler may reproduce one visual behavior while losing several of those capabilities. This is why learning the native elements carefully remains useful even when you later use a component framework.