Day 3: Learn Text Tags and Master Webpage Text Layout Today, I started learning specific tags, beginning with the most basic text tags, as text makes up the majority of webpage content. I mainly studied heading tags, paragraph tags, bold and italic tags, as well as line break and divider tags. I practiced each one repeatedly and gradually got the hang of them.
The heading tags range from
to . From to , the font size decreases progressively, with built-in bold styling and top-bottom margins. Importantly, a single webpage can only contain one tag, which is used for the most critical title and benefits SEO, while multiple to tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance.
to , the font size decreases progressively, with built-in bold styling and top-bottom margins. Importantly, a single webpage can only contain one tag, which is used for the most critical title and benefits SEO, while multiple to tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance.
tag, which is used for the most critical title and benefits SEO, while multiple to tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance.
tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance.
The paragraph tag is
, used to wrap paragraph text. Unlike plain text written directly on the page, content within separate
tags has default spacing between paragraphs for a neater layout. Previously, I typed content directly in the body section, resulting in cramped, clustered text. After using the
tag, the page layout became much cleaner instantly.
The bold tag is and the italic tag is . A key takeaway: can also bold text and can italicize text. However, tutorials recommend prioritizing and for their semantic meaning, whereas and only control visual styles. It is more standardized to manage styles with CSS later on, so beginners should develop good coding habits early.
The line break tag is
and the horizontal divider tag is
. Both are self-closing single tags with no corresponding closing tags required. Simply inserting
creates a line break, and
inserts a horizontal line on the page to divide different content sections, which is extremely practical.
Common Pitfall Reminder: When I first started writing tags, I frequently forgot closing tags. For instance, I would add an opening
but omit the closing
. After saving and opening the webpage, the entire text layout fell apart. I later learned that most HTML tags are paired double tags that must be used in matching sets, with only a few single tags exempt from closing tags. This detail requires close attention.Day 4: Hands-on Practice – Building a Simple Personal Introduction Page After three days of foundational learning, I completed a practical exercise today by creating a basic personal introduction page to apply all the tags I had learned and assess my learning progress.
The page structure was straightforward. I used the
tag for the main title “My Personal Introduction”,
tags for descriptive text, to highlight key information,
to separate different content sections, and line break tags to adjust text line breaks for a tidier visual effect.
I encountered a minor issue during coding: I wanted to center the text but had no idea how to do it. After checking tutorials, I discovered that pure HTML cannot directly adjust text alignment or other styles, and CSS is required for visual modifications. Since I have not learned CSS yet, I put the centering adjustment aside and focused on ensuring a correct page structure first. There is no need to rush. I will solidify my HTML fundamentals first and optimize the design with CSS in later studies.
Additionally, I experimented with list tags, including the unordered list tag
- and list item tag
- , to organize my skill list, such as “HTML (In Progress)” and “CSS (Not Started)”. Wrapping each skill item with
- inside an unordered list greatly improved content organization and looked far more structured than listing content in separate paragraph tags.
Once finished, I right-clicked the file and opened it in a browser via the Open in Browser plugin. Seeing my first self-coded simple page, despite its plain design with no decorative styles, filled me with a strong sense of accomplishment. Practical hands-on practice is far more motivating than merely watching tutorials and taking notes.
Summary of Four Days of Learning: I have gone from having zero knowledge of HTML to constructing basic webpage structures. I have mastered core text tags and list tags, and become proficient in basic VS Code operations. Though I encountered many coding pitfalls along the way, solving each problem helped me acquire new knowledge and skills.
Future Learning Plan: I will continue to study image tags, hyperlink tags and form tags, which are essential elements for mainstream webpages. Mastering these tags will enable me to develop more feature-rich and diverse webpages.
Lastly, I want to share a message with fellow new front-end learners: do not fear difficulties or seek instant results. Take things step by step, learn a little each day, practice consistently and summarize regularly, and steady progress will follow. I will continue to update my learning journal to record every stage of my growth. Let’s encourage each other and strive to move from beginners to skilled developers soon!💪