Structuring HTML Documents

How to Identify the Important Text

1) Identify the text that you wish to identify as important. 2) Place your cursor at the beginning of the text before the first letter. 3) Add the opening strong tag. 4) Move your cursor to the end of the text, after the last letter. 5) Add the closing strong tag. In the example below, you see the <strong> element used to provide a warning and create importance. Try: Make the 5th sentence about diamonds important by using the strong element.

How to Apply the B Element

1) Identify the text that you wish to make stand out visually. 2) Place your cursor at the beginning of the text before the first letter. 3) Add the opening b tag. 4) Move your cursor to the end of the text, after the last letter. 5) Add the closing b tag. In the example below, you see the <b> element used to highlight a keyword. Try: Make the second keyword, barbinator, bold with the b tag.

How to Apply the I Element

1) Identify the text that you wish to offset from other text. 2) Place your cursor at the beginning of the text before the first letter. 3) Add the opening i tag. 4) Move your cursor to the end of the text, after the last letter. 5) Add the closing i tag. In the example below, you see the <i> element used to identify the French saying "je ne sais quoi" within the sentence. Note the usage of the lang attribute to indicate that the content is in a different language. You will cover this attribute later in the course. Try: Offset the name of the pirate ship, Queen Anne's Revenge, in the second paragraph.

How to Add Metadata

1. Add a meta empty tag. 2. Add a name attribute to the meta tag. 3. Give the name attribute the desired value to define the type of metadata it is. (e.g., author, keywords, description) 4. Add a content attribute to the meta tag. 5. Give the content attribute the desired value to define the actual metadata information. 6. Repeat steps 1-5 as necessary until all metadata is created.

How to Emphasize Text

1. Identify the text that you wish to emphasize. 2. Place your cursor at the beginning of the text before the first letter. 3. Add the opening em tag. 4. Move your cursor to the end of the text, after the last letter. 5. Add the closing em tag. In the example below, you see the <em> element used to denote emphasis for the word not in the first sentence. Try: Select a word in the second paragraph to emphasize and use the <em> element to change the voice of the sentence. Think about how that changes the meaning of the sentence. e.g. How would the sentence change with the word "had" emphasized over the word "something"?

How to Make Text Small

1. Identify the text that you wish to make small. 2. Place your cursor at the beginning of the text before the first letter. 3. Add the opening small tag. 4. Move your cursor to the end of the text, after the last letter. 5. Add the closing small tag. In the example below, the <small> element is used to format the copyright information, which is smaller in size than the regular text. Note the usage of character entity references in the code to display the copyright symbol. Try: Make the attribution text below the image small.

Review a Validation Report

1. Navigate to the Nu HTML Checker. 2. Make sure the Source checkbox is checked under the Show options. 3. In the Check by drop-down, select Text Input. 4. Paste in the code below, and press the Check button.

Character Set

A group of letters, numbers, and symbols used to display textual information in a document

UTF-8

A method of character encoding based upon Unicode used in HTML documents

HTML Validator

A program that reviews and evaluates the markup code structure of an HTML document to check for accuracy

Text-Level Semantics

A set of HTML tags that provides meaning to words along with additional default stylings to help the text stand out from the surrounding text

Metadata - Keyword

A type of metadata; used to define terms related to a web page that a user might enter into a search engine to locate specific information

Metadata - Author

A type of metadata; used to define the author of a web page

Metadata - Description

A type of metadata; used to describe the purpose of a web page

Section

A way to divide a web page to group similar content together

Search Engine Optimization

A.K.A. SEO; techniques and methods used to optimize a web site or page so it appears higher within search results

Unicode

An international encoding standard that defines all letters, digits, and symbols for all languages and scripts with a unique value

HTML Validator!

As you begin your HTML journey, keep in mind that errors in your HTML code may cause your site to display incorrectly in a browser. This could lead to an issue where users cannot access your site or at least parts of your site. The more complex your site, the worse the problem may become. To prevent this problem, several validators are available to select from on the W3C Developer Tools page, where developers can check their code for any errors and identify website elements that may not display properly. Consider the HTML validators as a second pair of eyes to review your code after you have done your own primary check for errors. In this course, you will focus on using the Nu HTML Checker that validates HTML5 documents, rather than Markup Validator or the Unicorn Validator, which were originally geared toward HTML4 documents. The Nu HTML Checker tool offers three ways you can verify your code: by entering in the address of the web page, by uploading an HTML document, or by pasting your code directly into a textbox.

Character Encoding

Correlates letters, numbers, and symbols of a language, or multiple languages, to computer code

SEO for Keywords

Here are seven tips based on marketing research that can help improve the effectiveness of keywords: 1) Know your audience. 2) Target longtail keyword phrases. 3) Use different variations. 4) Identify areas of opportunity. 5) Let keywords drive the content process. 6) Use different keywords to represent the same content. 7) Leverage traffic analytics.

SEO for Descriptions

Here are some best practices for using description metadata in a website: 1. Keep the description between 50-160 characters. 2. Write compelling verbiage designed to get users to click on your website. 3. Avoid duplicate descriptions across your site. Each page should have a unique description.

Footer

Identifies the end, or foot, of a section or web page

Navigation Menu

Identifies the location of the main set of links on a site used to jump between the pages within a website

Header

Identifies the start, or head, of a section or web page

Main Content

Identifies where web page content appears to separate it from the header and footer

You should receive four (4) error messages and two (3) warning messages. Error messages are items that must be fixed as they will most likely cause display issues and problems with using the site. Warning messages show errors that may or may not cause problems, but as a best practice, you should still resolve them to ensure your site works correctly across all devices. In the results from the code above, you'll notice these components within the messages:

If you look at the error messages returned from the validator in this example, you will see three main issues. The first issue (#2) relates to the fact there are two style="" attributes for the <ul> tag. To fix this, you would combine the attribute values into one, so the code would read <ul style="font-family:Verdana; list-style-type:square">. The second issue (#3) says the <br> tag isn't allowed as a child element of the unordered list. You'll notice the <br> tag wasn't flagged in the Fruit item, so if you move the <br> in the Veggie item line to be to the left of the closing list item </li> tag, this would fix the problem. The next issues include the two errors (#4 and #6) and the two warnings (#5 and #7). The code used the attribute of id="" for the list items. It is being flagged due to the repetition of the id="" attribute with the same value. The warnings in this case are clarifications of the error messages to help you identify where the problem resides within your code. The duplicate error messages show you that the validator flags each error individually so you can fix each one. Although beyond the scope of this course, the reason the code was flagged is that CSS does not allow two HTML elements with the same id="" value. To resolve the problem, either delete the attribute altogether or change it to the class=""attribute. The very first warning message (#1) is about adding a language to opening HTML tag. This is an attribute to help define the language so a browser will render the site properly. As an example, English language sites will render with the reading order from left to right, while Hebrew and Arabic languages would render the reading order right to left. One important note about the validators - they won't catch content issues like typos. If you paid close attention to the code, you'll notice a typo in the second style="" attribute of the unordered list element. There should be a letter p and not an o in the word type: list-style-type:square. Since there is a typo, the browser and validator will completely ignore it. This is why you should check your code carefully and not rely 100% on a validator. The validator will help catch coding mistakes, but you'll need to locate content issues like typos.

Metadata

Information that describes a document

Warning Messages

Items identified in an HTML evaluator report that may or may not cause problems but, as a best practice, should be fixed

Error Messages

Items identified in an HTML evaluator report that must be fixed as they will most likely cause display issues and problems with using the site

Keywords

Keywords are words that describe your site and the content of the overall site, or individual site pages. These keywords work behind the scenes to enable most search engines to categorize and index the site. To determine your keywords, think about what terms you would type into your favorite search engine to locate a site like the one you are creating. When you have multiple keywords, each keyword is defined, with commas separating them. You can have multiple-word keywords, and you do not need to put quotes around them. All content before a comma is considered the keyword. Examples of possible keywords for a gardening blog could include seasonal fruit, veggies, compost, planting planner, desert gardening, Phoenix gardening, etc. Keep in mind that most search engines will make sure your keywords also appear within the content of the page as well. Therefore, you shouldn't stuff your keywords with unnecessary terms as all words should relate to your site and be used in your site. If you do overstuff your keywords with unnecessary or unrelated terms, search engines may flag your site as a spam site, which would prevent users from visiting. As a general rule, don't use more than about 10 meta keywords for a single page.

Content (web page)

Makes up the bulk of a section or web page and includes the information, images, articles, etc. that a user will view on a web page

HTML Text-Level Semantics

One main element of any web page is text. When speaking with an individual, you can convey different meanings based upon how you say the words. In writing, this is a bit harder to do. For example, someone could comment to you in a sarcastic tone, and you could pick up on the sarcasm, but if you wrote out the same message, the sarcasm may be difficult to determine. HTML5 includes several tags to help create semantic meaning, or context, to designate the relationship between words, sentences, symbols, etc. on the page, and convey that semantic meaning to the user. Each of these tags requires an opening and closing tag. There are a total of 30 such tags, so you will focus on some of the most common ones. Understanding when to use these tags can be difficult at times. This chart summarizes frequently used tags and when to properly use them, to help guide you in making those determinations.

Search Engine Optimization

Search engines can arguably be considered the backbone of the World Wide Web. It is through search engines that people find most of the content they want or need. When you do a search, most times there will be millions of results that show up. So the question is, "How do you get a web site or page to appear towards the top of the search results so more people click on it and visit the site?" That is where search engine optimization comes into play. Search engine optimization, or SEO for short, is the techniques and methods employed to get people to access your site from search engines. When you optimize a website or web page for a search engine, there is a better chance it will rise higher in the search results returned. This, in turn, increases the traffic to the site and may even increase revenue from ads or users signing up to become members of the site. SEO has become more complex over the years because people have learned how to game the system and place malicious sites that are unrelated to the search being performed high in the results. Because of this, search engine companies keep changing the way they create the results list to reduce the possibility of malicious sites becoming highly ranked. Due to the complexity, SEO specialists and consultants have become potential jobs that people can pursue within the Web and marketing industries - see SEO job description for more information. Even if you don't pursue a career in SEO, it is a skill any web developer should have.

Author

The author type is used to define who developed/wrote the HTML page. In most cases, this is your own name, the name of the company you work for, or a combination of the two. The author metadata does not affect SEO and is used in other ways. For example, this can be helpful in cases where someone may want to contact the author with questions about the site or content, which can be good for freelancers to get new business.

The Main Element

The content makes up the bulk of a section or web page and is where you insert the information, images, articles, etc. you want a user to view and read. In most sections, you do not need to explicitly define this area with any special tags. You will just add the content of your web page using the structural markup tags (e.g., <h2>, <p>) that you learn throughout this course. However, when dealing with the web page level, you should use a tag to identify the main content area of your web page. The tag is the <main> tag, which requires an opening and a closing tag. The <main> tag can only be used once per web page and should not be within a <header>, <footer>, <nav>, or any section element. You should put only the specific and unique content for that web page within the <main> element, which means any repetitive elements found on other web pages should not appear there (e.g., no navigation menus, site logos, search forms).

Description

The description type can be a sentence, phrase, or other information that describes your web page. You can think of the description like a tweet on Twitter where you have a short amount of space available to get your idea across to the end user. These descriptions often appear underneath the title of the website and link within the search results to give users an idea of what information your site or site page contains. You can make your descriptions as long as you wish; however, you should keep two concepts in mind. First, many search engines may ignore all but the first portion of your description, and they may even mark your site as spam for going overboard. Second, you should limit the number of words in your description to avoid the search results cutting off the information. A good description for a gardening blog, for example, might include important information regarding the location where the author lives since plants grow differently based upon the climate. The growing season for food in Arizona differs from that in Maine. Also, the description could identify the author's years of experience with gardening to provide credibility to the site. An example description might be "Gardening ideas, tips, and how-tos for the hot desert environment of Phoenix, Arizona learned through 15 years of experience." When a Web user performs a search for gardening tips in Phoenix and the site appears in the search results, the searcher will read the description to see what the website is about.

The Small Element

The fifth tag is the <small> tag. This tag represents side comments and small print, which may include items like copyright information, attributions to content from another source, and legal text. This tag should be used only for short amounts of content, not for full paragraphs. By default, the text is about 20% smaller than the rest of the text.

The B Element

The first tag to discuss is the <b> tag. In previous versions of HTML, the <b> tag was used strictly to bold text, which is a visual display, but in HTML5, the tag adds a bit of semantic meaning - The tag offsets the text from the surrounding text but does not add any extra importance. Browsers will normally format text with the <b> tag using a bold font styling, but the tag is used to apply styling to text that really has no extra meaning and with no implication of an alternate mood or voice. For example, you would use this tag for things like product names in a review to help the product name stand out against the surrounding text. This tag should be used as a last resort if no other tag is available to use.

The Footer Element

The footer is found at the end, or foot, of the section. Like the header, the footer is a container that wraps around content, and the footer contains the elements you want at the end of a section. This may be information about authorship of the site, links for sharing the article, or copyright details, among other information. On a typical web page, this area usually provides information about the company; links to privacy policies, terms of service, and similar statements; and links to social media pages, sitemaps, and other elements you want users to access but that don't really fit into the navigation or content areas. To create a footer area, you will need to use the <footer> tag, which requires an opening and a closing tag.

The Emphasis Element

The fourth tag is the <em> tag. By default, browsers render this tag in italics. This tag denotes the need to emphasize the content the tag surrounds with any nested <em> tags, adding additional levels or degrees of emphasis to the text. When stressing a certain element in a sentence, you can change the meaning of the sentence. For example, consider the following sentence that conveys various meanings depending upon where you place the emphasizing stress.

The Header Element

The header is the top portion of a section that introduces the section. To create a header, you use the <header> tag, which must have an opening tag and a closing tag. The <header> tag differs from the heading tag. The <header> functions as a container that wraps around and groups content that contains introductory information about the section, whereas the heading tags designate the structure of the text. You can place a heading tag within a <header> element to create a title for the section. While the <header> element can be used at the beginning of a section to introduce the section, it is not necessary for every section. However, you are encouraged to use a <header> where it makes sense to have an introduction to the section. A web page header may contain elements such as a page title made with a heading tag, a company logo, a navigation menu, and any other elements that introduce the whole page.

The Navigation Element

The navigation menu contains the links a website viewer uses to jump between the pages within a website. The navigation menu is normally part of the web page header, and in the example image above of the Rio Salado homepage, the menu is found at the bottom of the header before the main content. When creating a navigation menu, you should place the links within opening and closing <nav> tags. The <nav> tags are used only when you want to create a group or major block of navigation links. This means you do not need to put every link on a web page within <nav> tags. Instead, the tags should be used when you want to designate a navigation menu or group of primary navigation links.

The I Element

The second tag is the <i> tag. Previous versions of HTML used the <i> tag strictly to italicize text, but, like the <b> tag, HTML5 adds a bit of semantic meaning, defining text as being in another voice or mood or offsetting text to signify a different quality without any extra importance. Most browsers will render this tag with an italic font styling by default, but the tag is meant to define a different semantic meaning to the words it surrounds in comparison to the rest of the text. For example, you would use this tag for things like a foreign language phrase to help display visually that it is in a different language, or words that are taxonomic in nature (e.g., the scientific names of plants, animals, etc.), but the phrase doesn't need to be emphasized as being important.

The Strong Element

The third tag is the <strong> tag. This tag is used to identify text with high importance, seriousness, or urgency. This tag effectively conveys a warning you wish readers to take note of or helps denote a passage that needs to be read before other parts of a document. By default, a browser will format this text as bold text.

Character Encoding!

When coding web pages, it is important to identify the character encoding. Character encoding correlates letters, numbers, and symbols to computer code. Each group of letters, numbers, and symbols is called a character set and is used to display textual information. This is important because various character sets have a certain number of available characters that can be used. If the character set for the web page includes a limited number of characters, like ASCII, then the browser may not display some of the information, or the text may appear as unintelligible glyphs if you try to use a letter, number, or symbol not contained within that set. For example, if you try to write something in Russian within the code of a web page with an ASCII character set, it may appear something like ÏâÞÖÕàÐÔÐ or as a question mark in a black diamond �. Many character sets exist, but the main ones are ASCII, ANSI or Windows-1252, ISO-8859-1, and UTF-8. ASCII was developed in the 1960s and has only 127 alphanumeric characters that can be used. ANSI, developed by Microsoft for their Windows OS decades ago, has 256 different characters available. ISO-8859-1 was the character set used for HTML4, with 256 different characters available as well. For HTML5, UTF-8, based upon Unicode, was defined as the default character encoding. Unicode covers nearly all characters and symbols in the world (more than 135,000), which allows you to develop websites in any language, and even includes modern-day emojis such as those you would see on a smartphone to represent smiley faces and the like. UTF-8 implements Unicode to simplify and facilitate communication between different languages as much as possible. This explains why UTF-8 is now the de facto standard for websites.

HTML Structure Elements

When developing a web page, you can think of dividing the page into different sections to group similar content together. Each section can be compared to a chapter in a book. Creating a web page involves dividing a single page into various content-related areas (e.g., news articles, contact information, introduction). These areas define the site's structure and create a format that users may recognize from other websites, which helps them understand how to view and interact with your website. A section contains three main components: the header, the content, and the footer. The graphic below shows a screenshot of the Rio Salado College homepage broken into three sections. The top section, labeled Header, includes the Rio Salado logo, navigation menu, and search bar. The center section, labeled Content, includes images, links, and information that a visitor to the web page will find useful. The last section, labeled Footer, contains social media links, contact information for the college, and miscellaneous links that a user might want to visit to learn more about the college.

Metadata Elements

While SEO consists of many components, metadata for the web pages is a basic component that all web developers should utilize. In general, metadata is information that describes a document, like the author, date created, date last modified, and more. In HTML, you can define some of this descriptive information within your HTML code using <meta> tags, <link> tags, and the <title> tag, among others. To add meta information, you must place the <meta> between the opening and a closing <head> tag. It is important to note that the information in the <head> tag will not appear on the page for the viewer. This information is hidden from sight and is mainly helpful to search engines. The <meta> tags are used to specify certain forms of metadata. You can define different types of metadata by using the name attribute. The name attribute indicates which type of metadata the tag contains, and you will look at three types of metadata within this course. They include author, keywords, and description, and these must be placed as the value for the name attribute. Social media companies have designed many other types of metadata that can be used, but you won't get into those now. After defining the type of metadata you want to include, you must include the content for the metadata. To do this, you need to utilize the content attribute. The value for the content attribute can be anything you want, but there are general guidelines you should follow to make the metadata the most useful it can be for your site. Let's dive into each of them now.

How-To: Define the Character Set

Within the Head element, do the following: 1. Place your cursor on an empty line. If needed, make one by pressing Enter after the previous element. 2. Add a meta tag. 3. Add a charset attribute to the meta tag. 4. Give the charset attribute the desired value to define the character set to be used for the web page. In the example below, the character encoding for the web page is defined as ASCII. Notice how the text in the preview window does not display correctly due to the limitations of the character set that was chosen. Try: Change the character set to UTF-8 to see how the text will display correctly.

Lesson Objectives

💻 Explain how to structure an HTML document. 💻 Describe the importance of meta tags and apply meta tags to a web page. 💻 Define character encoding and encode an HTML document. 💻 Utilize the basic structure elements to develop an HTML document. 💻 Utilize HTML elements to define text with special meaning. 💻 Use an HTML validator to find and correct coding errors. 💻 Describe and implement basic SEO best practices.