In the last lesson you learned about the elements inside the <head> area that contain descriptive information about the page. However, those elements (except for <title>) are not visible to the user. In this lesson, you will begin to format the visible content that appears in the main browser area.
Locating Content inside <body>
If you want to display text, images or other content on your page, those things must go inside the <body> element. All content and other HTML mark-up that formats that content should be placed between the opening <body> tag and the closing </body> tag.One important thing to know right away is that any simple text you place inside the <body> will appear on the web page exactly as you type it - except white space like carriage returns (new lines), tabs or extra spaces are ignored. Look at the example below, with two lines of text. What do you think will appear in the web browser? Click "Show Results" to see for yourself!Why do the two lines of text get combined into one line in the browser? A key feature of web browsers is that they run in a window that the user can resize. So unless you use some special HTML tags to force line breaks or start new paragraphs, the web browser will ignore any whitespace you enter and make its own decisions on how to display the text. "Whitespace" characters include spaces, tabs, and carriage returns (which are added to the code when you press "Enter").
Wrapped text without line breaksIf you are able to re-size your browser window and make it very narrow, you will see the browser begin to wrap the output in the results panel above. On the right, you can see a picture of this effect on a real web page.
We have already introduced the line-break element <br/> or <br>. If you place this mark-up in the middle of some simple text, the web browser will force the following text to the beginning of a new line. Try this yourself! Add a <br/> element somewhere inside the initial text in the above example, then click "Show Results" again to see the effects in the browser.
The <h1> Element (Primary Heading)
If you've ever seen a newspaper, you will notice that headlines are written in big, bold letters and summarize what the page or article is all about. Well-written web pages usually do the same thing with headline text in different colors or sizes.
The largest headline is the most important. It should attract interest and summarize the key point of the page. You can turn some regular text into the largest headline by placing it inside the primary heading <h1> element. Your primary heading may have similar words or content as your page title.
We would like the phrase "Tongue Twisters" in the example below to become a headline. If you click "Show Results" now, this word is simply combined with the other text (remember, whitespace is ignored).Try making the "Tongue Twisters" phrase a headline by adding an opening <h1> tag on the front and the closing </h1> tag afterwards. Then click "Show Results" again to verify the results.
<h1>Tongue Twisters</h1>
Copy
The web browser will automatically put headlines one a line all by themselves and display that text in a larger, bold font.The <h2> Element (Secondary Heading)
You can create headlines that are smaller than the primary headline. The secondary headline <h2> element is used when you want to highlight a smaller or less important area of your web page. This tag works just the same as the <h1> tag, but you use the number 2 to show it is a secondary headline.
Click "Show Results" below to see the effects of a primary <h1> element. Then, change that element (both opening and closing tags) to "h2" and try again to see the new headline. The <h2> element should be smaller than <h1> but still bold and larger than regular text.
Try It Now
You can actually use higher numbers for smaller and smaller headlines, like <h3> or <h4>. Try this yourself in the code panel above and check out the results. Levels 1, 2, and 3 (or <h1>, <h2>, and <h3>) are the most commonly used headline levels.
The <p> Element (Paragraph)
The paragraph element <p> is something you will use all the time in web mark-up. It tells the browsers how to separate your content into paragraphs. When you are writing an English paper, you might have learned to indent the first word of a paragraph with some spaces. On web pages, paragraphs are normally separated with a blank line instead. Web browsers will automatically wrap text within a <p> element to fit the screen.
Study the example below. We have created two paragraph elements. When you click "Show Results", notice that the web browser will automatically format each paragraph, ignoring whitespace and wrapping the text at the edge of the available space. In addition
1. Where do the visible parts of a web page belong in the html code?
2. Why would the display of your web page vary when a web browser application is re-sized?
3. How do you highlight important information for your web page?
4. What is the difference between <h1> and <h2> tags?
5. What is the <p> element and how is it used on a web page?
6. What is the most important paragraph on your page?
7. What are some common troubleshooting steps you can take if your web page is not displaying as expected?
1. The visible parts of a web page belong inside the <body> element in HTML code.
2. The display of a web page can vary when a web browser application is resized because the browser will adjust the layout and formatting of the content to fit the new size of the window.
3. Important information can be highlighted on a web page by using tags such as <h1> for primary headings or applying different styles like bold or different colors to the text.
4. The <h1> tag is used for the primary heading, which is the largest and most important headline on the page. The <h2> tag is used for secondary headings, which are smaller and less important than the primary heading.
5. The <p> element stands for paragraph and it is used to separate content into paragraphs on a web page. It is commonly used to format text and create line breaks between paragraphs.
6. The most important paragraph on a page can vary depending on the content and purpose of the page. However, the primary heading (<h1>) is usually considered to be the most important for summarizing the key point of the page.
7. Some common troubleshooting steps if a web page is not displaying as expected include checking the HTML code for errors, clearing the browser cache, checking for compatibility issues with different browsers, and testing the page on different devices and screen sizes.
1. The visible parts of a web page belong inside the <body> element in the HTML code.
2. The display of a web page can vary when a web browser application is resized because the browser will adjust the layout and formatting of the content to fit the new dimensions of the window.
3. To highlight important information on a web page, you can use HTML tags like <h1> for primary headings, <h2> for secondary headings, or apply special formatting such as bold or different font colors.
4. The <h1> tag is used for the primary heading, usually the most important heading on the page that summarizes the key point. The <h2> tag is used for secondary headings, which are smaller and less important than the primary heading but still larger and more prominent than regular text.
5. The <p> element is used to create paragraphs on a web page. It tells the browser to separate the content into paragraphs and will automatically wrap the text to fit the available space on the screen.
6. The most important paragraph on a web page would typically be the one that contains the main content or key message of the page.
7. Some common troubleshooting steps if a web page is not displaying as expected include checking for any errors in the HTML code, ensuring all necessary files (such as CSS stylesheets or JavaScript files) are linked correctly, clearing the browser cache, and testing the page in different browsers to see if the issue is specific to one browser.