Step 2: HTML Code Guide
Now that you have seen what our completed syllabus looks like, and the code behind it, let's explore each HTML tag as it appears from top to bottom.<html>
Our page begins with the <html> tag and ends with the </html> tag. These are used to identify the webpage as an HTML file and must always be present.
Note further, that nearly all HTML "opening" tags (i.e. <html>) are accompanied by a "closing" tag (i.e. </html>). All content within a particular set of tags takes on the attributes of those tags.
<head>
Next come the <head> tags. In this example, the only objects within our head tags are the <title> tags. A title is used to identify a page. For example, <title>Insert Title Here</title> would display the text "Insert Title Here" at the top of a user’s browser window.
<body>
After the closing head tag, we come to the opening <body> tag. The body of an HTML document contains the content will actually be displayed to visitors in a browser window.
Note that the closing </body> tag in our file is located just before the closing </html> tag. Hence, everything between <body> and </body> determines what users will see when they browse to our page.
<h1>, <h2>, and <h3>...
Tags beginning with the letter "h" and followed by a number are known as headings. Headings are used to structure pages and focus attention on certain lines of text. Although our syllabus uses only three heading levels, HTML supports up to six, with <h1> being the largest, and <h6>, the smallest.
<img...>
Under the heading "Course Description" is an image. Image tags differ from other HTML, because they do not have a closing counterpart. All of the code for an image is contained within a single tag that has a number of possible attributes. An image opens with "<img", is followed by its attributes, and then closes with a ">". See the example below and its accompanying descriptions.
<img src="foldername/filename.extension" alt="short description" longdesc="filename.html">
All attributes follow the same basic formula that is demonstrated above. They start with the attribute name, then an equals sign, which is followed by a value that is always contained in quotation marks.
The first attribute inside the image tag is the source, designated as "src". This tells the webpage where an image file is located relative to the page. In our syllabus, the source attribute looks like this: src="images/me.png". This means that the file "me.png" is located inside a folder named "images".
The second attribute is "alt" or alternate text. This is displayed to users who cannot load a particular image, such as mobile users, individuals with slow connection speeds, and those using screen readers. Alternate text should always be a concise description that gives the user an idea of what the image is in just a few words.
The third image attribute is the long description, "longdesc", which is important to making visual content accessible. A long description contains a reference to a separate HTML file that provides a more detailed explanation than can be covered by alternate text. It is most relevant to use when the content being displayed reveals information beyond its surrounding text, such as with maps, graphs, or data tables. The sample syllabus image directs users to the "john_desc.html" page for an extended description of the image.
<p>
Following the image is a <p> tag or paragraph. This is one of the most commonly used HTML elements, as it places text into a default paragraph format. All text contained within <p> and </p> tags constitutes a single paragraph.
<strong> and <em>
Within this paragraph, the word "John" has been both bolded and italicized. Strong tags are used to make text bold. Em tags are used to make text italicized. Only text contained within one of these two sets of tags will be affected by them.
Note that, in our syllabus, the word "John" has both strong and em tags around it. This demonstrates an important syntax rule in HTML. Essentially, tags are always closed in the opposite order that they are opened. For example, an HTML file begins with the <html> tag, followed by all of its various opening and closing tags, and then ends with the </html> tag. Likewise, the aforementioned word "John", begins with a <strong> tag, followed by an <em> tag, then a closing </em> tag and a closing </strong> tag, which allows it to be both bold and italicized.
<a...>
The subsequent paragraph contains a hyperlink, which opens with "<a", is followed by at least one attribute, a ">" symbol, the display text, and closes with an "</a>" tag.
For instance, the entire code for a link could appear as follows: <a href="filename.html">Display Text</a>. The href attribute tells a hyperlink where the linked file resides. It can be either a relative path to a nearby file (i.e. "john_desc.html") or an absolute path to an external website (i.e. "http://vudat.msu.edu"). The display text, which is contained between the two hyperlink tags, is what will be shown to users of the webpage. In this example, users would see "Display Text" and would be taken to "filename.html" after clicking on it.
<ol>, <ul>, and <li>
Under the headings for "Course Objectives" and "Technical Requirements" are two separate lists. The former uses <ol> tags, which stands for "ordered list" (think 1, 2, 3...). The latter uses <ul> tags, which indicates "unordered list" (think bullets). Regardless of the type of list that is chosen, both use an identical format for the points within the list, called "list items", which are represented by <li> tags.
All lists begin and end with either the <ol> or <ul> tags. Contained within them are any number of <li> tags that compose the various items of the list. Consider the following two examples.
<ol>
<li>This is my first item.</li>
<li>This is my second item.</li>
</ol>
yields...
- This is my first item.
- This is my second item.
...whereas...
<ul>
<li>This is my first item.</li>
<li>This is my second item. </li>
</ul>
yields...
- This is my first item.
- This is my second item.
Return to: Creating an Accessible Syllabus