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?
1. An angle bracket is a special symbol (< or >) used in HTML coding. They are found on the keyboard as shift + comma (,) and shift + period (.).
2. A "tag" in HTML is a specific word or phrase surrounded by angle brackets ("<" and ">"). It is used to mark the start and end of sections on a web page and tells the browser how to display those sections.
3. An opening tag is the tag that marks the start of a section in HTML and is denoted by placing the tag name between angle brackets, like "<tag>". A closing tag marks the end of a section and is denoted by adding a forward slash before the tag name, like "</tag>". The difference between them is that the closing tag includes the forward slash (/) before the tag name.
4. In HTML5, it doesn't matter if you use capital or lowercase letters for tag names. However, using lowercase letters for tag names is considered best practice.
5. An HTML "element" is the combination of an opening tag, content or data, and a closing tag. It includes everything from the opening tag to the closing tag, including the tags themselves and the data within.
6. An "empty element" is an HTML element that does not have any content or data between the opening and closing tags. It is used to represent elements that do not require any content, such as line breaks or images. Empty elements are written in a self-closing format, with a space and a forward slash just before the end bracket, like "<br />".
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.
A tag in HTML is a specific word or phrase enclosed within angle brackets. Its purpose is to indicate the start and end of different sections on a web page and instruct the browser on how to display those sections.
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.
An empty element in HTML is like a box with nothing inside it. It is used when we want to show something on our web page that doesn't have any words or pictures. The special way to write an empty element is with a little gap and a slash at the end of the tag, like <br />.
1. An angle bracket is a special symbol (< and >) used in HTML coding. They are found on the keyboard above the comma and period keys.
2. A "tag" in HTML is when angle brackets are used around a specific word. Tags are used to mark the start and end of sections on a web page and tell the browsers how to display those sections. A tag is formed by placing the opening angle bracket (<) before the tag name and the closing angle bracket (>) after the tag name.
3. An opening tag marks the start of a section in HTML and is formed by placing the opening angle bracket (<) before the tag name. A closing tag marks the end of a section and is formed by placing a forward slash (/) before the tag name within the opening angle bracket. The closing tag is used to indicate that the section started by the opening tag should stop. For example, <prey> is an opening tag and </prey> is a closing tag.
4. In HTML5, it doesn't matter if you use capital or lowercase letters in a tag name. Both <PREY> and <prey> would do the same thing. However, the best practice is to use lowercase letters in tag names. This was required in the older XHTML standard and is still recommended for consistency.
5. An HTML "element" is formed by combining the opening tag, closing tag, and the data within the tags. It represents a complete section in the HTML structure. For example, <strong>My bold text</strong> is an HTML element where <strong> is the opening tag, </strong> is the closing tag, and "My bold text" is the data within the tags.
6. An "empty element" is an HTML element that doesn't have any content or data between the opening and closing tags. These elements are used for specific purposes, such as line breaks, and are written in a self-closing format. For example, the line break element <br /> is an empty element that is used to force text to break and move to the next line. Empty elements are written with a space and a forward slash just before the closing angle bracket, like this: <br />.
1. An angle bracket is a special symbol used in HTML coding. It consists of a less-than sign (<) and a greater-than sign (>). Angle brackets are found on the keyboard above the comma and period keys.
2. A "tag" in HTML is a way to mark the start and end of sections on a web page. It is formed by using angle brackets (<>) around a specific word or phrase. The word or phrase inside the tags gives instructions to the web browser on how to display the content within those tags.
3. An opening tag is the start of a section in HTML and is marked by using angle brackets (<>) around a specific word. It is used to tell the web browser where the section begins. A closing tag is used to mark the end of a section and is formed by adding a forward slash (/) before the name of the tag. The closing tag tells the web browser where the section ends. The difference between the two is that the closing tag has a forward slash (/) before the tag name.
4. In HTML5, it doesn't matter if you use capital or lowercase letters for tag names. Both uppercase and lowercase letters will work the same way. However, it is considered best practice to use lowercase letters for tag names. This was a requirement in the older XHTML standard, and using lowercase letters is still recommended for consistency and readability.
5. An HTML "element" refers to everything between the opening and closing tags, including the tags themselves and the content within. It is like a container or box that holds the content. The element includes both the opening tag, the content, and the closing tag. The tags specify how the content inside the element should be displayed.
6. An "empty element" is an HTML element that does not have any content between its opening and closing tags. It is used to add specific functionality or formatting to a web page without needing any actual content. One example of an empty element is the line break element, <br />, which is used to force a line break in the text. Empty elements are written with a forward slash (/) before the closing angle bracket.