The current standard recommended by the W3C is HTML5. HTML5 includes features of both HTML and XHTML and new elements have been added. Additional new features include form edits and native video. It is intended to be backward compatible.
You are required to create well-formed documents that validate as HTML5 in your course work at MCC.
HTML5 includes features of HTML and XHTML. The syntax used is streamlined and a bit easier to use. HTML5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes,an attribute had to have a value and to close all empty elements. However, even though your code will be valid without some of these items, we feel some level of consistency is in order. So, when writing your HTML 5 code in your web classes at MCC, we are requiring that you follow these "best practices" to help you create clean and consistent markup.
All well-formed HTML5 documents are required to have the following elements: a Document Type Definition (DOCTYPE), HTML, HEAD, TITLE, and BODY.
Document Type Definition
The first tag you must put in your HTML5 document is the Document Type Definition (DTD). A DTD (commonly called the DOCTYPE) basically defines all the rules of HTML syntax. This line of code is called the DOCTYPE declaration and it tells the browser which DTD we are using for this document.
<!DOCTYPE html>
HTML Element
The HTML element basically tells the browser the content of the file is HTML. The opening <html> tag follows the DOCTYPE declaration. The closing </html> tag comes at the end of your document. You will need to include the lang attribute to define the language used is English.
<!DOCTYPE html>
<html lang="en">
</html>
HEAD Element
The content in the <head> element does not display in the main browser window. Instead it tells the browser important information about the web page, such as where the CSS is located, and what the title of the web page is.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</html>
TITLE Element
The<title> element contains the title for the document. This information is not displayed in the browser window, but it does display in the browser's title bar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to write well-formed XHTML</title>
</head>
</html>
META Tag
The meta tag is used to describe a characteristic of a Web page, such as the character encoding. Meta tags are included in the head section of a web page. Character encoding is the internal representation of letters, numbers, and symbols in a file such as a Web page that is transmitted over the Internet. There are many different character encoding sets. But it is recommended that you use a character encoding set that is widely supported, like utf-8.
You must include a meta tag that defines the character encoding set on all web pages created as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to write well-formed XHTML</title>
<meta charset="utf-8">
</head>
</html>
BODY Element
The <body> element contains all of the content that will be displayed in the browser window (except for comments).
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to write well-formed XHTML</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
The comment tag is used to insert comments in the source code. Comments are not displayed in the browser and are used to explain or document your code.
<!--This is an HTML comment-->
You must include a comment as the first statement in the body of all HTML documents that includes the following:
- Student Name
- Filename
- Course number
- Instructor last name
- Creation date
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to write well-formed XHTML</title>
<meta charset="utf-8">
</head>
<body>
<!-- Student Name
assignment2.htm
INFO1311.WW
Instructor Last Name
9/7/13
-->
</body>
</html>
However, we require that you continue to use lowercase for all HTML tags and attributes because we are used to it, it’s easy to read, and it looks cleaner. It is more difficult to type markup code in uppercase.
<P ALIGN="left">This is NOT recommended.</P>
<p align="left">This is required.</p>
In HTML, quotes are not always required. But they are required in certain circumstances. We require you use double quotes on all attribute values. This ensures future maintainability of the code and keeps the code consistent.
<p align=left>This is NOT recommended.</p>
<p align="left">This is required.</p>
In XML, all tags MUST be closed. In HTML, this is not a requirement. You do not need to include the slash at the end of stand-alone tags. Some examples of stand-alone elements include <meta>, <img>, <input>, and <br>.
<p>This is our recommendation.<br> <img src="recommend" alt="Recommend"></p>
It isn't necessary to close stand-alone tags. However, we require that you use the open and close tags in tags that are coded as a pair. The purpose of a closing tag is to tell the developer or the HTML parser where the enclosed content ends. So, if an element cannot have any enclosed content, (which means it’s technically a stand-alone or void element), then there should not be a closing tag or closing slash.
When validating HTML5 pages, you’ll notice that you could include stray paragraphs without closing them. But “valid” pages don’t necessarily equate to good markup. So we require that you close all elements that actually contain, or are intended to contain, content.
<p>This is NOT recommended.
<p>This is required.</p>
Use a new line for every block, list, or table element, and indent every such child element. Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line. Also, indent them if they are child elements of a block, list, or table element.
Sample format:
<body>
<ul>
<li>Student Name</li>
<li>Filename</li>
</ul>
</body>
Provide alternative contents for multimedia. For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access. For images that means use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available. Providing alternative contents is important for accessibility reasons: A blind user has few cues to tell what an image is about without @alt, and other users may have no way of understanding what video or audio contents are about either. (For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in alt="".)
Must include the src, alt, height and width attributes in the image tag.
<img src="logo.gif" alt="Logo image" height="90" width="240">
It is acceptable to either include or omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols.
<a href="//myway.mccneb.edu">MyWay</a>
Please include a comment as the first statement of all CSS documents that includes the following:
/* Student Name
File name
Course number
Instructor Last Name
Creation date
*/
(adapted from the Google Style Guide)
Updated: March 8, 2022