My personal learnings about HTML5, Hi, my name is Prakash Sahw. I am a dedicated and professional WordPress developer with over 5 years of experience in delivering user-friendly and dynamic websites to clients across various industries. My expertise lies in creating responsive designs, optimizing website performance, and ensuring seamless functionality to meet client goals.
Recently, I embarked on a journey of upskilling by learning HTML5 with an aim to broaden my capabilities and provide more comprehensive web solutions. My goal is to constantly evolve as a developer and adopt new technologies to deliver innovative and efficient services.
For my personal learnings about HTML5, I use Visual Studio Code (VS Code) as my primary tool for writing and testing HTML, enjoying its versatility and efficiency in streamlining the development process.
1. Heading Tags
Heading tags in HTML (H1 to H6) are used to structure content on a webpage. They define headings, with H1 being the most important and H6 the least. Proper use of heading tags improves readability and boosts SEO (Search Engine Opitmization) by helping search engines understand the content hierarchy.
1. Heading 1 (h1) <h1></h1>
2. Heading 2 (h2) <h2></h2>
3. Heading 3 (h3) <h3></h3>
4. Heading 4 (h4) <h4></h4>
5. Heading 5 (h5) <h5></h5>
6. Heading 6 (h6) <h6></h6>
2. Paragraph Tag
Paragraph tags in HTML (<p></p>) are used to define blocks of text, making the content more readable & organized. They create a new line and add spacing around the text, helping to structure information clearly on a webpage.
3. Horizontal Rule Tag
The (<hr>) tag in HTML represents a horizontal rule used to visually separate sections of content on a webpage. It adds a horizontal line that enhances structure and readability. It doesn’t require closing tag becuase it is a self closing tag.
4. Abbreviation Tag
The (<abbr>) tag in HTML is used to define abbreviations or acronyms, providing a full description when hovered over. This improves accessibility and helps users understand unfamiliar terms.
How to write code: <abbr title="World Health Organization">WHO</abbr>
When users hover over “WHO,” the full form, “World Health Organization,” will appear.
5. Text Decoration Tags
Text decoration in HTML5 is achieved using tags and CSS properties to style the text content but, text decoration can still be used in HTML5, but the approach has evolved. For example: Tags like <u>, <b> & <i> are supported in HTML5 but are no longer recommended for styling purposes.
Instead, they should only be used when the emphasis or meaning of the text is semantic (e.g., <b> for keywords, <i> for terms in another language).
To understand the tags and their effects on text, here are some text decoration tags explained below:
1. Bold Text – <b></b> (Bold)
2. Underline Text – <u></u> (Underline)
3. Italic Text – <i></i> (Italic)
4. Struck Text – <s></s> (Struck)
5. Highlighted Text – <mark></mark> (Highlighted)
6. Subscript Text – <sub></sub> (H₂O)
7. Superscript Text – <sup></sup> (104)
8. Small Text – <small></small> (small)
9. Strong Text – <strong></strong> (Strong)
10. Emphasis Text – <em></em> (Emphasis)
11. Deleted Text – <del></del> (Allahabad)
6. Hyperlink Tags
The <a> tag in HTML is used to create a hyperlink that allows users to go from one page to another. It is often used to link to external websites, internal pages, email addresses, or files. The href attribute specifies the target the destination of the link.
For example: Click here to visit the Homepage
How to write code: <a href="https:prakashsahw.site">Homepage</a>
To open a link in a new window or tab, you can use the target="_blank" attribute in the <a> tag.
This tells the browser to open the linked URL in a new window or tab.
For example: Click here to visit the Homepage
How to write code: <a href="https:prakashsahw.site" target="_blank">Homepage</a>
7. List Tags
List tags in HTML are used to group and organize content into a list format. To showcase the list items we use <li></li> tag. There are three main types of lists:
7.1) Unodered List <ul>
Usage: Creates a bulleted list where the items are listed with bullet points (typically circular).
For example:
- Apple
- Banana
- Orange
How to write code for Unordered List:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>7.2) Odered List <ol>
Usage: Creates a numbered list where the items are automatically numbered. Like: 1,2,3,4.
For example:
- Apple
- Banana
- Orange
How to write code for Unordered List:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>7.3) Description List <dl>
Usage: Used to define a list of terms and their descriptions. It includes <dt> for the description term and <dd> for the description data.
For example:
- HTML
- A markup language for creating webpages.
- CSS
- A style sheet language used for describing the presentation of a document written in HTML.
How to write code for Unordered List:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating webpages.</dd>
<dt>CSS</dt>
<dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
</dl>8. Quotation Tags
Quotation tags in HTML are used to define text that is a quotation or reference from another source. There are two type of quotation tags in HTML, first one is <blockquote></blockquote>, it is a block level element to show blockquotes from a new line and second one is <q></q>, it is a inline level element to show quotes.
To show the reference for the quotation from the another source we use <cite></cite> tag.
For example:
“The only way to do great work is to love what you do.” – Steve Jobs, Stanford Commencement Address
How to write Blockquote with Cite Tag:
<blockquote>
"The only way to do great work is to love what you do."
<cite>- Steve Jobs, Stanford Commencement Address</cite>
</blockquote>For example:
He said, Success is not final, failure is not fatal.
– Winston Churchill
How to write Quote with Cite Tag:
<p>He said, <q>Success is not final, failure is not fatal.</q>
<cite>- Winston Churchill</cite></p>We can also give reference to a quote using the resource’s url using the cite tag in HTML5
For example:
“Innovation distinguishes between a leader and a follower.” Steve Jobs, Apple
How to write Cite Tag with resource’s URL:
<blockquote>
"Innovation distinguishes between a leader and a follower."
<cite><a href="https://www.apple.com/stevejobs/" target="_blank">Steve Jobs, Apple</a></cite>
</blockquote>In this example, the quote is attributed to Steve Jobs, and the <cite> tag links to the Apple website for more information, opening the link in a new tab using the target="_blank" attribute.
Author Thoughts
Writing about my personal learnings about HTML5, these are the 8 types of HTML5 tags has been a great learning experience for me. As I did deep research into each tag, I realized how powerful HTML5 is and how important these tags are for creating well-structured, meaningful web content. While I’ve explained a few basic tags in detail here, I’m excited to continue expanding my knowledge and sharing it with you.
In future updates, I plan to explain more HTML5 tags and their use cases, helping beginners and experienced developers improve their skills. Stay tuned for more in-depth posts as I continue exploring the endless possibilities HTML5 offers in web development!
Please, let me know how much you like my personal learnings about the HTML5 via email – sahwprakash@gmail.com
Want to build your own website?
Hire me as your website developer! With over 5 years of experience in WordPress development and a passion for crafting responsive, user-friendly websites, I can bring your ideas to life.
Let’s work together to create a website that not only looks great but also drives results. Contact me today to get started!
