What is HTML

HTML consists of a series of elements and attributes that mark up the content of your web page to give it meaning.

Lets explore and use some HTML.

Elements

Elements are defined within tags using angle brackets:

< >

For instance the heading of this page uses the <h1> tag.

The content of an element goes between 2 tags, an opening and closing tag:
<h1>A title element</h1>

Nesting

Elements can be nested: you can put one element within another.

Make sure each element opens and closes its tags in the right order, i.e. close the inner elements tag, before the outer elements tag.

(its worth noting that browsers are incredibly forgiving with html, even if you get things wrong it will still show something - however it might not look quite like you expected it to)

Attributes

Some elements have attributes. These are needed for things like images, or links. For instance an image element <img> needs to point to the source of the image and uses the src attribute to do that, it also can have an alt tag which is really important for accessibility.

Semantics

Semantic HTML, means HTML elements that have a role, or relationship to some meaning. Some elements have a natural meaning, such as <header>, some don't, such as <div>.

Using semantic HTML helps the page become accessible for people who use assistive technologies, it also helps search engines.

Lets look at a couple of examples...

Non Semantic html

<div> and <span> tags are very useful for laying out content, but don't say much about that content.

Semantic HTML

Semantic HTML, gives the page in inherent structure, helps with accessibility and is also easier to read.

You'll notice that the browser automatically styles the content, though you almost always want to use your own styles by introducing CSS later on.

A simple web page

<!DOCTYPE html>

Every web page should start with the above declaration, this isn't even an HTML element, but it lets the browser know that this is a modern web page.

The root element of every web page is the <html> element with its closing tag, every other element will be nested inside this.

head and body

The <head> is not visible on the web page, but various important things go here, notably the <title> of the web page for the top of your browser window and links to your CSS and JavaScript files.

The <body> is where all of the visible content of the web page goes, other elements will be nested inside here.

Make your first web page on Glitch.com

Open the link below to create a Glitch web page:
Glitch Simple Starter Page