#HTML Semantic Elements

[html-tute]

HTML Semantic Elements

HTML Semantic Elements are those elements that not only define the structure of a webpage but also provide meaning to the content they encapsulate. These elements help both browsers and search engines understand the content better, improving accessibility and SEO.

Common HTML Semantic Elements:

<header>:

Represents the introductory content or a set of navigational links.

Usually contains the logo, site title, and main navigation.

<header> <h1>My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>

<nav>:

Represents a section of the webpage intended for navigation links.

Typically contains a list of links.

<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>

<main>:

Represents the main content of the document.

Only one <main> element should be used per page.

<main> <h2>Main Content</h2> <p>This is the main content of the page.</p> </main>

<section>:

Defines sections in a document, such as chapters, headers, footers, or any thematic grouping of content.

Typically used to divide the webpage into sections that make sense contextually.

<section> <h2>About Us</h2> <p>Information about our company.</p> </section>

<article>:

Represents a self-contained piece of content that can be independently distributed or reused.

Used for blog posts, news articles, etc.

<article> <h2>Blog Post Title</h2> <p>Content of the blog post.</p> </article>

<aside>:

Represents content that is tangentially related to the content around it.

Often used for sidebars, pull quotes, or related links.

<aside> <h3>Related Posts</h3> <ul> <li><a href="#post1">Post 1</a></li> <li><a href="#post2">Post 2</a></li> </ul> </aside>

<footer>:

Represents the footer of a document or section.

Typically contains copyright information, links to privacy policies, or contact information.

<footer> <p>&copy; 2024 My Website. All rights reserved.</p> </footer>

<figure> and <figcaption>:

<figure> is used to encapsulate media such as images, illustrations, or diagrams.

<figcaption> provides a caption for the <figure>.

<figure> <img src="image.jpg" alt="An example image"> <figcaption>This is a caption for the image.</figcaption> </figure>

<time>:

Represents a specific time or date.

Often used in articles, events, or any content where time is relevant.

<time datetime="2024-08-07">August 7, 2024</time>

Why Use Semantic Elements?

Accessibility: Assistive technologies, like screen readers, can better understand and navigate your content.

SEO: Search engines can index your content more effectively, improving your site’s search rankings.

Maintainability: Semantic elements make your HTML more readable and organized, making it easier for developers to understand.

Using these elements in your blog will help make your content more structured, accessible, and search engine-friendly.

Read More ➡️

[study-diaries]

Day 7 [Semantics In HTML]

Introduction To HTML

Day 2 [Multimedia Elements In HTML]

Day 3 [Table in HTML]

Day 4 [Link Tag In HTML]

Day 5 [Lists In HTML]

Day 6 [Forms In HTML]

Code:

Line By Line Explanation:

Semantic Tags in HTML give clear meaning to the code. These are tags like:

<header>: Used for the title of the page.

<nav>: Contains navigation links of the website.

<main>: The main part of the page.

<section>: A group of content that is similar.

<article>: A group of content that is an independent piece.

<aside>: Extra info, like side notes.

<footer>: The bottom of the page that contains the copy rights and additional info.

Navigation Tag:

The navigation tag must be within an unordered list tag. And each item of that list must contain the link tag that should have the URL of that specific page.

Comments In HTML:

It is a note in your code that the browser ignores.

It’s just for you to read.

You can use it to explain your code or temporarily hide some code.

Syntax Of A Comment:

<!-- This Is A Comment -- >

Output Of The Code:

Notes: The arrows and the words in red are something I included. It is not included in the code!

______________

Hope This Helps :)

[nixcraft]

Do you need to build a static website for fun or profit?

Try the Simple.css Framework. It is a CSS framework that makes semantic HTML look good.

A good-looking sans-serif local font stack.

Typographic best practices.

Automagic flipping to dark mode.

Fully responsive.

Sensible defaults that format standard + HTML elements.

Super lightweight (10k css).

Give it a try @ https://simplecss.org/ (my home page https://vivekgite.com for live demo).

[cssscriptcom]

1kb CSS Reset for Clean HTML Styling - mi.css

mi.css is a tiny CSS file (~ 1kb) that acts as either a CSS reset or a “CSSless” framework. It applies basic, clean styling directly to semantic HTML elements. You don’t need to add any classes. Unlike other frameworks that require you to learn specific class naming conventions or component structures, mi.css simply enhances the native appearance of standard HTML elements. Main…

[woolieshubris]

hii alice! i'm very slowly trying to teach myself html/css by making a neocities, (what i have so far can be seen here, it's not much i know) and i was just wondering if you had any useful tips/resources? :0 your neocities is very cool (i was reminded by that other person that asked about it yesterday) so i thought i would ask <3 i'm already using mozilla webdocs and w3schools, but do you have any other recommendations?

i don't really know a lot about html/css yet, (i don't have a ton of coding experience, most of what i've done has been in python) and so i don't really know how html/css should be "structured", if that makes sense.

any help or pointers are appreciated! ty in advance <3 peace

Your neocities looks great! Especially for a beginner!

Things to look into:

For learning, I'd recommend learning more about semantic design- w3schools

Also, do some studying up on the box model! this website I found seems to have a lot of good information- box model

I'd also look into CSS classes- w3schools

Also, the fastest way for you to learn coding is to... look at other people's code! Go onto neocities, scroll till you see a page you like, and then inspect element the shit out of it >:3c Even if it doesn't make sense at first to you, looking at a lot of code can help you learn new ways of doing things!

blogs u should take a look at: Drakul78, moonview, twelvemen, and nyaa!

OK so for code analysis:

Overall: I like your website a lot! It's simple, it's cute, and it's functional. These are tips for when you want to "upgrade" your site, but as is, it works great :3c

I like to avoid putting traits other than background onto "body", since it severely limits what you can do with your website. (If you wanted to have multiple boxes on screen, for example, you can't do that...)

Also, the contrast between the background and the text is a little too low for my liking, but your text is nice and large so it's not too much of an issue. If you are going to make your text smaller though, you'll need to change those colors.

You already are using semantic design elements in your website, which is really good! Also, using style.css instead of putting it into the page itself is also really good practice.

Ideas for the future:

This is very subjective, but I feel like you are using your website like someone might use a caard. It's pretty, but each page is static, and links to another static page! You can merge a lot of this information into your index- such as credits/links :3c

FONTS! FONTS! FONTS! there are so many beautiful fonts in this world, and with google fonts, you can easily apply them all to your website!! ( •̀ ω •́ )✧ google fonts

also, since you mentioned you were a coder- I'd recommend setting up a way for you to use vscode to edit your page! One of my friends wrote some git code for me that makes it so I can edit my page without making a billion changes to it in quick succession. I'll ask them if I can share it with you if that would interest you, and I could make a separate post on my visual studio code layout if you are curious :3c

[diana-fortyseven]

The Hitman Prompt Generators need a major HTML overhaul, because three-years-ago me did absolutely not use semantic HTML, and it's quite frankly an accessibility nightmare.

Last night, I rectified whatever the hell I thought I was doing with the checkboxes. They're now set up to meet current accessibility standards.

Today, I'm ripping out all the old text elements and replace them with elements that carry semantic meaning. Fun! :D

[hob28]

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Welcome to My Web Page</h1>

    <p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

    color: blue;

    font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Styled Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1 class="main-heading">Hello, World!</h1>

    <p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

    color: green;

    text-align: center;

}

#intro {

    font-size: 18px;

    color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

    display: flex;

    justify-content: space-around;

}

.item {

    width: 100px;

    height: 100px;

    background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

[quipoin]

HTML Tutorial: A Quick Overview

HTML (HyperText Markup Language) forms the backbone of web development, enabling the structure and presentation of content on the web. It’s a markup language that defines elements like headings, paragraphs, links, images, lists, and more, providing a standardized way to format and display information in browsers.

HTML uses tags, enclosed in angle brackets, to represent different types of content. Each tag typically comes in pairs, an opening tag and a closing tag, to wrap and describe the content in between. HTML is fundamental for building web pages, allowing developers to create structured documents with defined sections and multimedia elements.

One of HTML’s key features is its ability to create links, connecting different parts of the web. This hyperlinking capability is what makes HTML unique, forming the web as we know it today. Additionally, HTML supports embedding multimedia like images, videos, and audio, which brings pages to life.

As web standards evolve, HTML has grown, too, with the latest version being HTML5. This version introduced new elements that provide semantic meaning to the structure of web documents, ensuring that content is more accessible and well-organized.

fro more:https://quipoin.com/tutorial/HTML-tutorial

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[graphicdesign01bbsmit]

Mastering Web Development: A Comprehensive Guide for Beginners

In the vast landscape of technology, web development stands as a crucial cornerstone. It encompasses the art and science of building websites, ranging from simple static pages to complex web applications. Whether you're aiming to pursue a career in software development or seeking to enhance your digital presence, understanding web development is essential.

In this comprehensive guide, we'll take you through the fundamental concepts and practical skills needed to master web development from scratch. Let's dive in!

1. Understanding HTML (Hypertext Markup Language)

HTML serves as the backbone of every web page, providing the structure and content. It uses tags to define different elements such as headings, paragraphs, images, and links. By mastering HTML, you'll be able to create well-structured and semantically meaningful web documents.

2. Exploring CSS (Cascading Style Sheets)

CSS is the language used to style HTML elements, enhancing their appearance and layout. With CSS, you can customize colors, fonts, spacing, and more, giving your website a polished and professional look. Understanding CSS selectors and properties is essential for effective styling.

3. Introduction to JavaScript

JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages. From simple animations to complex web applications, JavaScript powers a wide range of functionalities. Learning JavaScript fundamentals such as variables, functions, and events is crucial for web development.

4. Building Responsive Websites

In today's mobile-centric world, it's essential to create websites that adapt seamlessly to various screen sizes and devices. Responsive web design achieves this by using fluid grids, flexible images, and media queries. Mastering responsive design principles ensures that your websites look great on desktops, tablets, and smartphones.

5. Introduction to Version Control with Git

Git is a powerful tool for tracking changes in your codebase and collaborating with other developers. By learning Git basics such as branching, merging, and committing, you can streamline your development workflow and effectively manage project versions.

6. Introduction to Front-End Frameworks

Front-end frameworks like Bootstrap, Foundation, and Materialise provide pre-designed components and stylesheets to expedite web development. By leveraging these frameworks, you can create responsive and visually appealing websites with less effort and code.

7. Introduction to Back-End Development

While front-end development focuses on the user interface, back-end development deals with server-side logic and database management. Learning back-end languages such as Node.js, Python, or PHP enables you to build dynamic web applications and handle user interactions efficiently.

8. Deploying Your Website

Once you've developed your website, it's time to make it accessible to the world. Deploying a website involves selecting a web hosting provider, uploading your files, and configuring domain settings. Understanding the deployment process ensures that your website goes live smoothly.

9. Conclusion and Next Steps

Congratulations on completing this comprehensive guide to mastering web development! By now, you've gained a solid understanding of HTML, CSS, JavaScript, version control, frameworks, and deployment. As you continue your journey in web development, remember to stay curious, practice regularly, and explore advanced topics to further refine your skills.

Resources for Further Learning:

Online tutorials and documentation

Interactive coding platforms

Community forums and discussion groups

Next Steps:

Explore advanced topics such as web performance optimization, server-side rendering, and progressive web apps.

Build real-world projects to apply your skills and showcase your portfolio.

Stay updated with the latest trends and technologies in web development through blogs, podcasts, and conferences.

With dedication and perseverance, you'll continue to evolve as a proficient web developer, creating innovative solutions and contributing to the ever-changing digital landscape . Happy coding!

[ctechstudy]

Understanding HTML: The Building Blocks of the Web

In the vast landscape of the internet, HTML stands as the foundation upon which the digital world is built. From simple static web pages to dynamic interactive experiences, HTML (Hypertext Markup Language) plays a pivotal role in shaping the online landscape. Let's embark on a journey to demystify HTML and understand its significance in the realm of web development.

What is HTML?

HTML is a markup language used to create the structure and content of web pages. It consists of a series of elements, or tags, that define the various components of a web page, such as headings, paragraphs, images, links, and more. These elements are enclosed within angled brackets (< >) and typically come in pairs, with an opening tag and a closing tag, sandwiching the content they define.

The Anatomy of HTML:

Tags: Tags are the building blocks of HTML and serve as the basic units of structure. They encapsulate content and provide semantic meaning to different parts of a web page. Common tags include <html>, <head>, <title>, <body>, <h1> (heading), <p> (paragraph), <img> (image), <a> (anchor/link), and many more.

Attributes: Tags can also contain attributes, which provide additional information about the element. Attributes are specified within the opening tag and consist of a name and a value. For example, the <img> tag may include attributes such as src (source) to specify the image file and alt (alternative text) for accessibility purposes.

Nesting: HTML elements can be nested within one another to create hierarchical structures. This nesting allows for the organization and hierarchy of content, such as placing lists within paragraphs or dividers within sections.

Document Structure: Every HTML document begins with a <!DOCTYPE> declaration, followed by an <html> element containing <head> and <body> sections. The <head> section typically contains metadata and links to external resources, while the <body> section contains the visible content of the web page.

The Role of HTML in Web Development:

HTML serves as the backbone of web development, providing the structure and semantics necessary for browsers to interpret and render web pages correctly. Combined with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, HTML forms the core technology stack of the World Wide Web.

Conclusion:

In essence, HTML is the language of the web, enabling the creation of rich and immersive digital experiences. Whether you're a seasoned web developer or a newcomer to the world of coding, understanding HTML is essential for navigating the intricacies of web development. Embrace the power of HTML, and embark on a journey to craft compelling narratives and experiences in the ever-evolving digital realm.

[arshikasingh]

Basic HTML Interview Questions

Following are the basic interview questions that you must know:

What is HTML?

What are Tags?

Do all HTML tags have an end tag?

What is formatting in HTML?

How many types of heading does an HTML contain?

How to create a hyperlink in HTML?

Which HTML tag is used to display the data in the tabular form?

What are some common lists that are used when designing a page?

What is the difference between HTML elements and tags?

What is semantic HTML?

[alsohutech]

What is the difference between HTML and HTML5? 

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML5 is the fifth and latest version of HTML. Here are some key differences:

New Features: HTML5 introduced several new features and elements that were not available in previous versions, such as <video>, <audio>, <canvas>, <header>, <footer>, <nav>, and <article>. These elements enhance multimedia support and provide better semantic structure for web documents.

Improved Semantics: HTML5 provides better semantic markup, allowing developers to create more structured and meaningful web pages. Semantic elements like <section>, <article>, <header>, <footer>, and <nav> help in defining the structure and purpose of different parts of a web page.

Compatibility: HTML5 is designed to be backward compatible with older browsers, ensuring that web pages created with HTML5 can still be viewed and function properly on browsers that do not support HTML5 features. However, some advanced features may not be fully supported in older browsers.

Multimedia Support: HTML5 provides native support for embedding audio and video content directly into web pages using the <audio> and <video> elements, eliminating the need for third-party plugins like Adobe Flash.

Improved Forms: HTML5 introduces new input types, attributes, and validation features for forms, making it easier to create user-friendly and accessible forms without relying on JavaScript or additional libraries.

Offline Support: HTML5 includes features like the Application Cache and Web Storage, which allow web applications to work offline and store data locally on the user's device, providing a more seamless and responsive user experience.

Overall, HTML5 represents a significant advancement over previous versions of HTML, offering developers more powerful tools and capabilities for creating modern and interactive web experiences.

Read more .....

[cssscriptcom]

Convert HTML To LLM-Friendly Semantic Markdown Using JavaScript

DOM to Semantic Markdown is a JavaScript library that transforms HTML strings or elements into a semantic markdown format optimized for large language models (LLMs). It works in both browser and Node.js environments. DOM to Semantic Markdown tackles key challenges in web content extraction for LLMs. Unlike basic HTML-to-text conversions, it preserves semantic structure. The library produces a…

[hindintech]

You can learn HTML easily, Here's all you need to get started:

1. Document Structure

• <!DOCTYPE>

• <html>

• <head>

• <title>

• <meta>

• <link>

• <script>

• <noscript>

• <base>

2. Text Content

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

• <p>

• <span>

• <strong>

• <em>

• <br>

• <hr>

• <!-- Comment text here -- >

3. Lists

• <ul>

• <ol>

• <li>

• <dl>

• <dt>

• <dd>

4. Links and Navigation

• <a>

• <nav>

• <link>

5. Embedded Content

• <img>

• <audio>

• <video>

• <iframe>

• <canvas>

• <svg>

• <map>

• <area>

6. Forms

• <form>

• <input>

• <textarea>

• <button>

• <select>

• <option>

• <label>

• <fieldset>

• <legend>

• <datalist>

• <output>

7. Tables

• <table>

• <tr>

• <th>

• <td>

• <caption>

8. Semantic Elements

• <article>

• <section>

• <header>

• <footer>

• <aside>

• <main>

• <figure>

• <figcaption>

• <mark>

• <progress>

• <time>

• <details>

• <summary>

9. Deprecated Elements (Avoid Using)

• <center>

• <font>

• <strike>