C779-Chapter 2 - HTML5 Coding

home page

The default or starting page of a Website

A tag can consist of the following three items inside the angle brackets:

►An element ►An attribute ►A value Some elements, such as <br>, do not use attributes or values. Others, such as the <a> element, are almost always used with attributes and values.

text-level elements

A markup element that affects single characters or words Elements that can affect something as small as a character or a word Text-level elements are not followed by breaks unless the breaks are manually added.

What is the difference between a container element and an empty element?

Consider that a container element must contain the text that it formats between opening and closing tags.

Tag nesting in markup

Placing a pair of tags within another pair of tags is called tag nesting. You must ensure that your code is properly nested. Proper nesting means that you must open and close a pair of tags within another pair. Similarly, heading tags (e.g., <h1>, <h2>) should not be used within formatting tags (e.g., <em>, <p>). This tag combination constitutes improper nesting because the elements are incompatible, and will therefore prevent your code from validating.

Indenting Text

The <blockquote> tag indents a block of text. As its name suggests, it is often used to specify quotes within a Webpage. The <blockquote> tag has a cite attribute that specifies the source of the quote. Do not use <blockquote> tags within <p> tags, and do not use <h1> tags within <blockquote> tags. Doing so will prevent your code from validating.

centering text

When you want to center a paragraph of text, you must use an inline CSS3 style attribute in the paragraph tag. <p style="text-align:center"> This text is centered. </p> You can use the style attribute for many formatting functions. Most often, you will use it to format content in an individual HTML file when you are not using CSS3 or when you want to override the external CSS3 file. You can also use the style attribute to justify items to the right or left on a page.

fixed-width font

A font in which every character, including the space character, has equal width. In proportional-width fonts, letters such as I and J have less width than M or B With the preformatted text tag (<pre>), all line breaks and spacing will be displayed in the browser exactly as they appear in the original text. The <pre> tag does this by preserving line breaks, tabs, and multiple spaces where text in other tags do not do this. The text will display in a fixed-width font, usually Courier. The <pre> tag allows you to display plaintext files in their original format. It is commonly used to display tabular data. The <pre> tag is a container tag, requiring a closing </pre> tag. (display preformatted tabular data if you have no time to format it.)

block-level elements

A markup element that affects at least an entire paragraph Markup elements that affect an entire paragraph or multiple paragraphs Block-level elements are automatically preceded and followed by paragraph breaks. The most basic block-level element is the paragraph element. <p> </p> The <br> tag inserts a simple line break into the document The <br> tag does not use a separate closing tag, so it follows a unique tag syntax. A closing slash is appended to every line break tag to make it a stand-alone non-empty tag, as follows: <br/>

Unicode

A universal character set designed to support all written languages, as well as scholarly disciplines (e.g., mathematics).

lists

Lists are compound, block-level elements. Encompassed within list definition tags are individual list item tags A paragraph break automatically precedes and follows the entire list. Individual list items are separated automatically by single line breaks. There are two types of lists: ►Ordered list — a numbered list. Uses the <ol> element and requires a closing tag. ►Unordered list — a bulleted list. Uses the <ul> element and also requires a closing tag. List item — specifies list items in an ordered or unordered list. Uses the <li> element and requires a closing tag. HTML5 also supports description lists. A description list is a list of terms with a description of each term.

attribute

specifies a quality or describes a certain aspect of the element. For example, a hyperlink is added to a Webpage by using the <a>, or anchor, element. The href attribute is added, which identifies the hyperlink reference. Many elements require specified attributes, but some do not. An attribute is required in a tag only if the element requires it.

Heading levels

Denoting text as heading elements emphasizes the start of different sections on your page and draws attention to that text. Heading tags have built-in styles associated with them. HTML uses six heading styles. Heading tags are container tags that encompass the affected text. The largest heading is level 1. Heading level 4 text is rendered the same size as normal text. Heading levels 5 and 6 are smaller than normal text and should be used sparingly, if at all. Because headings are block-level elements, they are automatically preceded and followed by paragraph breaks, regardless of the relative position of the element to other text in the source code. It is important to note that you cannot place any header elements within a set of <p> </p> tags. If you do, your code will not validate as HTML5 and it may not render properly

Are HTML tags case-sensitive?

HTML tags are not case-sensitive, but older XHTML tags are case-sensitive. Because XML is case-sensitive in that it requires strict conformance to letter case specified in a given DTD, it was decided that all XHTML document elements and attributes should be developed in lowercase letters to ensure consistency, compatibility and conformance. The benefit to writing code in lowercase is that the code is now compliant with both HTML and XHTML, and will render in all user agents that follow W3C standards. This practice has been widely adopted for all HTML coding.

Readability

Line breaks and indentations both make code much easier to read and understand Exceptions n some cases, you may find it impossible to make the code more readable without affecting the way it renders in the browser. With older XHTML code involving images or the <div> tag, you may find that entering random white space can affect rendering in certain browsers. Always try to make your code readable, but verify that it renders properly

Forward-compatibility

Remember that good coding practice involves writing code for forward-compatibility. That means you should always make your code cleaner to allow an easier transition to updated standards in the future. Such practices include: ►Closing all tags. ►Using lowercase letters within tags. ►Surrounding attribute values with quotation marks.

Responsive Design

Responsive design implementation is the hallmark of a modern Webpage. Responsive design Webpages are built using fluid grids, flexible images and media queries. These have the advantage over fixed width grids in displaying flexible and dynamic Webpages. In responsive design, all the elements on a Webpage will resize their widths in relation to one another as the screen size changes.

<!DOCTYPE> declaration

The <!DOCTYPE declaration is the first tag in an HTML document. It informs the interpreter (usually a Web browser) what version of HTML the Webpage is written in. Previous to HTML5, the <!DOCTYPE> declaration was an SGML statement and required a fairly complex declaration. An empty tag that declares document or code type within an HTML, XHTML, XML or SGML document; identifies the version and markup language used. In HTML5, however, the tag is written as only <!DOCTYPE html>. HTML5 is not based on SGML, so the traditional <!DOCTYPE> declaration is not required and there is no DTD required. The declaration is not case-sensitive, but it is almost always written in uppercase letters by Web developers The <!DOCTYPE> declaration can help you create a more efficient interface Previous HTML and XHTML documents were different because the <!DOCTYPE> declaration included a Document Type Definition (DTD) file which referenced a specific HTML or XHTML standard. The DTD file is no longer required in HTML5. For example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html> tag

The <html> tag is used as a container for the entire HTML document. It nests all code except for the <!DOCTYPE> declaration The opening <html> and closing </html> tags must encompass all markup for the entire page. The <html> tag can include several attributes, including: ►manifest — an attribute used for offline browsing. It lists the address of the HTML document's cache manifest. The manifest attribute requires each page you want cached to include the attribute. This technique is considered more reliable than a traditional browser cache. ►lang — configures the page to use a particular language. For instance, a Web document written in English would use <html lang="en"> and a document written in French would use <html lang="fr">. This attribute is helpful for search engines and speech synthesizers. It is a universal attribute that can be used with many different elements besides <html>. ►xmlns — If your content needs to conform to XHTML, then specify the XML namespace attribute The default entry is xmlns="http://www.w3.org/1999/xhtml"

<link> tag

The <link> tag references a style sheet and is recommended for HTML5. A style sheet usually has a .css file name extension and a file name similar to the page to which it is linked (e.g., aboutus.css for the HTML page named aboutus.html). Style sheets are often placed in a subdirectory for the Webpage. This subdirectory contains all images and associated files for the page. The <link> tag is placed within the <head> container tags.

<meta> tags

The <meta> tag can specify various information about the document, known as metadata. This metadata can include a document description, revision dates, and keywords to help search engines index the page. It also specifies the HTML5 character set used, which is usually UTF-8. The <meta> tag is placed within the <head> container tags. Attributes of the <meta> tag include the following: ►charset — specifies the character set used in HTML documents (which is often set by the Web server for HTML documents, rather than by the document itself). It usually specifies the Unicode character set, which is standard in today's Webpages:<meta charset="utf-8"/> ►name — values include "keywords," "description", "robot", "viewport" and "author. " This attribute must be accompanied by the content attribute. The "keywords" value of the name attribute allows you to specify individual words as the value in the accompanying content attribute. The "description" value of the name attribute allows you to specify entire sentences as the value in the accompanying content attribute; these sentences display in search engines to describe the purpose of the document. The "robots" value of the name attribute is used to instruct search engines whether or not to index your page and follow the links on your page. The "viewport" value of the name attribute is used to define the user's visible area on the Webpage. This value allows you to control the dimensions and scaling of the page to optimally display a Webpage on different sized devices. ►http-equiv — provides an HTTP header for the information of the content attribute. Is useful when you do not have access to your server's configuration. Values include "content-type", "default-style" and "refresh". The "content-type" value of the http-equiv attribute specifies the type of character encoding in the document. The "default-style" value of the http-equiv attribute specifies the preferred style sheet that will be used. The "refresh" value of the http-equiv attribute specifies a time interval for the Webpage to refresh itself. The "refresh" value should be used sparingly, if at all. ►content — When paired with the name attribute, the content attribute values can supply keywords, author name, page descriptions and so forth, as previously described. The content attribute essential in search engine optimization purposes examples <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="description" content="You can enter a useful description of the page here. You can use sentences, as you would in an email or letter, but keep it concise."/> <meta name="author" content="Rosa Estelle Rodriguez"/>

<head> tag

The head section allows you to insert <meta> tags (which describe the nature of the document), links to style sheets, and the <title> tag. The head and </head> tags encompass several page elements, including: ►The meta tag. ►The link tag that references a CSS3 file, if present. ►The title tag. ►The script tag which is used to define a client-side script.

<body> tag

This tag begins the body of the document and includes all the content of the Webpage, such as the text, video, hyperlinks and images. The <body> tag is placed after the <head> tag.

<title> tag

This tag identifies the document title. Most browsers will display the title in the browse's title bar. The <title> tag is placed within the <head> container tags.

Adding hidden comments

You can hide comments within your HTML source code that will not appear on the page. The syntax for including a comment within your HTML document is as follows: <!-- comment text here --> When creating markup pages, you can use comments to: ►"Comment out" code to see how a page will appear without a particular markup element. ►Inform others about important elements in the code you are creating. ►Remind yourself why you inserted a particular piece of code. ►Insert programming code, such as JavaScript.

Universal markup and consistency

another facet of good coding practice is creating universal markup that applies W3C standards consistently and thus renders consistently across most or all browsers. Remember to choose one HTML standard for your Web document, pages or site, then apply that standard carefully and consistently throughout. Inconsistency is mostly an issue with the older HTML standards because their looser rules allowed some sloppier coding practices to render without penalty. Keep in mind that you should understand the requirements of whichever standard you are using, and be particularly aware of syntax and tag usage.

value

gives value to the element and its attribute. For example, <a href="http://www.ciwcertified.com"> has a value that instructs the hyperlink to access the CIW Certified Website. Like attributes, values are optional in a tag unless required by a specified attribute to the element. Values are used only with attributes; elements do not take values directly. Values should be surrounded by quotation marks; they are not required, but placing values in quotation marks is considered good coding practice.

element

provides the main instruction of the tag. An element is required in every tag. Elements include <body>, <p>, <h1>, <title>, <table> and many others.

HTML elements

specific components of an HTML document that can provide content and attributes to a Webpage Each element provides meaning to the page, such as identifying the title of the document or specifying where a video or audio file should be placed. These elements are interpreted by Web browsers and other user agents so that the Webpage renders properly. In a nutshell, HTML documents can be described as a collection of elements. Without elements, a Webpage would have no structure or formatting.

Container tags

tags that come in pairs. Container tags use starting and ending tags. For example, when you want emphasis (italic) text, you will contain the text between starting and ending <em> </em> tags. These tags are also called the opening and closing tags.

Empty tags

tags that stand alone. Empty tags are those that do not directly format a specified block of text, and therefore one tag can execute the instruction. For example, if you want to create a line break, you insert the <br> tag at the point you want the break to occur. Empty tags are also referred to as self-closing tags.

HTML5 documents usually contain most of the following document structure components:

►<!DOCTYPE> declaration ►<html> tag ►<head> tag ►<meta> tags ►<link> tag ►<title> tag ►<body> tag Sample <!DOCTYPE html> <html> <head> <meta name="keywords" content="HTML5, basics, elements, tags"/> <meta name="author" content="Sampson Avilla"/> <meta charset="utf-8"/> <link rel="stylesheet" type="text/CSS3" href="stylesheet.CSS3"/> <title>HTML5 Structural Elements</title> </head> <body> </body> </html>

Phrase Element

►<em> For emphasis italic text ►<strong> For stronger, bolder text bold text ►<dfn>For word definitions italic text ►<code>For program code examples fixed-space font ►<kbd>For user keyboard text to be typed fixed-space font ►<samp>For program sample output fixed-space font ►<var>For variable text in program code italic text

If you do not specify a <!DOCTYPE> declaration, then two problems may arise:

►You may not be able to control how your code renders in the future. ►You will not be able to use a markup validator, because the validator cannot determine the type of markup you are using (e.g., HTML5, XHTML Transitional or HTML 4.01).