Debugging HTML

Here, we are looking at the developer tools. I'm already quite familar with these so I don't want to go into too much detail, but it's worth noting that when you select the Inspector tab or just right-click an element in the browser window and select 'Inspect' or 'Inspect Element', which should open the Developer Tools with the Element tab selected, you will normally see three panes. These show the HTML on the left, the CSS in the middle and other options on the right.

The HTML panel can be quite useful. It shows a representation of the DOM tree and it may be worth mentioning that this is not completely taken from the HTML code, but to an extent, it represents what the browser has interpreted as the DOM tree based on that HTML code. If there are errors in the code, the browser will try to work out what it is that you mean so it can, in effect, 'fix' the DOM for you!

It is also worth noting that looking at this on other websites, especially websites that you find interesting, can be a very useful learning aid or can help you in deciding how to structure your own HTML code. To give a real-life example of this, I recently saw a web site that used a series of drop down menus for the sites navigation. I like this although, as it happens, I didn't use the Developer Tools to find out how it was done. I used a more generic 21st Century solution and looked it up on Google. This led me to a YouTube video created by Dani Krossing which I followed in order to create the navigation menus at the top of this page. The video was very practical and easy to follow. It also taught me a little more about CSS which was a nice side effect. For reference, the video is shown below.

HTML Attributes

Some attributes in HTML are quite specific in that they are only used in a particular element. We saw an example of that earlier with the datetime attribute which is associated with a <time> element. In some cases, attributes can be used with several different elements and some attributes are global. That is, they can be used with any element.

The most commonly used global attribute is class which we can use to target CSS. For example, in this page, I use <h1> elements for both the chapter heading and section headings and I use a class attribute. The chapater heading has a class of "paratitle" and the section titles have a class of sectiontitle. I can apply CSS rules to either so that the chapter title is larger than the section titles and I could make them different colours, for example. The advantage here is that if I change the CSS rules for the class sectiontitle, this will change the styling for any of these headings in any page on the site. This assumes that any page has access to the style sheet containing the relevant CSS rules. One disadvantage here is that using <h1> elements for both means that we have lost a little of the semantics. This won't make any difference to how the page looks, but a computer analysing the page, or a human analysing the code may assume that both types of title carry the same weight. It would actually be better to use <h2> elements for the section headings so I may change these in the future.

Another similar attribute is id which is different from class, as the names of both imply, in that with class, you can have any number of elements belonging to that class. They don't even need to be of the same type. For instance, if I change one of my <h1> elements with class sectiontitle to an <h2> element of the same class, these will still look the same to someone viewing the class. Actually, I have just changed the section title HTML Attrbiutes to an <h2> element and reloaded the page in a browser. I can see that visually, there is no difference between the two and this would also apply if I added a <p> element and gave it the same class.

This contrasts with id because you can only have one element with a given id. For this reason, the id attribute is used much less often and is really just less useful than class. I guess you would use class for something like the chapter titles for these pages if you wanted each page to have its own unique style. The id attribute can also be useful when targeting a particular element with JavaScript or links. For example, if you want to be able to create a link to a particular part of the current page (something like jump to bottom or jump to top, you can use an id for an element near the bottom or the top of the page and create a link to jump to the element with that id. So, ids are very useful when you need to be able to uniquely identify an element.

Other global attributes include content-editable which allows you to make a section of your page editable by users. It is important to remember that the user can only edit this content in the page in the browser, they can't edit the HTML on the server so reloading or refereshing the page will make these changes disappear. In order to allow the content to be permanently edited, you need to do some fancy back-end coding, probably with JavaScript.

Some global attributes are used to tell the browser something about the language the web page is using. The lang attribute is the most obvious since it literally specifies the language. Another similar attribute is dir which speccified the direction in which the text flows. For example, if you hav ea dir attribute with a value of ltr, the language flows from left to right. Similarly, a value of rtl indicates that the text runs from left to right.

This paragraph has a dir attribute with a value of ltr.

This paragraph also has a dir attribute, but the value is rtl.

You might notice, and may be surprised by this, that the text inside the paragraph that flows from rtl is not reversed and this makes sense if you think about it. The browser assumes that the text insied the element is the correct way around so it isn't going to reverse it. As an example, if you were creating an HTML tag in a language that normally flows from right to left such as Hebrew, you wouldn't write the Hebrew text backwards and use the dir attrbiute to reverse it. What it does, however, is start the text from the right-hand side of the screen and puts the full stop as what it perceives to be the end of the line, that is the left end.

ARIA Roles

We have already seen some tags that can be used to add semantic value to the text, in particular to make that text more accessible to people with hearing deficiencies or visual impairments. As a rule, your HTML should be sufficient because modern HTML does provide those tags which are intended to assist screen readers and so on. Aria roles are really intended to address some of the shortcomings of HTML in order to make web pages more accessible and this has largely been superceded by tags like <strong> and <em>. You can get more information on Aria Roles in the Mozilla Web Docs.

It may be important to be aware of Aria Roles because there may be circumstances where Aria Roles can be very helpful. In the course video, Jen describes an example where she has the text, Hello World in a webpage, but she is doing some complex work with CSS so that each letter appears in different places on the screen in a way that seems almost random and to achieve this, each letter is enclosed in a separate <span> element. The problem here is that if this page is being rendered by a screen reader, it will enunciate each letter separately rather than reading these out as words.

This type of situation can cause problems with accessibility and we can use Aria Roles to resolve this. Typically, the HTML code might look something like this.

	<h1>
		<div class="grid">
			<span>H</span>
			<span>e</span>
			<span>l</span>
			<span>l</span>
			<span>o</span>

			<span>w</span>
			<span>o</span>
			<span>r</span>
			<span>l</span>
			<span>d</span>
		</div>	
	</h1>

With each letter contained in it's own span, it is possible to style the letter individually in order to get some unusual effects. In the developer tools, there is an Accessibility tab where we can see something that resembles the DOM tree. This is the accessibility tree and just as the DOM Tree is derived from the HTML, the accessibility tree is derived from the DOM tree. This is what a screen reader (to give an example) will use when determining how to enunciate the page content and given the example shown above, we can see that each of the letters in Hello World is a leaf in this tree. As a result, a screen reader will read these out as separate letters. To illustrate this, I have repeated the code below to show what this will actually look like in a browser (note, I haven't done any fancy styling with it so it jusu looks like a blob of text in the browser window.

		H
		e
		l
		l
		o
		
		w
		o
		r
		l
		d

The image below shows what this looks like in the accessibility tree.

Now, one way to fix this so that our page still looks exactly as we want it to (that is, with each letter in its own tag so that it can be styled individually) is to use an Aria Role. To do this, we will give our <h1&ht; tag an attrbiute called aria-label and this will have a value of "Hello World". All of the individual letters are inside a <grid> element and we will give this an attribute called aria-hidden with a value of "true". The aria-label is a little like the alt-text value for an image and it tells a screen reader what to read out for this portion of the HTML. The aria-hidden attribute means that the <grid> element will be hidden from the accessibility tree which will prevent a screen-reader from enunciating each letter individually. The amemded code will look like this.

	<h1 aria-label="Hello World">
		<div class="grid" aria-hidden="true">
			<span>H</span>
			<span>e</span>
			<span>l</span>
			<span>l</span>
			<span>o</span>

			<span>w</span>
			<span>o</span>
			<span>r</span>
			<span>l</span>
			<span>d</span>
		</div>	
	</h1>

Again, I will repeat the code below so we can see what this looks like in the page.

		H
		e
		l
		l
		o
		
		w
		o
		r
		l
		d

We can see that it looks exactly the same. Now, let's see what this looks like in the accessibility tree.