Let's Get Started With HTML!

HTML stands for "Hyper Text Markup Language".

A markup language is a computer language which uses marks, or symbols, to distinguish functional text from regular displayed text. Hyper text (or hypertext) refers to the use of hyperlinks on a web page to help the user navigate information.

Don't worry, HTML is easy!

HTML is probably the easiest to learn and quickest to implement out of the three languages that form the foundational backbone of web development (HTML, CSS, and JavaScript).

Tutorial - Pick a Topic

Start Here! - Tags
<tag></tag>

Comment

Document Type
<!DOCTYPE html>

HTML
<html></html>

Head
<head></head>

Body
<body></body>

Division
<div></div>

Layout
<main></main>

Headings
<h1></h1>

Paragraph
<p></p>

Break
<br>

Hyperlink
<a></a>

Font Styles
<b></b>

Ordered List
<ol></ol>

Unordered List
<ul></ul>

Free Code Camp

w3schools

MDN Web Docs

HTML Terminology

Hypertext - Hyper text (or hypertext) refers to the use of hyperlinks on a web page to help the user navigate information.

Markup Language - a computer language which uses marks, or symbols, to distinguish functional text from regular displayed text.

Tags - < > </ > - symbols used to identify how specific features of HTML are applied to specific parts of the language code.

Hyperlink -

Comment -

Document - an HTML "document" is the information that defines a web page.

Head - the head of an HTML document is a section of code (defined by head tags) that the browser uses for non-content information about the document.

Body - the body of an HTML document is a section of code (defined by body tags) that the browser uses for the displayed contents of the document.

Footer -

HTML Syntax

When an Internet page is displayed, the browser loads the information from the files into memory and displays the results. The information for the page is considered to be a document, and the information stored in memory is called the document object model (DOM), because the information is stored as a list of objects (a technical programming term used for a specific way of grouping data).

When writing a file for the browser to read, you have to put the letters and symbols in the correct order for the page to get the results you want. Syntax is like the language's grammer. The most common symbols used in HTML are the angle brackets < >. These are used to define what are called tags. There's an opening tag <> and a closing tag </>. The tags apply to whatever is placed between the opening and closing tag.

For example:

This text will not be bold. <bold>This text will be bold</bold>

It will end up looking like this:

This text will not be bold. This text will be bold

When reading HTML, the browser doesn't pay attention to how many lines are in between tags:

As long as there isn't a space character there, the above is the same as:

The browser also condenses all spaces between text to one space. So, even thousands of space characters would end up being read like this:

Tags can be placed inside of each other, but they can't overlap. For example, this is good practice:

This is not:

Explanation of indents goes here.

The Head Tags

When an html document is loaded, the browser needs information about the document. Since this information comes before the rest of the page, it goes into the <head></head> tags.

The Body Tags

Since the main part goes after the head of the document, it goes into the <body></body> tags.

A Simple Web Page

Congratulations! We now have all we need to create a web page!

<html>

  <head>

    <meta charset="UTF-8">

  </head>

  <body>

    <h1>HELLO WORLD!</h1>

  </body>

</html>

So, now, if we create a new document file on our computer, paste in this code, and save it as an HTML file, we can double click it and open it up in the browser.