This blog post covers essential HTML formatting tags such as strong, em, u, sup, sub, and del, demonstrating their usage in website design. It emphasises the importance of using the correct tags for semantic HTML and encourages readers to practice coding to reinforce their learning. Additionally, it provides resources for further exploration of HTML tags.
Welcome to the fifth part of our HTML5 and CSS3 beginners tutorial. In this session, we will explore some basic HTML formatting tags that are essential for structuring and styling your web content effectively.
Setting Up Your Environment
To begin, open your web browser and Notepad++. Ensure that both applications are aligned for easy access. We will continue from where we left off in the previous tutorial, so make sure your code is saved and ready to go. Drag and drop your HTML file into the web browser to view your work.
Basic Formatting Tags
Paragraph Tag
We will start with the paragraph tag, which is fundamental for creating text blocks. To create a new paragraph, use the <p> tag. For example:
<p>This is a new paragraph.</p>
Making Text Bold
To make text bold, you can use the <strong> tag. Here’s how you can implement it:
<p>This content will be <strong>bold</strong>.</p>
After saving and refreshing your browser, you will see that the text appears bold. Although there is an older <b> tag for bold text, it is deprecated in HTML5, so it is recommended to use the <strong> tag for semantic purposes.
Italicising Text
To italicise text, you can use the <em> tag. Here’s an example:
<p>This content will be <em>italic</em>.</p>
Underlining Text
If you want to underline text, use the <u> tag:
<p>This content will be <u>underlined</u>.</p>
Superscript and Subscript
For superscript text, which is often used in mathematical expressions or dates, use the <sup> tag:
<p>September 25<sup>th</sup></p>
For subscript text, typically used in chemical formulas, use the <sub> tag:
<p>H<sub>2</sub>O</p>
Strikethrough Text
To create a strikethrough effect, use the <del> tag. Here’s how:
<p>This text is <del>deleted</del>.</p>
Experimenting with Tags
It’s important to understand that coding can sometimes lead to errors. If you encounter issues, check your tags for correctness. There are many formatting tags available in HTML, and it’s beneficial to familiarise yourself with them.
Exploring More Tags
For further exploration, I recommend visiting W3Schools. You can search for HTML formatting tags and find a comprehensive list of tags such as <mark>, <ins>, and others. Experimenting with these tags will enhance your understanding of HTML.
Practice Makes Perfect
At this point, I encourage you to create a new blank document and try writing out the code from memory. If you struggle, refer back to this tutorial for guidance. Repetition is key to mastering HTML, so practice writing the tags until they become second nature.
Conclusion
In this tutorial, we covered essential HTML formatting tags that will help you structure your web content effectively. In the next tutorial, we will delve into building lists, including bullet and numbered lists. I look forward to seeing you in the next session of our web development tutorial series!
