Stanley Brooks
Tags: Used to start <> and end </> an html element.
Elements: Used to describe the structure of web pages, generated by tags after the parsing phase, indicated by opening and closing tags. <opening tag> Contents </closing tag>
Metadata: Contains data about the website but is not scene by the end user. Typically used to provide information to web browsers or provide information for accessibility reasons.
ID: an element attribute that is a unique Identifier (only 1 per .html) used to target an element from another source. This source is often a stylesheet (CSS) or JavaScript file.
Class: an element attribute used to target multiple elements, often used by a stylesheet to target multiple elements that share the same style.
Attribute: Additional information about the contents of an element. These are in the opening tag of an element and have 2 parts: a name and a value separated by an equals sign.
Attribute Name: Indicated the type of additional information you are supplying about the element. There are lots of different attributes, ex: id, class, src.
Attribute Value: Information or setting for the corresponding name. These are dependent on the attribute that you are setting. These should be surrounded by “”.
<tag name=”value”> Contents </tag>
Attribute = name=”value”
Element = <tag name=”value”> Contents </tag>
<!DOCTYPE>: Tells the browser the filetype is HTML5.
<html>: Defines the file type for the browser.
<head>: contains metadata. <title> <meta> and <link>.
<title>: Sets the browsers title bar text.
<meta>: used for language type, tags for search engines, accessibility information and reflexive screen size.
<link>: used to link page to outside sources. I use it to link to my css style sheet, as well as Bootstrap CDN. Due to the nature of Cascading Style Sheets, the order here matters. It is usually best practice to put a framework link before a custom css link, that way your custom code will override the framework defaults.
<nav>: used to mark Site Navigation.
<div>: generic containers that are used to breakup content in ways that can be manipulated by the CSS stylesheet.
<article>: used to contain blocks of text with a similar topic. Think of these are modular pieces of images and text. Same as a div, but more specific.
<section>: breaks up site content into major sections. Same as a div, but more specific.
<a>: refered to as an anchor. used for hypertext links, usually contains a href=”” in the opening tag.
<h1>-<h6>: Header tags that are used to show importance of Headline, h1 being that largest and h6 being the smallest.
<img>: used to link to an image. Used with src attribute to point to a file. Does not need a closing tag. (Self closing).
<p>: paragraph tag used to show text content in the form of a paragraph.
<button>: creates a button that can be used for user input in lots of ways.
<script>: used to run script files, in this case JavaScript. This is commonly put at the bottom of the site so the page can load first, giving perception of improved site loading. Also where you add CDN’s (JavaScript and jQuery) as well as any custom JavaScript.
While writing HTML it can be frustrating using any of the reserved characters without using a named character reference. Here are a list of commonly used reserved characters and a cheatsheet for easy entry. You can also enter any character using decimal numeric character reference and hexadecimal numeric character reference as well, but for the purposes of this class, named characters are easier and more effective.
< <
> >
& &
" "e;
' '
( (
) )
[ [
] ]
{ {
} }
Alt Tags : Any time that you use an image on your site add an alt tag with a description. The alt tag is used by screen readers to appropriately describe what the image represents. It has an added bonus of being helpful if the resource fails to load as well.
When using an image as a link, use the alt tag to describe where the link is pointing to and not the image itself.
If an image has no impact on the article, it should either be added as a background in CSS or given an empty alt tag (alt=””), both of these methods effectively skip the image when browsing with a screen reader.
There is not a length restriction on the alt tag in general, however most web developers keep them under 125 characters because that is the limitation of JAWS (a popular screen reader)
When using abbreviations in alt tags, be sure to put a space between each letter. This makes screen readers say each letter individually instead of trying to pronounce it as a word. Ex: alt=”M I T” instead of alt=”MIT”.
Usually the best thing you can do is increase readability in general. Not only will this help users with varying levels of visual impairment, but it’s going to just be a better user interface for everyone. Use fonts that are at least 12px and when picking colors, try to use varying contrast.