You now have a good understanding of the overall layout inside a HTML file. The file should contain a <!DOCTYPE> at the top and then an outer <html> element. Inside the <html> element you should place child <head> and <body> elements. In this lesson we're going to explore some of the tags and data you can add to your <head> area.
The <head> element can hold a collection of optional tags that give the browser more information about the page. These tags might define the web page's language, category, description, search keywords, links to other files needed for the page to work, and even references to scripts that may run on the page.
Attributes and Values
Before we talk about a specific element, you should first learn about attributes. Many elements can have extra pieces of information attached to them, called attributes. These extra pieces of information are located inside an opening HTML tag (before the end bracket ">").
Attributes have a name and a value. Attributes can be used to control how the tag behaves on your web page. In your HTML code, an attribute name is followed by the equal sign (=) and then a value surrounded by quotation marks. The value can contain numbers, words, link locations or other types of data. In the example below we have created an attribute named "myAttribute" and assigned a value of "data".
Notice that the data value is surrounded by double quotes. Make sure you use the straight double quotes (" "), or straight single quotes (' '). Two single quotes beside each other (' ' ' ') or fancy curly quotes added by some text editors (“ ”) will not work!
In the latest HTML5 standard you can surround the data with double quotes, single quotes, or even in some cases no quotes at all. However, in the older XHTML standard the value must always be surrounded by double quotes. We will use double quotes ourselves in this course and recommend sticking with one style for all code that you write.
You will learn more about attributes, values and how to use them as we discuss certain HTML elements.
The <meta> Element
The <meta> elements may appear near the top of a web page, in the <head> area. This tag does not contain any content, so must be self-closed as an empty element with <meta />. Even though the element has no content, it can contain a number of different attributes to give the browser information about the page. Each attribute has a specific purpose and many of them are optional.
Charset <meta> Element
One important <meta> element will tell the browser what type of encoding is used for the characters on the page. You add a charset attribute to the <meta> tag with a value describing the encoding type. In our case, we are using "utf-8" as we save each of our HTML files in a text editor. The <meta> charset element should go directly underneath the opening <head> tag.
You learned about character sets earlier and if you remember, UTF-8 includes the characters needed for just about any written language. It is considered best practice to put this <meta> tag on your page so it is interpreted properly by all browsers.
Optional <meta> Elements
There are many well-known <meta> attributes that contain different pieces of information. Some <meta> tags are more helpful than others, although none are necessary to make your web page work. Many of these tags were developed early on in the history of web sites to help browsers determine what information was on the page and how to list it within search engines.
Today, many of the <meta> tags are ignored since search engines have more advanced methods for gathering information about web pages. However, you can still place these elements on your page in case any search engine or human reader will use them. The example below contains some common <meta> elements.All of these <meta> elements have a name attribute and a content attribute. The name attribute identifies the type of information that will be in the content attribute.If you do use these optional <meta> tags, it is important to make the "description" and "keywords" content specific to each web page on your site. Search engines always change how they process and rank pages, and you never know when your <meta> tags may be used to rate your page.The <title> Element
All web pages can have a title, which is a short phrase that describes the page content. The title is not part of the page body, but is displayed in some alternate location by the web browser. Common locations include the title bar of the browser window or as the name of the tab containing the web page. An example below is shown from the Firefox browser. We have circled the "Raptors: Birds of Prey" title near the top.
Web Page Title
The <title> element contains your title phrase, and it goes in the <head> area.Often, company websites will list the name of the company before or after a description of the page. For example, the title "ACME, Inc: Jet Packs" suggests that the page contains jet packs sold by ACME, Inc.
Search engines may use the page title as part of their rankings. So, you might want to include any search keywords you think are important in your page title. Of course, you still want to make sure the overall title makes sense. For example, let's say you have a website about backyard insects. You think someone might search for the words "crawly critters" in order to find your web site. In this case, your page title might read: "Crawly Critters in the Back Yard, by Crazy Creatures".
The <title> element has been around since the very beginning of web design. This is a very important element, since the words you place here might show up along the title bar of your page, in the task bar at the bottom of the computer screen, or as a bookmark label. The title could also be a big factor when sorting web sites on Google or other search engines.
1. What are the four main html tags that are required on any web page?
2. What is an attribute used for?
3. How can you add an attribute to an element tag?
4. What is a <meta> tag used for?
5. What does the "charset" attribute do in a meta tag?
6. Name some optional <meta> tags and discuss why each would be used.
7. What does the <title> element do?
8. What are some steps you can take to troubleshoot a web site that is not performing as expected?
1. The four main HTML tags required on any web page are <!DOCTYPE>, <html>, <head>, and <body>.
2. An attribute is used to provide additional information about an HTML element. It can control how the tag behaves on a web page.
3. An attribute can be added to an element tag by including it inside the opening tag, after the element's name.
4. The <meta> tag is used in the <head> area of a web page to provide additional information about the page to the browser. It can include attributes such as description, keywords, author, and viewport.
5. The "charset" attribute in a <meta> tag specifies the character encoding used for the characters on the page. It helps the browser interpret and display the characters correctly.
6. Some optional <meta> tags include:
- Description: This tag provides a brief summary or description of the page, which can be used by search engines.
- Keywords: This tag specifies the keywords or terms related to the page content, which can be used by search engines for indexing.
- Author: This tag specifies the author or creator of the web page.
- Viewport: This tag specifies how the web page should be displayed on different devices and screen sizes.
- Robots: This tag specifies whether search engine robots should index or follow links on the page.
7. The <title> element is used to specify the title of a web page. It is displayed in the browser's title bar, bookmark labels, and search engine results. It is also used as a factor in search engine rankings.
8. Some steps to troubleshoot a web site that is not performing as expected include:
- Checking for any errors in the HTML code by using a validator tool.
- Reviewing the CSS code to ensure there are no conflicts or errors.
- Testing the website on different browsers to identify any browser-specific issues.
- Checking for any issues with server or hosting settings.
- Analyzing website performance using tools like Google Analytics to identify any bottlenecks or slow loading elements.
- Gathering feedback from users or conducting usability testing to identify any usability issues.
1. The four main HTML tags that are required on any web page are:
- <!DOCTYPE>: Specifies the HTML version being used.
- <html>: The outermost element that contains all other elements.
- <head>: Contains metadata and other non-visible elements.
- <body>: Contains the visible content of the web page.
2. An attribute is used to provide additional information about an HTML element. It modifies the behavior or appearance of the element.
3. To add an attribute to an element tag, you include it within the opening tag of the element. The attribute name is followed by an equal sign (=) and the attribute value, which is enclosed in quotation marks.
4. The <meta> tag is used to provide metadata or additional information about the web page. It is commonly used to define the character encoding, set the viewport for responsive design, provide a description of the page, and specify keywords for search engine optimization.
5. The "charset" attribute in a <meta> tag specifies the character encoding used for the characters on the web page. It helps the browser interpret and display the characters correctly. For example, "charset=utf-8" indicates that the UTF-8 encoding is being used.
6. Some optional <meta> tags and their purposes include:
- "description": Provides a brief description of the web page's content, which may be displayed in search engine results.
- "keywords": Specifies relevant keywords that are associated with the web page's content, improving search engine optimization.
- "author": Identifies the author of the web page.
- "viewport": Defines the viewport for responsive design, controlling how the web page is displayed on different devices.
It's important to note that the effectiveness and usage of these optional <meta> tags may vary depending on search engine algorithms, but they can still provide helpful information.
7. The <title> element is used to specify the title of the web page. It is displayed in the title bar of the browser window or as the name of the tab containing the web page. The title is important for search engine optimization and can also impact how users perceive the relevance of the page to their search query.
8. Some steps to troubleshoot a web site that is not performing as expected include:
- Checking for any syntax errors or missing closing tags in the HTML code.
- Verifying that the CSS styles are correctly applied to the elements.
- Inspecting the browser console for any JavaScript errors.
- Analyzing the network requests and server responses for any errors or issues.
- Testing the website on different browsers and devices to identify any compatibility problems.
- Considering performance optimization techniques, such as optimizing images and reducing the number of external resources.
- Seeking assistance from online forums or communities for specific web development platforms.