Lesson 1: Explore HTML
HTML is the language of the web. Every website uses HTML on their website. If they didn’t it browsers wouldn’t know what to do. HTML is telling the browser this is how I want you to display this webpage.
Structure of HTML
Every webpage has this basic structure:
<!DOCTYPE html> <html lang="en"> <head> <title>Hello!<\title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <\head> <body> <!-- Here is where our webpage content goes --> <p>Hello here's where the content of our website goes<\p> <\body> <\html>
Looks pretty foreign huh? Well let’s break it down.
HTML uses tags to make up a webpage. An HTML tag looks like this:
<tag-name>content goes here<\tag-name>
Tags usually come in pairs. The first tag is called the opening tag and the end tag is called the closing tag.
The opening tag:
The closing tag is written with a forward slash like this:
Essential HTML tags
<html><\html> This is the root element of an HTML Page. You can also refer to this as the parent element of an HTML document
<head><\head> This contains information about the webpage. Such as the title
<title><\title> This is exactly what it says. Tells the browser that title to display on the browser tab.
<style><\style> This defines the styles you want to use for the site. The style definitions are written in CSS which we will cover shortly.
<body><\body> This contains all the content visible on the page
<p><\p> defines a paragraph
<div><\div> this is tag is primarily used to breakup your HTML document so you can easily layout the page
<meta> This tag is called a self closing tag which we will cover shortly. This tag tells the browser more information about your webpage
<img\> this is an image tag used to display images on your webpage. It too is a self closing tag. Meaning there’s no matching closing tag.
To improve readability, HTML tags are indented to show the parent – child element relationship. Let’s take a look here:
<html> <head> <\head> <body> <\body> <\html>
Above demonstrates that the
<html> tag is the parent element and doesn’t need to be indented. Every tag in the
<html> tag is a child and needs to be indented such as the
<body> tags. To indent you press tab before each opening tag.
HTML attributes provide additional information about an HTML element. The most common HTML attributes you will see are ids and classes.
Attributes usually come in name\value pairs like: me=”value”
HTML attributes look like this:
<p id="my paragraph">Hello this is a paragraph<\p>
Above illustrates how we would use an id attribute on the paragraph tag. The thing to remember is that attributes follow this format: