Debugging HTML | Find & Fix the HTML Errors
Debugging HTML | Find & Fix the HTML Errors
Please like, share and subscribe if you find the video useful.
Checkout the Playlists:
👉 FrontEnd JavaScript Interview Questions: • #4 JavaScript Interview Questions | O…
👉 JavaScript Tutorials:
• Difference Between var, let \u0026 const
👉 Essentials for Web developers:
• How Does the Browser Cache Works?
👉 React Hooks \u0026 Latest concepts:
• Rules of Hooks In React | React Hooks
👉 HTML Tutorials:
• WebStorage APIs SessionStorage \u0026 Loca…
👉 CSS Tutorials:
• How Does CSS Work | The Engine of Web…
👉 Coding Challenges:
• Coding Challenge #5: Array Transforma…
👉 Best Practices \u0026 Common mistakes:
• Best Practices of Using IMPORT statement
👉 React js for Beginners:
• Why To Use JSX in Reactjs ?
👉 Things To Know As JavaScript/FrontEnd Developer:
• Things To Know As JavaScript Develope…
LIKE | SHARE | SUBSCRIBE 😊
#javascript #reactjs #react #webdevelopment #frontenddevelopment #uidevelopment
#javascriptinterviewquestions #interviewquestions #codingchallenges
👇👇👇
Follow me on
Telegram: https://t.me/+HTxs0I-Jvu75RxWM
Instagram: https://www.instagram.com/rethinkingui/
Twitter: https://twitter.com/suresh9058
LinkedIn: https://www.linkedin.com/in/suresh-me…
Content
0 -> Child in this video let's learn
4.596 -> about how to debug the HTML code, how to identify and fix the errors in HTML.
10.5 -> So let's start with the point by point there there is something theory to be discussed here.
16.09 -> So let me try to explain you how the browser understood the HTML code and all these things.
22.03 -> So unlike other programming languages like Java and rest, HTML is no need
28.32 -> to compile into different form. So the browser passes. And shows the result. That's it.
33.546 -> It is not, it is interrupted, not compiled. HTML is not compiled, it is only interrupted.
39.55 -> Usually we will be having two types of errors, #1 is syntactical error, #2 is logical error.
45.77 -> Syntactical error is like we are breaking the rules of the programming language.
50.13 -> So there will be getting this in that color. And the logical errors are like
53.784 -> we'll be writing some logic error, so something we'll be expecting the output
57.852 -> and we'll be writing some logical errors. So that's that comes under the logical. Yes,
62.542 -> but if you want to discuss about the HTML,
65.8 -> HTML will not suffer from the syntactical errors because browser parses this
71.744 -> code with the premise usually. So what does it exactly means? If there are any syntactical
77.325 -> errors in the HTML page as well, browser will load that page with those errors as well.
83.77 -> So and it browser will try to fix those errors. Browser will consist of some inbuilt rules.
89.33 -> If there is some markup which is incorrectly written in the HTML,
93.49 -> browser tries to fix those errors.
96.81 -> Because a browser has some inbuilt rules
99.953 -> to fix those errors of the HTML page. So why the HTML page is designed
106.076 -> in this phase? Because at the earlier stages the web development and parsing the content
111.714 -> into the browser is a big challenge. So that's the reason they have not
116.641 -> concentrated strictly about the syntactical errors the thought of. Just loading the content and
121.875 -> publishing the HTML pages is at that time is a big challenge. So they they did not kept any
127.839 -> strict rules regarding the syntax. That's the reason HTML is passed and
131.75 -> directly shown into the browser page even if it has syntactical errors as well.
136.89 -> So now let's see this page. This page is intentionally kept some errors.
141.75 -> So for example you wrote 1P tag and we have not closed this P tag.
147.31 -> Also we wrote this last tag and we have. Not closed this L stack,
152.18 -> so also we have root. We have a wrote this strong.
158.23 -> Strong back and we have not closed this strong tag. Also we have improperly
164.114 -> nested this strong and EM tax. So we have started the strong tag here.
170.33 -> We have ended it here in middle. We have open EM tag and we have closed it after the strong tag.
176.89 -> So in sense in short this is incorrectly nested ping.
181.92 -> OK so there are a couple of errors like if you see in the third LA element,
188.26 -> the HF doesn't consist of the double course, we have missed the double course. As I said this is
194.725 -> intentionally kept some errors. Let's see how the browser has fixed these errors errors.
199.2 -> So this is all the errors. We thought one is not properly closing the intacts.
205.5 -> And one is forgetting about the index and another one is improperly kept in
210.171 -> the keeping the nested items and another one is HDF double quotes is missing.
214.96 -> So these are the four things, and let's see how the browser treats these things.
219.02 -> So this is how it treats. So let's inspect this and let's see how browser tried to fix these errors.
225.82 -> So if you see the E tag was automatically added.
231.35 -> Both the fixed this P tag and ending tag. So not only for the paragraph tag it
235.762 -> was added to the all the list items. This is because before starting any
240.244 -> of the tag it tried to close the tag. With the P tag or with Li Tag.
246.38 -> So browser has fixed this. Closing tax by itself this works not only in the Chrome,
251.95 -> in all the modern browsers also browser does the same thing. So this is the about the first
257.325 -> thing and coming to the second point we have kept the strong. At this point we kept a strong
262.896 -> tag and we have not closed it throughout the document. So that's the reason browser is not
268.623 -> sure where to end this strong tag. So that's the reason it has given every text into the strong bold.
275.48 -> So that's the reason you got this strong characters text wrote the document.
281.8 -> The second point it was not sure so it was applied this strong tag to entire document.
287.76 -> And coming to the Third Point we have nested wrongly.
292.08 -> I mean we used strong and inside that we have used EM and inside
297.816 -> that we have used some see like this we have used strong and EM strong.
303.467 -> So how the browser has resolved this means so? Firstly it has taken this badly
310.292 -> nested elements. How does the browser resolve? It means so it has started with the
315.078 -> strong tag and we have ended this here. So this is fine for the browser.
319.39 -> But in between you have started this EM tag but you did not ended it. So that is the reason browser
325.5 -> has ended it at this point. So in sense it has kept one EM tag here. So like this also.
332.478 -> You have not started EM tag but you're ending this EM tag. So that's the reason browser has
338.974 -> automatically fixed these tags like this. So it kept like this.
343.36 -> So it was added an EM tag. Like this.
347.622 -> So this is what the browser does did.
352.3 -> Both for the M's here and there.
355.96 -> So browser has automatically fixed this incorrectly nested elements as well.
361.95 -> Coming to the 4th issue, the double course issue. So here we have missed the double quotes.
367.03 -> So what does the browser does? It means it has just ignored it. It was not displayed at all.
373.18 -> The anchor tag was not displayed. This is because we have mixed missed that HNF double quotes.
380.06 -> So this is how the browser tried to fix our errors. So it it does not unlike
385.802 -> other programming languages. Yeah if you do any of the error in the React JS or Angular JS frameworks
390.975 -> so the page would be broken, it will not show any of the things, it will directly broke the page
396.57 -> and it will show the exact error. But HTML doesn't. It will not do like that.
402.27 -> It will browser will parse that HTML and it will try to fix the errors as much as it can.
408.19 -> If not it will render as it is. So that is how the browser parses the HTML.
413.84 -> What if you have a small file so you can understand what all the errors you have done. So fine,
419.336 -> that's fine. But what if you have a huge lines of code HTML how you need to validate them?
425.45 -> So just copy this code, your HTML code and this is the.
430.09 -> W3 validator it validates the HTML code now
433.29 -> here you can just give the Uri address. You can upload the code or you
438.909 -> can directly paste the code. So just I'm pasting the HTML code. If your code has huge number of lines
444.912 -> it's not possible to check one by one line like what we have done now.
449.08 -> So that's the reason you can copy paste here and if you click check so this is W3 validator URL.
455.96 -> So this validates entire our HTML and it will give line by line warnings and errors.
462.28 -> So here you can see error and tag Li implied but there were. Open elements.
467.55 -> So it is saying that we have missed the Li tag at the 15th line.
472.65 -> It will give the line numbers and it will ask us to fix these errors. So these are the below errors.
479.05 -> Few errors for automatically fixed by the browser but we should not leave that browser.
483.97 -> Will fix these errors and we should not depend upon browser.
487.83 -> Each browser behaves in a different way. So we can't say that exactly
492.974 -> this HTML may work in Chrome but the same may not work in. Or another browsers.
497.658 -> So that's the reason it's a good idea to validate our HTML content and if there are any errors,
503.82 -> it's good idea to ourselves to fix those errors by checking these things.
508.7 -> So this is about this uh uh W 3 validator. If if you want to do the same
514.168 -> in your coding code itself, like your coding in Visual Studio, you wanted to have the same
519.8 -> validator in your code, then go to the extensions here. So. In the visual studios at the left
525.718 -> side you will be having extensions. So click this extensions and type HTML
531.502 -> hint here and click the first one. So HTML hint you need to install
537.366 -> this extension to the VS code and this will work in as the same as
542.193 -> the validator which we have seen. So if you see yeah I will minimize this.
548.48 -> So you can see this will work as the same. You can see the value it will
553.672 -> give the errors like this. At the same validator, what are the online validator?
558.21 -> As does, it will give the same error. So it's a good idea to add this HTML
562.876 -> hint extension to your VS code so that it will validate our HTML code as well.
568.49 -> So this is all about how to debug the HTML issues and how to identify the issues.
574.43 -> How the browser parses this HTML code? Hope you understand the video. Thanks for watching.
579.599 -> Please subscribe for more videos.
Source: https://www.youtube.com/watch?v=sexK89DODGE