HTML is a language used on webpages, its pretty much just tags. To start a tag use <html>, to end it </html>

There are a tonne of different tags, here's a reference list: https://www.w3schools.com/TAGs/default.asp

Not all of these are used often, there are quite a few I've never had to use after 2 years of web development.

Think of these tags as boxes, <html></html> is just a very big box, <header></header> is a smaller box inside of the HTML-box.

ALWAYS close a tag in the same parent tag as you opened them, ex. <html><header></header></html> is the proper way, DONT DO <html><header></html></header>. Although most browsers are lenient in this, please, just don't. It causes confusion and bugs in browsers which aren't as lenient.

To start using HTML:
Open notepad or whatever code editor you prefer (I recommend Atom or Notepad++) and create a new file, add the following

<!doctype html> <-- This line tells the browser "Hey! HTML5 here!"
<html> <-- Opens the HTML box
<body> <-- Stuff inside the body-tags is whats supposed to be seen on the page
    Hello world!
</body> <-- Closes the body text
</html> <-- Closes the HTML tag

Save this as page.html (the .html extension is what makes it behave as a webpage) and open it in your browser (doubleclicking the in file explorer should open the file in your default browser)

Since HTML is (pretty much) useless without CSS, here's a very simple crash course for CSS. CSS is the way you paint your boxes made with HTML. Lets say I use <div></div> in HTML, you would select it in CSS with:

div {
    /* CSS STYLES GO HERE */
}

If I were to make the div red I would do:

div {
    background: red;
}

To use CSS in your webpage in the most basic way:
<!doctype html>
<html>
<head> <-- The head tag is used for info the browser needs to render the page properly
    <style> <-- Your CSS goes in this tag
        div {
            background: red;
        }
    </style>
</head>
<body>
    Hello world!
</body>
</html>

Now, before you can see the element(a box is usually refered to as an element) on the screen you have to either put some text in it or set the width and height with CSS.

Text:
<div>
    Hello
</div>

width + height in CSS:
div {
    background: red;
    height: 50px;
    width: 50px;
}

If you, lets say have 2 div elements which you want to have different backgrounds you'd use classes or ID's. The difference between the two is that you can reuse classes, ID's are a 1 time use (again, browsers would probably work if you used an ID for two different elements, but you shouldnt reuse them)

HTML:
<div>
    Element one!
</div>

<div>
    Element two!
</div>

Now, to select the elements individually, add an ID in the opening tag:

<div id="first">
    Element one!
</div>

<div id="second">
    Element two!
</div>

Yay! They can now be selected in CSS based on their ID!

#first {
    background: blue;
}

#second {
    background: red;
}

The # indicates you want an element with the id to be selected


Now they both need a width and height so we can see them on the page, give both elements a class:

<div id="first" class="box">
    Element one!
</div>

<div id="second" class="box">
    Element two!
</div>

Then add CSS for it

.box {
    width: 50px;
    height: 50px;
}

Now both elements are displayed on the page with different backgrounds! Hooray!