HTML Tags
HTML Tags are the building blocks of a webpage. Tags are used to add content into HTML, like text, headings, table, list links etc. Tags along with attributes are core components of HTML. The latest version of HTML, i.e HTML5 includes 145 tags. View HTML Tags List.
HTML tags are used to build webpage structure, like p, h1, h2, h3, address, b, i, etc. Tags can have attributes to add extra information.
HTML Element
An HTML Tag with opening tag, closing tag, attributes and content is called HTML Element. Element include start tag, end tag, attributes and content inside.
Basically all HTML Elements are build using html tags.
HTML Tag <html>
HTML or HTML Tag is the parent tag of all HTML Elements. Its is also called root tag. HTML Tag is defined just after doctype declaration. To know more about html doctype, click html doctype.
HTML Tag has two children, head tag and body tag. Since HTML3, It is compulsory to define doctype and then HTML tag.
lang attribute is used inside html tag to define language. An option dir="ltr" is also used to add direction which is by default left to right.
For Urdu and Arabic, use dir="rtl" in html tag.
<!doctype html>
<html lang="en">
<head>
<title> Title of the webpage </title>
<meta charset="utf-8" >
</head>
<body>
</body>
</html> HEAD Tag
HTML Head tag is the first child of HTML. Head includes all the information related to webpage SEO, CSS links, scripts and meta tags.
Head is not visible to user. It is mainly for search engines and browsers.
Tags in head
- Title Tag
- Meta Tag
- Link Tag
- Script Tag
- Style Tag
- Base Tag
HTML head tags
<!doctype html>
<html lang="en">
<head>
<title> Title of the webpage </title>
<meta charset="utf-8" >
<base href="https://tutorial.techaltum.com/htmlTags.html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="Keywords">
<meta name="description" content="Search Description">
<link href="css/style.css" rel="stylesheet">
<style></style>
<script></script>
</head>
<body>
Body Content
</body>
</html>
BODY Tag <body>
HTML Body Tag is used to define the body of our HTML Document, basically the content visible to user.
The Body Tag contain all visible contents of a web page like paragraph, headings, tables, lists, images, videos visible to user.
By default, body is 100% wide, having white background and took a margin of 8px.
<body>
Body tag for content visible to user
</body>
TITLE TAG
HTML Title Tag is the compulsory child of HEAD. Title is compulsory and should be unique on all webpages. Title enhance search engine visibility of a webpage on various search engines. Maximum limits of characters inside title tag is 70 for maximum search engines.
Always use the first targeted keyword in title for best seo results.
<title> Title of the webpage </title>
META CHARSET
Meta charset was introduced in HTML5. Earlier meta tag with content and http-equiv was used to declare charset.
Meta charset is used to declare webpage character encoding. The recommended charset for maximum websites is UTF-8. The default charset for windows OS is windows-1252.
windows-1252
windows-1252 was build bu Windows Operating System for western languages like engish, spanish only. Use ASCII characters from 32 to 255 range. Not recommend for modern websites and apps.
UTF-8
(Unicode Transformation Format - 8-bit) supports 1 lakhs plus characters including ASCII and emoji. Recommended for modern website and applications.
UTF-8 vs Windows-1252
| Feature | Windows-1252 | UTF-8 |
|---|---|---|
| Max characters | 256 | Over 1.5 million |
| Fixed length? | Yes (1 byte) | No (1-4 bytes) |
| Language support | Western European | All languages |
| Legacy or modern? | Legacy | Modern standard |
HTML5 Meta Charset
<meta charset="utf-8">
HTML4 Meta Charset
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
XHTML Meta Charset
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
It is compulsory to declare meta charset on all webpages.
UTF-8 encoding is used by 98.7% websites worldwide including google, facebook, youtube, techaltum and tutorial.techaltum.com.
Best Practices for Using HTML Tags
To create accessible, maintainable, and SEO-friendly web pages, follow these best practices when using HTML tags:
- Use semantic HTML: Choose tags that describe the content's purpose, like <article>, <section>, <nav>, instead of generic <div> elements.
- Always close paired tags: Ensure all opening tags have corresponding closing tags to avoid rendering issues.
- Use lowercase for tag names: HTML5 is case-insensitive, but lowercase is the convention.
- Include alt attributes for images: This improves accessibility and SEO.
- Validate your HTML: Use tools like the W3C validator to check for errors.
- Keep it simple: Don't overuse tags; use CSS for styling instead of presentational tags.
Frequently Asked Questions (FAQ)
What are HTML tags?
HTML tags are the fundamental building blocks of web pages. They define the structure and content of a webpage, allowing browsers to display text, images, links, and other elements properly.
How many HTML tags are there?
HTML5 includes 145 tags in total. This includes both HTML4 tags that are still supported and new tags introduced in HTML5.
What is the difference between paired and void tags?
Paired tags have both opening and closing tags (e.g., <p>...</p>), while void tags are self-closing and don't have a closing tag (e.g., <img>, <br>).
Why is UTF-8 recommended for HTML documents?
UTF-8 supports a vast range of characters from multiple languages, including emojis and special symbols. It's the modern standard and ensures your webpage displays correctly worldwide.
How do I choose the right HTML tag for my content?
Use semantic HTML tags that best describe your content's meaning. For example, use <article> for independent content, <section> for thematic grouping, and <header>/<footer> for page structure.