The Internet isn't free. It just has an economy that makes no sense to capitalism.
Brad Shapcott, Senior Software Engineer, Amazon, 1995
The term tag or element is often interchangeable when people speak about HTML. In this course we will use the term tag when discussing the actual marking up of pages. However we will refer to them as elements when we discuss other features such as the difference between block and inline below.
All elements have attributes which can be attached to them. Elements like the anchor tag a must have the attribute href but can have other optional attributes as well. These are well documented in W3schools.
Attributes always follow the pattern of name/value pairs; the attribute is named followed by an equal sign and the value in quotes.
It is good practise to validate your web site. This involves checking that the HTML you have used is done correctly. In order to validate your site you must include a doctype which specifies which version of HMTL is being used. Some web authoring programs (like Dreamweaver) have validation built into the program.
There is an organisation called World Wide Web Consortium (W3C) which determines the standards for HTML, CSS and other web languages. All the major browser organisations are members and actively involved in the develop of the languages. However it is up to the browsers to work out how to use these standards and not all commands are done the same way. This is often frustrating for developers since they need to check their page in all browsers. Many browsers are ahead of the standards and offer features which are being considered. The site caniuse shows the current state play regarding new features of web languages and how they are supported by the browsers.
In regard to HTML the best validator is provided by W3C so it is best practise is to use that validator.
Some elements create a small area around them called a block or box. This block contains an area for a margin, padding and a border which can be styled using CSS. Other elements don't create this block and are called inline elements. It is good practise to place all inline elements inside a block element. Block elements can be placed inside other block elements.
Block elements include:
Inline elements include:
As you learn new elements you need to find out whether they are block or inline. As you get better with web development the relationship between block elements and CSS becomes more significant.
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. (W3C)
In short, the DOM is an internal and abstract representation of HTML documents. Browsers, on receiving HTML documents from a server, create an internal (in-memory) representation of the document. This representation or model can then be manipulated using Javascript and CSS.
Understanding the DOM is also very important to the presentation of content. It is critical to applying CSS to your HTML documents. You will see later in this course how understanding the DOM makes it easier to apply styles to elements.
Every HTML document is a tree structure. The DOM is a browser's representation of that tree. Trees are made up of nodes. In the context of HTML, these nodes represent HTML elements.
Every HTML document must have a root element.
In HTML it is the <html> element.
All other elements are children of the root.
The <html> element typically has two child elements - <head> and <body>.
Conversely, the parent of <head> and <body> is <html>.
Note that the document type declaration are not considered a part of the DOM tree.
On a html page your code will contain both markup and content.
It is important that the browser does not get these confused.
There are two ways to handle this.
First every page needs a meta tag in the head section which tells the browser what type of characters are used to code the page.
The other way is when you are writing content that contains any characters that are used in markup (especially <, < or ") you should use HTML Escape codes instead.
Look at the source code of this section of the page to see how that was done.
Accessibility is all about designing pages with people with certain kinds of disabilities in mind. The disabilities can range from vision to motor disabilities.
There are very good reasons why you should design you pages for accessibility.
Here's a great example of an accessible page. This is the home page of a disability civil rights law firm. You would expect the developers of this site to take special notice of accessibility practices - and they do. Have a look around the site, especially the help and accessibility page. What do you notice?
This resource has been developed to help web developers build web sites on the "principles of accessibility, universal design, and digital inclusion".
Try validating the markup and running it through an accessibility validator.
Australia has the dubious honour of the world's first big accessibility case. It's called Maquire v SOCOG, and occurred in the lead-up to the 2000 Sydney Olympics.
Read W3C's Cautionary tale on Maguire V SOCOG.
As you can see the main bone of contention was that SOCOG's pages used images for navigation. Images, by definition, cannot be 'seen' by the blind. That's why it is important to include the alt attribute on all inline images. This attribute (and its value) provides alternative text to screen reading devices so the blind user is able to hear what the image is about.
JAWS is a popular screen reader.
Throughout this course the pages will be have high accessibility by implementing the following practices:
The Commonwealth Government has determined that all their sites must meet W3C accessibility standards.
All commercial sites want to be found by search engines and want the top ranking. There are many companies that promise to do this for developers and there is a great deal of spam regarding this. However achieving SEO is surprising easy and following the best practise of this course is an excellent start. Google have produced a guide for web developers which show how to achieve SEO on the Google search engine. The basics are: