How I Use the span Tag
(feat. step-by-step tutorial)
Today's Contents
• What is the span tag
• How I use the span tag
Hello, Radiant Guys! How are you all? After I finish preparing dinner, I got back to my desk to practice coding for a little while. Of course, I'm also preparing some content to share with you. Amm, Suddenly... I feel like I'm so grateful that I have this time.
In this post, I'm going to introduce two things. The first is to introduce the HTML span tag, and the second is to show you how I use the HTML span tag. Let's roll together.
| What is the span tag?
The <span> tag is a simple HTML tag used to group small parts of text or a small area so you can apply styles or specific actions to them. Simply put, It's used when you like to highlight, give color or style a part of text. It's just a tool for styling or adding functionality, not having any specific meaning. It is commonly used with CSS or JavaScript.
TIP
While <div> is for grouping larger blocks of content, <span> is for smaller sections like a word or part of a sentence.
| How I use the span tag?
- I open Visual Studio Code, a free code editor.
- I create a file named span.html in the folder named TESTHTML that I've created earlier (Image1).
 |
| [Image1. Creating a new HTML file in the Visual Studio Code editor] |
- In the code editor, when I type ! and press the Tab key at the same time, the basic HTML structure is automatically generated. It looks like Image2 below. That is, it is really useful for quickly setting up the basic structure of an HTML document.
 |
| [Image2. Automatically generating the basic structure of an HTML document] -My sample sentences are like the below (Image3).
- This is some HTML tags to apply in the code editor (Image4). The choice of tags may vary depending on what kind of design you want to implement on the web. Information on which tags are needed can be easily found through Internet searches or AI.  -What I worked on in the code editor is as shown in Image5 below.  [Image5. Applying HTML tags in the code editor] -The following example is what I applied. To give red color to "the friend" in the text, I used <style> tag of CSS with <span> tag together.  [Image6. An example of using <span> tag] -If <span> tag is applied alone, as in Image7, no change occurs in the corresponding part of the webpage (Lt. image below). So it is commonly used with CSS or JavaScript (Rt. image below).  Congratulations! In this time, we have seen what the span tag is and how I used it. If you follow along step-by-step, it won't be that difficult, right? I support your passion as it develops little by little every day. Then in the next post, let's talk about the <strong> tag and the <em> tag. See you all radiant guys again soon. NEXT POST ➤ 9. What Tag is used to Emphasize in Text as Bold or Italic? <span>π½ <span>π½ <span>π½ Posted by Ayul |
