# data[].attributes.body
A HTML document can be split into the head and body.

The <head> defines something called metadata - which is data (information) about the website itself. It can be about what the website is called, what the website is about, keywords, and other files that are connected to the website too! It is what the computer reads to understand what the website is.

The <body> defines what you actually see and interact with. If you go on any website, you are looking at what is written inside the <body>.

# data[].attributes.body
HTML uses a tag called <img> to embed image elements. <img> is an example of the empty elements we mentioned earlier!

In order for <img> to work, the attribute src (source); is neccessary. This calls on the source image!
all attributes follow the pattern of:

name="attribute value"

and is written inside the opening tag.
So writting a source attribute would look like:

src="image.png"

As we are using JSbin to write our code, we cannot call on local images, so "image.png" would not do- but we have an alternative!
If you find an image on the internet and right-click it, you get the option to "Copy image address". By pasting this value into the speech marks, you can use that image on your website!

There are also other attributes for images.

width="100"

Width defines the width of the image in pixels.

height="150"

Height defines the height of the image in pixels.

alt="An image of an apple"

Alt or Alternate text allows for screenreaders to read out what the image is- as well as allows for people to know what the image is supposed to be in the event that the original imahe you linked has been taken down. It is good practice to use an alt attribute.

# data[].attributes.attachment_link.description
Join a game of kahoot here. Kahoot! is a free game-based learning platform that makes it fun to learn - any subject, in any language, on any device, for all ages!

# data[].attributes.body
Links (hyperlinks) are the basis of the world wide web! You have to use hyperlinks to access other pages of your own website, as well as other websites too!
The tag we use for adding a link is:

<a>This is a link... but it doesnt go anywhere!</a>

This creates an anchor element!
But it cant do anything without a hyperlink reference. This is where our attribute- href - comes in.

href="https://url.com"

by placing the attribute in the opening tag, you have turned the text inside the tags into a functional hyperlink.

# data[].attributes.body
1. How many <h_> tags are there?
2. <!DOCTYPE html> is not a tag; what is it?
3. <!DOCTYPE html> as well as all tags are case sensitive. True or False?
4. What does the tag <mark> do to text?

Tell a sensei your answers before moving on.

# data[].attributes.body
<h1> This is the biggest heading </h1>

The first heading element! This is the biggest, most important text on the page. You can use h1, h2, h3, h4, h5 and h6, which all get smaller.

<p> Hello World </p>

The paragraph element! This defines a paragraph on the page. It is for text only.

<sup> This is superscript </sup>

The superscript element makes text smaller, and a bit above everything else!

<sub> This is subscript </sub>

The subscript element makes text smaller, and a bit Below everything else!

<em> This text is emphasized </em>

The emphasis tags make the text within them usually in italics (though different browsers have different ways to display it! Some also make it bold.)

<strong> This text is strong </strong>

The strong tags make the text within them usually in italics (though different browsers have different ways to display it! Some also make it italic.)

<del> This text has been deleted </del>

The deleted element is for showing information that has later changed. It is usually represented by browsers with a strikethrough.

<ins> This text has been inserted </ins>

The inserted element is for showing information that has replaced something else. Browsers usually underline it.

<mark> This text is marked! </mark>

The marked element highlights whatever is inside of it!

# data[].attributes.body
Elements can be categorized into parent, child and sibling elements. They can even be multiple at once!

A parent is any element whose tags wraps around another element.
A child is any element that is inside of another element.
A sibling is any element that is next to another element.

In the image above, body is a parent element, h1 and p are child elements. h1 and p are also sibling elements to each other.

# data[].attributes.body
It is good practice to use <html></html> as a container for all elements. It is not mandatory, but we use the tag usually for two reasons; the first of which is accessibility;

<html lang="en">

tells the computer that the language of our website is english, so that if anyone is using a screenreader (or something else that reads the contents of a website automatically) it knows how to do it correctly!
The second reason is that it creates a 'root' element- which is one single element that everything else is inside of. It makes the computer have an easier time navigating the elements.

The <html> tag goes after the <doctype> declaration, but wraps around everything else in the document.

# data[].attributes.body
All HTML websites should start with <!DOCTYPE html>.

This is not a tag, but something we call a declaration. It 'declares' to the browser that we are going to be using HTML5, which is the most recent version of HTML.

<!DOCTYPE html> is not case-sensitive, which means we can write it as <!doctype html>, <!Doctype HTML>,<!dOcTyPe HtMl> and the computer will still understand.

# data[].attributes.body
We are going to be using JSbin to work on our websites. It sets you up with some basic HTML which we call a boilerplate.
It will be a little different from creating a website using a text editor, as you dont have to use tags to link the CSS or Javascript, but thats for later on.

# data[].attributes.attachment_link.description
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

# data[].attributes.body
1. What does HTML stand for?
2. Metadata is defined in the _____ element.
3. Attributes are written in the closing tag. True or False?
4. Name one empty element!

Tell a sensei your answers before moving on.

# data[].attributes.body
In the opening tag you might find something called an attribute! There are some which have in-built functionality, like src, href, class, style and id - but you can also define your own. A full list of attributes that have purposes can be found here!

# data[].attributes.headline
⚠ Some elements do not have a closing tag.

# data[].attributes.subject
⚠ Some elements do not have a closing tag.

# data[].attributes.body
Some elements, known as empty elements, do not have a closing tag. They can (but do not have to) include a forward slash at the end. Examples include:

<br> : The Line Break element.

<hr> : The Thematic Break (Horizontal Rule) element.

<img> : The Image element.

# data[].attributes.body
An element consists of tags and content. The element name above would be p, as it is what is inside the <>. In most cases, we have a start tag and a closing tag. Closing tags always have a forward slash (/).

# data[].attributes.body
Hyper Text Markup Language, (HTML), is how we make the structure of every single website on the World Wide Web.