[HTML Introduction] A Guide to Basic Tags and Practical Techniques
Introduction
HTML (HyperText Markup Language) is the most fundamental language for creating the "skeleton" of a web page. All the text, headings, and images we see in a browser are defined by the structure of HTML tags. This guide explains how to use some of the most important tags that beginners often struggle with, along with practical techniques to utilize them.
Table of Contents
- 1. Basic Operations for Headings and Text
- 2. Mastering the
<span>Tag - 3. Techniques for Conveying Information to Users
1. Basic Operations for Headings and Text
The foundation of a web page is to convey information hierarchically. Let's master the correct way to use headings and text.
Adjusting the Size of Heading Tags (<h1>, <h2>, <h3>)
Heading tags from <h1> to <h6> are extremely important for indicating the structure of a page. While they have different default sizes, you can freely adjust their size to match your design using the CSS font-size property. By creating a size difference according to the heading level, you can express a visually balanced hierarchical structure.
Forcing Line Breaks in Headings and Sentences (<br>)
Normally, text automatically wraps to fit the width of its container, but for design purposes, you may want to force a line break at a specific position. That's when you use the <br> tag. However, be aware that this can cause unnatural line breaks in responsive designs, so it's best to avoid overusing it for layout purposes.
2. Mastering the <span> Tag
The <span> tag is a very powerful inline element that has no semantic meaning on its own, but when combined with CSS, it can be used to apply specific styles to parts of a sentence.
Changing the Style of Just a Part of a Sentence
The <span> tag is perfect for when you want to change the color of just one specific word in a long sentence or make it bold. As in <p>I like <span style="color: red;">red text</span>.</p>, you can easily add a design accent just by surrounding the part you want to style. It's fundamental to use it for purely decorative purposes where no semantic emphasis is needed.
Emphasizing a Part of a Link Text
Even within a single link (<a> tag), you might want to make a specific part stand out, like in "Buy now for 50% OFF". In such cases, you can utilize the <span> tag to surround the part you want to emphasize and apply individual styles.
Applying CSS Animations
By applying CSS animations to text wrapped in a <span> tag, you can add dynamic effects to your page. It's effective for partial effects, such as making a "New" badge blink.
3. Techniques for Conveying Information to Users
HTML has convenient features to help user operations and provide additional information.
Displaying Icon Fonts
Using icon font libraries like FontAwesome, you can display a variety of icons on your page with simple code like <span class="fa fa-camera"></span>. Icons can be changed in color and size just like text, greatly improving UI visibility. (*Note: You need to load the respective library's CSS file separately.)
Adding Tooltips (Hint Display)
You can easily implement tooltips using the title attribute, which can be added to all HTML elements. When a user hovers the mouse cursor over an element, the text specified in the title attribute is displayed in a small pop-up, which is useful for brief explanations of technical terms and more.
Conclusion
This guide has focused on the basic tags of HTML, especially the advanced uses of heading and <span> tags. These tags are very simple, but when combined with CSS, they can greatly improve the design and functionality of a web page. First, try using this summary article as a reference to experiment with various techniques.