We are flush with power, let’s add even more to our page!
Maybe give your site a title, a greeting, a sentence about what’s good?
(or whatever, it’s your page!)
For my page, I wrote:
Zach World This is my personal webpage. Stay awhile! I think birds are cool.
Save, switch to the browser, refresh, and you will see:
Not what we wanted at all. What happened?
What Happened
The browser reads you quite literally and doesn’t pick up on subtle clues like linebreaks.
It saw text and, to please you, displayed it as quickly and efficiently as it could.
If you want your text to be structured, you have to be explicit with that structure, using a language the browser understands.
A language designed for structured text on the web.
Text of the future.
Hypertext.
I’m talking Hypertext Markup Language, baybee! Good ol’ HTML.
Our first word: <p>
HTML is made up of short words, commonly called “tags”, that you wrap you text within.
If we look at my words above you can see I wrote three separate lines. If this were a print zine, I’d say it’s made of three paragraphs.
In a web zine, I’d say the same thing. But i say it, with HTML.
There is an HTML tag for paragraphs called <p>. We can wrap each line in this tag like so:
<p>Zach World</p> <p>This is my personal webpage. Stay awhile!</p> <p>I think skateboards are cool.</p>
As you see, each line is prepended with <p>, and appended with </p>, that slash indicating the tag’s end.
Almost every tag you learn will follow this format.
See the magic
Save, switch, refresh, and:
The text is displayed as we intended and the tags are gone!
HTML is a silent note passed from you to the browser to guide its interpretation—like stage directions or margin notes.
Not only are you building a more complex web page, you’re also building a rapport (maybe even a friendship?!?!) with your browser, and all through laaaaanguage.
exciting and good.