A browser is basically a program that knows how to 1) locate files on the internet and 2) read and display the HTML or scripts in those files on your computer. HTML code tells the browser what to do using container tags, empty tags, and attributes.
Container tag: Most tags in HTML are container tags.
Example of a container tag:
Paragraph tag - p
<p>The browser will put space above and below this text, because that is what browsers do with paragraphs.</p>
The most common container tag in HTML is the paragraph tag. The paragraph tag tells the browser that the text inside it is a separate paragraph. To the browser, a paragraph is text with space above and below it. Container tags come in pairs. As shown above, one tag marks the beginning of the section it applies to, and a second tag marks the end of the section. The tags are enclosed in <>, and an end tag has a slash at the beginning.
Bold tag - b
<p> If I want the word <b> bold </b> to always appear in <b> bold </b> lettering, I will use the <b> bold </b> tag. Words contained inside these tags will be shown in the browser in bold print. </p>
Empty tag: An empty tag is a special tag that doesn't contain anything. For example, the tag <br> tells the browser to make a line break (go to the next line). The <hr> tag tells the browser to draw a straight line across the page (horizontal rule). Since these do not affect any text, they don't need to "contain" anything. Therefore, they don't have to come in pairs.
Attributes: An attribute is an extra instruction or value that goes along with a tag. Certain tags allow you to give additional information to the browser in the form of specifying an attribute. For example, the paragraph tag can contain the attribute "align" as follows:
<p align="center"> In the middle </p>
The browser will put these words in the center of the screen. In the tags section I will identify attributes that can be used to modify various tags. (Not every attribute can be used with every tag. Each tag has certain attributes that are usable.)
Nesting: Tags can be nested. This means a tag can go inside another tag. It works just like parentheses in math problems. Tags can't be overlapped.
Nested tags (good)
<p>The <b> bold </b> tag is nested inside the paragraph tag.</p>
Overlapped tags (BADBADBAD)
<p> This arrangement will confuse your <b> browser and will not work. </p> </b>
If you followed the above, you already know most of the basic concepts of HTML. Go on to Lesson 2 to see the basic HTML tags. If not, go on to Lesson 2 anyway. After you work through it, come back and reread this (although it will add a few minutes to your time). It will make more sense then.