Attract Hot Robots with Structural HTML Markup
Learn how to use structural HTML markup to create an enticing website. In this episode, Daisy introduces you to the required HTML elements (html, body, and doctype) as well as shows you how to use the h1, h2, p, br, and blockquote tags to format your page.
Click here for the full video transcript
>>UNIQUE ID: Dear Daisy, my friend Garret–who is real–has been having trouble with the ladies. He drives stunt cars and tames lions… Hey, don’t type that part. I was simply providing character development…
>>DAISY: Um.. it goes on like that for a while. Ah, here we go.
>>UNIQUE ID: My friend wants an online profile to attract hot robot babes, I mean any kind of babes. They don’t necessarily have to be robots… Because I’m definitely not a robot, and neither is my friend. I tried to make an HTML page but when I open it in my web browser it doesn’t look right. What gives? Sincerely, Garret’s friend. P.S. attached is a photo of a highly attractive robot you may use on the website. As a placeholder, of course.
>>DAISY: Oh my. Hmmm, mm hm. Aha, just as I suspected. So, “Garret’s friend” you’re on the right track with the web page, but… Well no. The only thing you got right was naming your file index.html. Where are your html tags? Without any tags, your web browser is like, “what the trash? What do I do with this?”
Don’t feel bad, though. I’ll show you how to use html tags to format your website. First of all, you have to tell the browser what kind of document it is looking at. You do this with the doctype. This specifies the version of html you are using. Before there was HTML5 there was, get this, HTML 4. That doctype was super long and scary looking, but fortunately for you, the html 5 doctype is easy to remember. Everything else will go inside of an html tag, and all of the visible parts should be placed in the body tag. The main problem with your page is that all of the text is smashed together in one big paragraph. No matter how many spaces or line breaks you put between two words, web browsers will display it as only one space. This is what’s known as whitespace collapse. You need to use structural HTML markup to break up your text. Headings are useful tags for distinguishing sections of your page. The biggest, baddest heading in html is h1. So lets wrap your tagline, “Unique robot seeking same,” in an h1 tag. Most of the text on your page probably belongs in a paragraph tag, like this. I’m guessing the “six things I could never live without” is a new heading, though, so we’ll wrap it in an h2 tag. h2 is a subheading to h1, so we know that this content still belongs to your main heading, “unique robot seeking same.”
In case you are wondering, the h tags go all the way down to h6, each one getting a little smaller. I’ll put the six things you could never live without in another paragraph tag, but it’s a little hard to read without line breaks, so lets use the br tag to break them up. Now, your inspirational quote is text taken from another source, so it should go inside of a blockquote tag. By default, blockquotes indent the text slightly, but Keep in mind that even though your browser will change the appearance of content based on the tags used, you should make sure the tag is appropriate to the type of content inside of it, and not base your choice on the visual result. Visual changes should be done later with CSS. Finally, I’ll use an img tag to include your hot robot picture… And we’re done! You look fabulous semicolon close parenthesis. Go get em’ tiger!
Using structural HTML markup, we were able to create an enticing web page for my attractive robot friend.
In the next video, we’ll find out how to add meaning to our page and change the format of our text with semantic HTML markup.