Today we're going to get hands-on.
Ready?
It's time to grab HTML by the scruff of the neck and drag it around a bit.
One of the coolest things about DevTools is that it turns any web page into a code playground. It's easy to change a font, make type bigger or smaller, or reveal a hidden saved password that you can't remember.
But all of these things are achieved using CSS — a styling language which tells your browser how to display HTML.
Today we're going to manipulate HTML directly.
Have you met Dom?
Let's get technical for a second. If you read the official DevTools documentation, you'll see the term "DOM" appearing everywhere. DOM stands for Document Object Model, a cross-platform language for representing and interacting with objects in HTML, XHTML, and XML documents.
Don't worry about all those acronyms though.
All you need to know for now about DOM (he's a nice chap by the way) is that he has a tree-like structure:
So when you're writing HTML, you need to respect this structure. Always respect the DOM.
If you open a tag, like the body tag:
<body>you need to close it again, eg
</body>
(Notice the forwards slash in the closing tag)
You might have noticed that the diagram has both a HEAD and a BODY. For once this is self-explantory, yay!.
The head of an HTML page is where everything gets set up — things like the title of the page, and a description of it for search engines like Google.
The body of an HTML page is where the actual content goes, with paragraph text in <p> tags and images in<img> tags, for example.
That's enough tecnical stuff for this lesson.
Let's do the hands-on bit now!
How to change the order of elements on a web page
As usual, this lesson assumes that you're using the Chrome browser on a laptop or desktop.
- Right click on the thing you want to reorder
- In the menu that pops up, click 'Inspect'
- Now in the 'Source' panel — which shows the raw HTML for our mate DOM — click and drag the thing to where you want it.
- (Or to delete the thing you have selected, just press backspace on your keyboard!)
Now it's your turn: can you fix this list?
- Monday
- Tuesday
- Wednesday
- Thursday
- Sunday
- Friday
- Saturday
- Dog
## Bonus DevTools tip
When you have some HTML selected in the 'Source' panel, you can copy & paste the code just like you would normal text: Cmd+C and Cmd+P on a Mac, or Ctrl+C and Ctrl+P on a PC.
Posted to DevTools for Designers in 2016.