HTML and the DOM

What is HTML? Hypertext Interconnected documents Markup Our code goes around our documents Language Yes, it’s programming

Declarative programming What you want not how you want it

Imperative programming C/C++ JavaScript Most everything you think of as programming

Markup We surround our data with tags to declare how they are to be treated.

This is my first paragraph. In this paragraph some parts need to be emphasized. This is the first item in a list The browser wouldn’t know it’s a list Except for the tags around this text

HyperText The text documents are interconnected inside the text

Anchor tag Check out some document!

Hyper === interconnected Hypertext markup language Hyper reference Hypertext transfer protocol

So what is HTML? A way of defining the *structure* of a document.

Document Object Model The in-memory model of an HTML Document

This is the DOM

Another View of the DOM

The DOM is a tree The file system is a tree The filesystem is a tree made up of files and directories. The DOM is a tree The DOM is a tree made up of text nodes and HTML Element nodes (tags)

2 Types of Tags get Rendered 1.Block Tags 2.Inline Tags

Let’s take a look at some code See basicpage.html demo.

HTML is not where we change font, colours, sizes, etc. HTML is about STRUCTURE.