The course is part of this learning path
In this module, you’ll get to grips with the basics of HTML, starting with its history, the fundamental pieces that make up HTML, and how to use attributes and comments properly. After this, will take a look at how containers work, how websites respond to syntax errors, and what a few of the special characters look like in html. Finally, we’ll end off with a deep dive into structural html, and how you can use it to create systematic, well thought out websites easily and effectively.
A big part of HTML is the use of containers. So, what are they and how do browsers behave if the syntax for them is wrong? Also, how does HTML deal with special characters and are there any kinds of HTML that some browsers support but others don't? In this video, I'll answer all of these questions.
So, simply put a container is the area on your page between the opening and closing tags. So, on an HTML page, the container is everywhere between the opening body and the closing body tag. When there are other containers within a larger container, it's called nesting. Let's take a quick look at an example of this. Let's say I want to write a section that has a header and an article. The section header text is in a heading one tag. The article has its own header that has a heading one tag and a paragraph.
After the article header comes a content paragraph. At the close of the article, there is a footer with some text in a paragraph. Some of the tags used a container for other tags and some are containers for content. So, that's an example of how to use containers properly. Let's have a quick look at how containers can be used wrong. Pause the video and take a moment to see if you can figure out what's wrong with the code in this example.
Did you figure it out? Well, the problem with this container is that the closing tags are not in the right place, especially the section header tag, the content paragraph closing tag and the footer paragraph closing tag. But will it actually make a difference to the output of browser? But what happens if your syntax is just totally wrong? Well, browsers have been designed to try and make sense of HTML, no matter how bad the syntax is. However, if the syntax makes absolutely no sense to the browser, it just won't display it.
On my left is the browser output and on the right is the interpreted HTML. Notice how it has added closing paragraph tags for the summary paragraph and the footer paragraph. It's also added opening paragraph tags to help the syntax make sense. This keeps the number of opening and closing tags equal. The interpreted HTML makes sense so the page appears to display correctly which is good news. However, the order of the tags is not and that could cause accessibility problems down the line.
So, while you won't get a massive error popping up saying, warning syntax error detected, you'll know you've made a mistake if what you're trying to do just doesn't work at all. So, now that we've covered the syntax errors, let's move our attention to special characters for a moment. As I mentioned at the start of this video, you may need to use special characters from time to time. But if these characters are used as some part of the HTML page, then you could end up with syntax issues and other errors. Using these HTML entities is also good for security in certain scenarios as some of these raw characters can actually be used to attack websites.
There are five special characters you need to be aware of, although lots of others exist. They are the less than and greater than signs, an ampersand, double quotation marks and non-breaking space. Here's a quick example of what they might look like.
Let's say you wanted to write something like if the relative density is greater than one, then you have a problem. To do this, you'll need to substitute all the special characters for the HTML names. That would look something like this.
Okay, so the last thing I wanna quickly touch on in this video is non standard HTML. These are just tags that are supported on some browsers but not on others, and they may be phased out at some point. For instance, the blink tag which makes things blink, or only actually works on Firefox while the marquee tag which makes things scroll, is only supported my Microsoft. My advice is just to stay away from non-standard HTML, as it can actually be quite annoying for users and it only works in some browsers anyway. And that's it for this video.
Containers are a cool part of how you'll be using HTML to create web pages. So, it's really important to understand how they work. If you make a mistake with your syntax, or you use non standard HTML, it might not work in some browsers, and of course may also need to use special characters occasionally but as you've seen, all you have to do is replace the special characters with their unique HTML name, and they'll display copy.
Lectures
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.