 things that are sort of about the quality of HTML and what it displays and the first question is what is correct HTML one of the nice things with HTML but it's actually a bit problematic is that browsers modern browsers are really really good at displaying incorrect HTML at displaying even pure garbage they do that in a very nice way so for example you have learned that a paragraph should have a paragraph and tag if we just add another p tag in the beginning and we just forget about the n tag it will still display it properly somehow we can do the nesting wrong we can for example do a paragraph and then it contains a b tag and that means at first the b tag should be close than the p if we reverse it the chance is that the browser still displays it very well so oftentimes and I had lots of discussions previously with students about their assignments I get complaints that the website looks exactly as we wanted to look but still it's not full points it's not perfect and the reason is in many many cases that it's incorrect HTML now we are not just being picky about incorrect HTML because we want to be but the problem is if you use bad style or if you write HTML that is not correct it might lead to errors in cases that you are not aware of one of them is simply that you might look at it with a different browser or a different browser version and suddenly it looks different than it does on your machine so it could be that you simply break the website for some people and you're not aware of it the other thing is once we use CSS and once we use JavaScript we want to automatically process the HTML we want to add layout we want to maybe change the look of the website when when a button is pressed or when the user does something or finally maybe an automated tool like a search engine is looking at your code so they somehow parse your HTML code and then if it's incorrect this might lead to errors and believe me in particular writing code and and trying to find an error in your code if the error is actually in your HTML can be really really painful and can take a lot of time so that there you have to be really careful that you get HTML correct and therefore there are style guides how to give basically give advice what to do and how to write good code and there is a validator for HTML and we'll look at both of them so they help you to figure out to write proper HTML and the style guide is a nice start so you can look at that it's the reference number three here so if we just open that you'll get some advice on how to code so for example something we'll get to in a second but usually a recommendation is to use a syntax that is close to the X HTML standard the writing code but that's we'll get more there later then you should use the correct document type because if you use a different one then maybe the browser interprets it wrongly and things like that so these are basically recommendations that make your code more readable close all HTML tags so actually in HTML 5 you are not required to have all the n tags but you should do that as a convention so if you start it you should also end it because you never know what will happen in the future for example and I already mentioned it for empty HTML elements it's kind of a good convention to add this end indication that basically helps so these are just some recommendations how to do it nicely so that you can read things but then you have the validator so that's reference number four here and the validator checks against the standard so you can you can send in a URI or you can upload a file or you can even just paste HTML code and it checks whether it's correct or whether you're actually violating some recommendations and you can of course look at a standard and you can try to figure out what are all the things that I have to do but the best way here is simply learning by doing so you could for example let's take the basic one you could just take this HTML code paste it in here and do check and then it will display you all the problems so here we only have one warning it says well maybe you want to add a language attribute so that it's clear which language we're using and why we want to do that we can get to later but there are no errors here but for example if I forget the end tag for the body it might give me a an error no it doesn't so that's then because HTML5 does not require me to close it however there are other things that might produce an error one of them is that the title is a required tag as far as I remember so if I remove the title I'll get an error saying the element head requires a title so that's something you should fix and let's just fix this here so now it's validating again and this will also find problems such as the nesting so if I for example do the paragraph I do some text then I use a B tag and then I end my paragraph and then I add my B tag it should hopefully complain so you'll see that and tag P is seen but there are still some open elements that you haven't closed B should be closed so this is one of those cases where the validator can help you and in this course we are extremely picky that your code is free of error so whenever you submit something you should make sure that it validates without errors warnings are fine for us and we do this as discussed because this is really relevant in practice and it's generally a good practice to do that so you should always make sure that your code validates correctly so make sure to check that now we talk about xHTML as you have seen that was the recommendation in the style guide to use xHTML syntax conventions and xHTML is an older standard which is basically html in in XML format that's a different markup language xHTML is stricter so it it is basically putting a lot of requirements on you and it's understood by all browsers the good thing is it can be parsed by by XML parser so there are lots of tools lots of libraries that can process XML automatically so that works and you can also validate it in the validator so that's also possible xHTML is slightly different it basically the first tag is not the dog type but instead you have this XML tag which is required because otherwise it's not valid XML then the dog type itself I showed this in the beginning it has this rather cryptic definition but that basically defines use the xHTML one transitional standard and then finally the HTML tag has this additional XML namespace tag so that's correct xHTML but then there are a number of additional restrictions one of them is xHTML is case sensitive so there is a difference whether you write a ref like this or like this so it wants to you to use lower case whereas in regular HTML you can just do that however you want it doesn't matter xHTML requires you to end the empty tags so it's not okay to just do like this and you have to have the m tag so as we discussed html 5 is fine with with this xHTML is not you have to have all n tags attribute values need to be in quotes again this is something that html 5 does not care about so this is perfectly fine this is xHTML and finally the nesting has to be correct even though as we have just seen that also is the case in html 5 to some extent and now as I've discussed in the style guide the recommendation is to use these syntax guides so even though you don't require all of this in html 5 it's good practice to follow that because it makes things more readable good but you can see that in the validator you can also validate xHTML easiest is maybe if we go to the file upload because they can explicitly select you can say that we want is to be xml 1 xHTML 1 now if I select the file all the files I have are html 5 so they should actually cause problems in the validation so you see if we check this seven errors and a lot that has to do with for example the xm xml namespace attribute that I've discussed is not there I'm using an attribute that doesn't exist I don't know what why this is the case I had probably next xHTML so that the lots of things I haven't closed my empty tags and so on so you see that xHTML is much more strict than html 5 if I use html 5 here there should not be any errors sorry I have to upload it again see and now there's only one warning so whether or not your html is correct depends also on the version that you using xHTML pure xHTML is really not used so much because html 5 really has more features is nicer and xHTML has basically disappeared so not many people are using it the reason I show you is is really the recommendation we have to see in the style guide most people use the syntax recommendations of xHTML as a recommendation and this is really to avoid errors like you do with coding conventions in other programming languages good html 5 is as I discussed initially it's a living standard it has somehow at some point it has moved away from the fixed standards and was developed by a different group that's really not so important the important thing is that really it's the D standard that is used nowadays what they did is they removed some old elements and that's mainly stuff that was in html for layouting so in the very beginning there were lots of tags that were used for layouting for example you had a tag called center to centralize text and the argument is to say that center or layouting is not a concern of html you should use CSS for that so they removed this kind of stuff and then they added a number of other features so for example you have the svg tag to display vector graphics you can define that you have additional tags to display media like video audio and there are some kind of other features like drag and drop so they added some new stuff if you want all the details on that you will have to look it up in the first two literature references there is quite some detail on that the other thing that is really really important are so-called semantic elements so html 5 introduced certain elements that in a in a regular browser they don't show in any different way but they have a special meaning so it's similar to a diff they don't really have any style they don't have any layout but they have a meaning to it and that's for example the article tag and if you put text within the article tag it simply means that this is somehow an article if you put something in main it means well this is the main part of the website if you put something in nav it's the navigation part of the website so what this does is it just gives a meaning to your content otherwise if you have a p tag a paragraph it's impossible to tell whether this is a detail whether it's a header whether it's a main part so you only know it's a paragraph you don't know what the meaning is of it and that's changed with these semantic elements and the big question here is of course why would you do that because you can also just use diffs right you could just use a diff and you can if you want to say that it's a header you could give it a class name for example so the question is why and the main answer to that is accessibility and this is something this is a concept that many people sadly don't care about but it's getting more and more increasingly important one of the things we had in the very beginning is that there are different needs in the worldwide web I mentioned I showed you the statistics on internet use and therefore example we saw that in Iceland you have 96% using the internet in Africa is 21% so internet access is of course one of the things the other obvious things you might have are that people are using different devices I'm using a laptop here you can use your smartphone you have different operating systems you have different browsers and so on we don't think about it much but we obviously have different internet speeds if you go to areas where there is not much network coverage or if you go to countries that are not as developed you might have internet speeds that are really really slow and of course it's finally also the people you might have blind people or people with color blindness or you might have people that have that are like aesthetics that have harder time to understand or read certain parts you might have different impairments and this is where accessibility comes in so the idea is to say that the web is really designed it should work for all people it doesn't matter what what kind of hardware they use software language location ability so really you should make your website as usable as possible and the goal of the World Wide Web is to make it accessible to all of these people this is of course especially important if you for example are working for a government you might be required to do that if you are doing for example a healthcare provider website you have to make sure that everyone can access it so you have to support for instance blind people and not so important but it might be an extra motivation if you have an accessible website it also means that search engines find it in an easier way now how do you make a website accessible one is one way of doing that is reading reference number six which shows you a lot of different ways of making your website accessible five also has some practical tips but basically what it means is your website is easier to process automatically and this is where the semantic elements come in so if you use a header tag you tell the tool that is processing your html code that here is a header your diff does not tell that because this here is just some text and an automated tool will not be able to figure out that header means this is the header part of your website so imagine for instance you're blind then you probably want to use a tool that automatically reads the html code and reads it out loud to you so the sound in your phone or in your laptop actually tells you what is on the website and that way if you have these semantic elements is much much easier to figure out for example i want to read the main part of the website then maybe you should use the main tag images for instance should have the alternative tag as we discussed before the alternative attribute sorry so this kind of additional text that gives you a description of what is in the image because even if the image file is found if you for instance blind then you need this text explanation you could also be using a tool a browser that simply does not have a graphical front end and then you cannot see the picture so you might want to have the text hyperlinks can have titles so you can give them the title attribute and then you know the purpose of the link so you don't only know where it's going and what it says but it also tells you sort of what can you expect if you click on here so again if you have a tool that reads your website it can tell the user follow this link to get more information on cats metatags we have seen so they give you additional information on the website for example the keywords and again this is something for automated processing this is mainly about automated processing hearing blind people other impairments but you should also think about internet speed browser compatibility age of users culture and so on so internet speed for example tells you maybe you should not use super high resolution pictures for everything because then in some regions people will simply not be able to use your website it's too slow or you should not use any features that you know only work in a certain browser in the first lecture we have seen the example of of this one design website that was made compatible only for a certain amount of browsers that's really bad practice and then we have more soft issues that have to do with the content or what you put in there so age of users is often it's of course not always but it's often related with more difficulties to work with electronic resources for instance so maybe there's a way of making it easier for them to understand it for example it doesn't require lots of technological knowledge or skill there might also be cultural issues so this is something to think about but it's more on the content level not how to write the code but this is really really important last year we had a guest lecture on accessibility among others and they showed a tool called google lighthouse which is an automated tool that looks at your website and it tells you essentially how good it is in terms of quality so it doesn't care about how beautiful it is how how how it displays whether it has errors in the html but it shows at performance how quick is it so that's for example the internet speed it shows specifically looks at accessibility are you using all the alternative tags are you using semantic elements it looks for example at search engine optimization and so on so this is if you have chrome you can test this and it's increasingly popular to also look at these things because it's not only important that your website works and that it has the right information but it should also be accessible and performant so this is very important but of course many times this is an afterthought because it's very easy to make a website work and you mainly want to have your content and then maybe you don't think about all of this so do not forget about that it's an essential and increasingly important part of web development okay to summarize these lectures html is a markup language that uses so-called tags to produce hypertext text with links and of course nowadays we have a lot of other things pictures videos structure essentially there are lots of different html versions around and usually browsers support all of them but they might look slightly different in different browsers and you have to make sure that you use you declare your version correctly and you make sure it's valid a valid html document always has a doc type where you declare the version it has an html tag a head and a body it conforms to a number of different rules depending on the version for example that you close all your tags but in general it's very easy to produce html that is displayed in the browser the question is is it actually valid and this is something you can check for example with the w3c validator html elements and tags carry a meaning so they have semantics and that's really important because the layout can be changed so you can for example we discussed the headers earlier where you have h1 to h6 the important thing is that h1 is more important than h2 how they look i can change and i can change that very easily for example using css so the important thing about html elements is what they mean not how they display and finally we went into accessibility and to make a website accessible you should follow essentially the the conventions that we discussed and make sure that things are formed they run on different internet speeds they have additional meta information so that's it for this class in lecture five and six we'll cover css so then we finally go away from the pure structure that looks horrible but we start by adding layout and that's for example how to add colors how to position things and so on we mainly look at the background the principles of css and then with lots and lots of examples specifically in the end we look into the box model and flexbox which is all about positioning things and then we end up with responsive web design which is which has to do with your website adapting to for example different screen sizes or different devices so that's it thank you for watching