O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.
You are watching: Html tags are instructions for a browser.
The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo:
HyperText Markup Language, or HTML for short. So, get ready for some language lessons. After this chapter, not only are you going to understand some basic elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, by the end of this book you’ll be talking HTML like you grew up in Webville.
Want to get an idea out there? Sell something? Just need a creative outlet? Turn to the Web—we don’t need to tell you it has become the universal form of communication. Even better, it’s a form of communication YOU can participate in.
But if you really want to use the Web effectively, you’ve got to know a few things about HTML—not to mention, a few things about how the Web works too. Let’s take a look from 30,000 feet:
Web servers have a full-time job on the Internet, tirelessly waiting for requests from web browsers. What kinds of requests? Requests for web pages, images, sounds, or maybe even a video. When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser.
You already know how a browser works: you’re surfing around the Web and you click on a link to visit a page. That click causes your browser to request an HTML page from a web server, retrieve it, and display the page in your browser window.
But how does the browser know how to display a page? That’s where HTML comes in. HTML tells the browser all about the content and structure of the page. Let’s see how that works...
So, you know HTML is the key to getting a browser to display your pages, but what exactly does HTML look like? And what does it do?
Let’s have a look at a little HTML...imagine you’re going to create a web page to advertise the Head First Lounge, a local hangout with some good tunes, refreshing elixirs, and wireless access. Here’s what you’d write in HTML:
Relax
We don’t expect you to know HTML yet.
At this point you should just be getting a feel for what HTML looks like; we’re going to cover everything in detail in a bit. For now, study the HTML and see how it gets represented in the browser on the next page. Be sure to pay careful attention to each letter annotation and how and where it is displayed in the browser.
When the browser reads your HTML, it interprets all the tags that surround your text. Tags are just words or characters in angle brackets, like , , , and so on. The tags tell the browser about the structure and meaning of your text. So rather than just giving the browser a bunch of text, with HTML you can use tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images need to be placed.
Let’s check out how the browser interprets the tags in the Head First Lounge:
There are no Dumb Questions
Q: | Q: So HTML is just a bunch of tags that I put around my text? |
A: | A: For starters. Remember that HTML stands for HyperText Markup Language, so HTML gives you a way to “mark up” your text with tags that tell the browser how your text is structured. But there is also the HyperText aspect of HTML, which we’ll talk about a little later in the book. |
Q: | Q: How does the browser decide how to display the HTML? |
A: | A: HTML tells your browser about the structure of your document: where the headings are, where the paragraphs are, what text needs emphasis, and so on. Given this information, browsers have built-in default rules for how to display each of these elements. But you don’t have to settle for the default settings. You can add your own style and formatting rules with CSS that determine font, colors, size, and a lot of other characteristics of your page. We’ll get back to CSS later in the chapter. |
Q: | Q: The HTML for the Head First Lounge has all kinds of indentation and spacing, and yet I don’t see that when it is displayed in the browser. How come? |
A: | A: Correct, and good catch. Browsers ignore tabs, returns, and most spaces in HTML documents. Instead, they rely on your markup to determine where line and paragraph breaks occur. So why did we insert our own formatting if the browser is just going to ignore it? To help us more easily read the document when we’re editing the HTML. As your HTML documents become more complicated, you’ll find a few spaces, returns, and tabs here and there really help to improve the readability of the HTML. |
Q: | Q: So there are two levels of headings, and a subheading |
A: | A: Actually there are six, with , which the browser typically displays in successively smaller font sizes. Unless you are creating a complex and large document, you typically won’t use headings beyond . |
Q: | Q: Why do I need ns tag? Isn’t it obvious this is an HTML document? |
A: | A: Tthat tag tells the browser your document is actually HTML. While some browsers will forgive you if you omit it, some won’t, and as we move toward “industrial-strength HTML” later in the book, you’ll see it is quite important to include this tag. |
Q: | Q: What makes a file an HTML file? |
A: | A: An HTML file is a simple text file. Unlike a word processing file, there is no special formatting embedded in it. By convention, we add an “.html” to the end of the filename to give the operating system a better idea of what the file is. But, as you’ve seen, what really matters is what we put inside the file. |
Q: | Q: Everyone is talking about HTML5. Are we using it? If so, why aren’t we saying “HTML-FIVE” instead of “HTML”? |
A: | A: You’re learning about HTML, and HTML5 just happens to be the latest version of HTML. HTML5 has had a lot of attention recently, and that’s because it simplifies many of the ways we write HTML and enables some new functionality, which we’re going to cover in this book. It also provides some advanced features through its JavaScript application programming interfaces (APIs), and those are covered in Head First HTML5 Programming. |
Q: | Q: Markup seems silly. What-you-see-is-what-you-get applications have been around since, what, the ‘70s? Why isn’t the Web based on a format like Microsoft Word or a similar application? |
A: | A: The Web is created out of text files without any special formatting characters. This enables any browser in any part of the world to retrieve a web page and understand its contents. There are WYSIWYG applications out there like Dreamweaver, and they work great. But in this book we’re going to take it down to the bare metal, and start with text. Then you’re in good shape to understand what your Dreamweaver application is doing behind the scenes. |
Q: | Q: Is there any way to put comments to myself in HTML? |
A: | A: Yes, if you place your comments in between the browser will totally ignore them. Say you wanted to write a comment “Here’s the beginning of the lounge content.” You’d do that like this: Notice that you can put comments on multiple lines. Keep in mind anything you put between the “”, even HTML, will be ignored by the browser. |