Question

A web page contains a mixture of both data and HTML mark-up. The mark-up is identified by some special symbols and tags that you will learn to use.

Angle Brackets
The most important symbols in HTML coding are the less-than (<) and greater-than (>) signs. These symbols, when combined with words in between, tell the web browser how to display the data on the web page. The (<) and (>) signs are called angle brackets, or just "brackets" for short in HTML.

Tags
When angle brackets are used around a specific word, it is called a tag. Tags are used to mark the start and end of sections on a web page and will tell the browsers how to display those sections.

Imagine each bracket as the mouth of a crocodile. Crocodiles open their mouths to capture their prey. They are greedy creatures, so there are always two crocodiles for every prey. One grabs from the front, and the other from the back, like this: <prey>. When the brackets are positioned this way around a word, it marks the start of a section. In HTML, this is called the opening tag.

At some point, the tag needs to end, or stop. This is done by adding a forward slash (/) before the name of the tag, like this: </prey>. The HTML term for this is the closing tag.

Let's go back to our crocodile example. Our crocodiles will hold on to their prey until a zoo keeper comes with a big stick and pokes the first one in the mouth. The zoo keeper doesn't want to stand on the crocodile's sharp teeth or in the water to stop the crocodiles, so he stands on top of the prey to get the right angle as he pokes at the first crocodile.
If you can remember this scene, you will always know to use the forward slash (/) and not the backward slash (\) in a closing tag. Only the first crocodile needs to be poked and they both let go of their prey.

On an HTML web page, you can surround text or data that you want to show with opening tag and closing tags like this:

<prey>your data</prey>
The tag name will tell the web browser exactly how to display your data. Now, <prey> is not actually an HTML tag, so don't try to use it on your web site! You will learn some real HTML tags shortly.

In HTML5, it doesn't matter if you use capital or lower case letters for your tag names. So, <PREY> and <prey> would do the same thing. However, the older XHTML standard required lower case names, and it is still best practice to use lowercase letters in your tags. So that is what you will see in this course.

HTML Elements
When opening and closing tags are put together, they are called an element. An HTML element is everything from the opening tag to the closing tag, including the tags themselves and the data within. Here is an example element in HTML code:

<strong>My bold text</strong>
The <strong> HTML element tells the web browser to display the text inside with a bold font. Your web browser would display this element with just the bold text, but the opening and closing tags themselves are hidden.

My bold text

Each element is like a container or box. Some are really large and some are very small. Some boxes hold interesting things (your web page content) and others merely hold more boxes. Your web browser will figure out how to display the content on the page based on the types of boxes surrounding the data.

Empty Elements
Most elements have an opening tag, content in the middle, and a closing tag. However, some elements will never have any data inside. One example is the line break element <br />. This element is simply used to force the text in a web page to break and move to the next line. Instead of writing both opening and ending tags "<br></br>", you can use an "empty" or "self-closing" format.

With empty elements, the tag starts normally, but instead of a separate closing tag, there is a space and a forward slash just before the end bracket. So our self-closing line break "br" would be written like this:

<br />
The original rules for HTML were not very well defined. So web browsers will try very hard to understand the code a web designer writes, even if it does not strictly follow the rules. You can actually write "<br>" or "<br/>" or "<br />" and it will be understood to mean the same thing. In fact, the most recent HTML5 standard says that self-closing elements can be written without the closing space and slash ("<br>").

Even though you can write self-closing elements with or without the slash, it is best practice to pick one style and stick with it. This makes your HTML code easier to read. We will generally use the version with the trailing slash (such as "<br />") in this course, because that makes it obvious the tag is a self-closing element and not just the opening tag for a larger element.

Introducing Our Online HTML Coding Tool
As you learn new HTML skills, our lessons will let you practice those skills right in the web browser, without having to edit local files in Notepad or TextEdit! We encourage you to experiment with each new HTML feature before doing any required coding in a "Work with Me" section or graded chapter activity.

Examine the panels below. The first panel contains a small text editor with HTML source code and content that you can change. When you have completed your changes, click the "Show Results" button to display the output in the second panel. You can repeatedly change code and click "Show Results" to see how a web browser would display the output.

In this particular example, the code panel simply contains some text without any HTML mark-up. Try clicking "Show Results" now to see how that content would appear in a web browser.

1. What is an angle bracket? Where are they found on the keyboard?
2. What is a "tag"? How is a tag formed?
3. What is an opening tag? What is a closing tag? How can you tell the difference between the two?
4. Do you need to use all capital letters in a tag name? All lower-case? Which is the "best-practice"?
5. What is an HTML "element"? How is this different than a tag?
6. What is an "empty element"? When would you need to use an empty element?

Answer 1

Reword this sentence

In HTML, a tag is a special word or phrase that's surrounded by an angle bracket. It's used to mark the beginning and end of sections of a web page and tell the browser how to show those sections.

Answer 2

An empty element is an HTML element that's empty of any information or content between the beginning and end of a tag. It's a way of representing things that don't require any content, like a line break or a picture. You write an empty element in a way that makes it close automatically, like a gap and slash before the tag ends, like <br />.

Make this sentence into pre k student.