Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Important Sections

The following is a prioritized list of HTML elements to learn. They are grouped into rough categories based on how they are used with the most necessary or frequently used categories listed first. Within each category is an ordered list containing elements you should know

Root Elements

These elements are necessary and there should be one, and only one, of each of these in your file. All other elements should be nested within them, so we call them top-level or root elements.

1. html

2. head

3. body

Document Metadata

These elements contain information about your file. The information isn't rendered as part of your web page, but it's used in many places. For example, the page title is shown in the browser tab or in the bookmark bar. Metadata is used by other programs, like search engines or social media sites.

1. title

2. meta

3. link

Other: style, base

Content Sectioning

These elements allow you to organize your content. If an entire newspaper was one long paragraph, it wouldn't be readable. Separating related elements into sections helps your user find what they're looking for.

1. h1 - h6

2. nav

3. main

4. article

5. header

6. footer

7. aside

8. section

Other: address, hgroup

Block Text Content

These elements break sections into even smaller blocks describing the purpose of that text content.

1. p

2. ol and ul

3. li

4. hr

5. div

Other: blockquote, figure, figcaption, dl, dt, dd, pre

Inline Text Content

These elements describe the purpose of a word or phrase within a larger block of text.

1. a

2. strong and em

3. time

4. code

5. br

6. span

Other: abbr, sub, sup, q, cite, data, mark, s, small, var

Note: there are more in this category, but you probably shouldn't be using them.

Media Content

These elements handle content that isn't text.

1. img

2. audio

3. video

Other: track, area, map

Form Content

These elements are for the user to submit data to a web application to save or process.

1. form

2. label

3. input

4. button

5. select and option

6. textarea

Other: fieldset, legend, datalist, meter, optgroup, output, progress

Table Content

These elements are for displaying tabular data. If the content would fit in a spreadsheet, it should go in a table.

1. table

2. tr

3. td and th

4. thead, tbody, tfoot

Other: colgroup, col

Scripting

These elements support JavaScript to create dynamic web pages, from simple animations to complex web applications.

1. script

Other: canvas, noscript

Embedded Content

These elements are for embedding more complicated content than the media elements. For example, an iframe allows you to place another web page inside your web page while a picture element allows you to define alternative images for an img element to be used with different displays.

1. iframe

2. picture

3. source

Other: object, param, embed

Other Sections

There are two other sections (Demarcated Edits and Web Components) that you don't need to know right now, but the last section for Obsolete and Deprecated Elements is very important to look over. You will undoubtedly run into these elements in articles or tutorials that were written years ago. Do your best to avoid them. Even though browsers might be able to handle them, they are getting phased out and shouldn't be added to new projects. If you see them in an old project, figure out how to update them to modern elements.