HTML in 100 Seconds

Ready to build your first website? HTML or Hypertext Markup Language is one of the core building blocks of the web. Learn the history of HTML and how it's used to give structure to a webpage. Learn more at fireship.io
#webdev #programming #100SecondsOfCode
🔗 Resources
HTML history home.cern/science/computing/b...
HTML basics developer.mozilla.org/en-US/d...
Watch my Web 1.0 beta short • Web 1.0-beta
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
- MonoLisa Font used for snippets
🔖 Topics Covered
- What is HTML?
- HTML history
- How to build your first website?
- HTML intro for beginners
- How does HTML work
- Document Object Model

[@Fireship]

Level up to god-tier HTML programming next 🌩👉 kzbin.info/www/bejne/kKXcfpeIr9ucZtk

[@cozeridk3684]

no.

[@Arkensor]

HTML "programming" ... I see what you did there AND I DON'T LIKE IT.

[@mavhunter8753]

Ruby in 100 seconds!

[@Stabruder]

@@Arkensor TRUE!

[@stefandili2650]

Hi mom!

[@NeuralNotes69]

The video we never asked for but world would be incomplete without you explaining it.

[@muhammad_abir]

😂😂😂😂😂

[@darrenjolly8881]

If I recall correctly, someone on another video did ask for an html5 in 100 seconds video.

[@rickyraihana5683]

flattery from a lazy person ️✌️😑😂

[@akramdahmani7214]

I can almost guarantee that everyone who watched this video didn't do so to learn what is HTML, but because we're all in love with Jeff's videos

[@isaacdruin]

Ya

[@BarraIhsan]

True

[@djecaummeta2022]

Me who actually learned html and css, and after that wat hed the video😂

[@rikthecuber]

@@djecaummeta2022 Everyone is doing the same thing here.

[@djecaummeta2022]

@@rikthecuber pretty much, yeah. his is voice is like infinite asmr

[@MrMudbill]

I'm both excited for and afraid of the JavaScript in 100 seconds video...

[@realflarequeens]

why afraid? 😂

[@SirusStarTV]

It's not already on the channel? Huh

[@burekmali6704]

Nice i learned that stands for anchor and for division

[@aboxinspace]

0:13 - I absolute love Tim's look in that picture. He's halfway between "Yeaaaah, I invented that!" but also "Yeah I guess it could look better...", like a little kid. Bless him

[@alperalkan2000]

Im a web developer for 5 years but still enjoy the simplest videos of yours. Just gotta love 'em. Its so nice that you still provide entry level points.

[@alikurt9771]

Oha! Türk

[@kaan8964]

@@alikurt9771 Yok artık?? Nasıl olur?! İnternette İngilizce bilen senden başka bir Türk mü?!?

[@enkryp]

Many web-developers think you should close all tags in HTML5 due to the standard, despite browsers tolerating "incorrect" unclosed tags. But in fact it's quite the opposite: "self-closing" tags like or are not the part of HTML5. They came from XHTML and now are supported for the sake of compatibility.

[@DemPilafian]

So true. People who want to use self-closing *""* tags should just stick with hideous XHTML. Using *""* in HTML5 is a sign of laziness.

[@arden6725]

@@DemPilafian your opinion is wrong

[@TheDragShot]

@@DemPilafian how is putting pointless effort into something called "lazy"? Do people even know the meaning of the words they use nowadays?

[@DemPilafian]

​@@TheDragShot During the XHTML days, the self-closing tags were essentially required. Everyone used them. Once HTML5 came around, they became obsolete but still supported. Even to this day lots of developers still self-close tags because they think it's required. If you are extra diligent, you stay up-to-date and modernize your coding practices. The same thing happens in JavaScript. For example, if you see a developer still using old JavaScript notation, like ".indexOf() != -1", you know they are not being diligent and keeping up-to-date. That's practically the dictionary definition of "lazy".

[@TheDragShot]

@@DemPilafian smh, you're right. I didn't think about it that way. Nevermind what I said then.

[@dnk1312]

Pretty dope !! I could binge watch an entire HTML5 series tbh !! Quality content as always !! Much props !! 🔥🙏👌

[@gmdsrail5630]

Despite HTML not being a programming language, it still helped me discover that I have potential to be a software programmer.

[@Birdyk-qr9sx]

Html and software development are teo different programming areas , how can Html cheered you ?.It"s interesting 🤔

[@basedserb1389]

@@Birdyk-qr9sx HTML's fairly simplistic structure most likely encouraged him to continue learning programming/web-dev, which is the case with most of the people who are trying to get into the industry.

[@Birdyk-qr9sx]

@@basedserb1389 Software development and web are two different areas of programming.Dude , and this is the question , how could Html encouraged him .Software is java , c++ and other languages , but not html , css

[@basedserb1389]

@@Birdyk-qr9sx He needs to start from somewhere. If he's a beginner and he starts with Java - it's robust syntax would get him discouraged and he would probably quit any form of programming. If he learns HTML + CSS + JS he can get a morale boost to continue learning JS frameworks which allow you to create mobile apps etc. Apps = form of Software

[@lunganimyeni7633]

Same with me 😊. I'm having fun messing with html and css rn and ill move to python (which I'll actually need) after Im done building confidence. It's so fun knowing that I cann do something, keeps me motivated.

[@sokrates297]

It's great seeing you go over the more basic parts of web development and not only complicated frameworks and tools 👍

[@johnmagbag2711]

I already knew HTML for 10 years but I still watched it lol

[@binds3063]

i have been practically binge watching ur vids on my goal to become a backend or software developer. i love your vids man and they are very informative.

[@tmm9069]

Idk why but your content is so simple but so great. Keep up the good work man.

[@MatchaCutie14]

Thank you for this refresher! I'm slowly getting back into coding

[@sebastianburger2578]

Finally. Now I can be a full stack developer

[@raz0229]

I feel pretty confident hacking NASA now, Thanks a lot Jeff

[@puppergump4117]

C6262: Function exceeds stack size. Consider moving some data to heap

[@arslan5829]

Probably the best spent 100 seconds of my time in youtube today. Thanks dude!

[@canerkaya17]

Just stumbled across your channel and I am already a huge fan. Earned my sub without a doubt

[@casper64]

Showing this in class tommoring. Thank you Fireship for doing 90% of my work!

[@UnderstandingCode]

Noice bro! This will really help me start full stack open thank you I love University of Helsinki and this tech we have!

[@I_Lemaire]

Good luck with Full Stack Open! The University of Helsinki is doing great things

[@hglbrg]

this html thing is gonna be huge! markup my words!

[@macwas5900]

Oh my god I learned so much here in just 2 minutes with more explanation and understanding than I got from a 2 hour tutorial. Nice!

[@starlite7249]

A video no one asked for or wanted but every new comer deserves.

[@JANG1969]

Amazing. You explain mostly every programming software, their own history and give an example how to using it under 3 minutes... I will subscribe you and used that knowledge for study.

[@helpfulprogrammer]

Short and to the point, good job)

[@AhmedAliIbr]

Amazing work and informative in everyway. Thank you for your much appreciated work.

[@ferrreira]

Props to you for showing the web being invented on NeXTSTEP, the operating system created by Steve Jobs' post-Apple company NeXT. NeXTSTEP was just awesome. Their object-oriented development tools and APIs were very important for Tim Berners-Lee to achieve his goal. The NeXT machine he used to invent the web is on display at a museum and it was even featured at the ending show of the 2012 London Olympics. NeXTSTEP is, even today, present in some of the core technologies that are part of macOS. Back in 2001, the first release of Mac OS X was basically NeXTSTEP with a cool UI theme.

[@sriramiyer9840]

Could you please do one of these videos on prolog? It's a logic programming language. I'm sure you'lll like it

[@twig1467]

I've been losing the will to code and continue learning web development, but honestly Everytime I watch a fireship video it helps, thanks for the awesome content ^_^

[@myselfvijay]

Your voice and your way to describe are fantabulous.

[@chandanreddy519]

Ur recording (reversing) method is awesome

[@Omerko]

Never thought that I need an explanation, still felt nice to watch the video... Good Job... 😀

[@kevinbatdorf]

Would love a full course on this one

[@mbbxx]

I work with this everyday, never knew that is a short for division

[@eitanetz2541]

I'm a web developer and do lectures about the web and the way it's built, which means I'm literally making a living from explaining those things. And Fireship make a better job explaining this in 100 seconds than me in an hour.

[@onpaper7287]

That means you are just bad at your job.

[@puppergump4117]

@@onpaper7287 He's just complimenting Fire, sheesh

[@puppergump4117]

@@onpaper7287 but yeah he might be

[@user-xu4di5tm9r]

Wow! I am just starting to learn html and understood this video! Great work!

[@EstebanCodes]

Fireship really pushing that 1 million milestone. Great work

[@kagedevshorts4886]

I'm excited for the javascript version!

[@ISAK.M]

I already know this stuff but this is so much info in such a short time damn good job

[@johannbauer2863]

Wow! This has be my new favorite programming language!

[@user-wk5yp6ue2x]

Great video! Can you do C# in 100 seconds next?

[@Brunoenribeiro]

the "guy in a bicycle" animation you picked really represents working with canvas

[@haresmahmood]

When you've been a web designer for 7 years but you still learn new stuff in a 100 second video

[@firstnamed5041]

Haha yes

[@thetos]

Nice, can't wait for 100 seconds of CSS and 100 seconds of unimaginable horror !

[@ivantarnyagin]

Good to be back to basics!!

[@abdu47137]

I love the font. Thanks for sharing it in description 🫀

[@dhruvikdonga4569]

With new JavaScript variants appearing everyday appreciate from where it all started

[@chrissdehaan]

I've have quite a few friends who want to learn about making a website from scratch, and now I know what to show them first.

[@metamodern7648]

All 30 years of development I was wondering what HTML is. Now I know, thanks to Fireship.

[@shateq]

The thing is that the thing is.. great! Great video!

[@randerins]

I swear I just got chills and tears right before starting this video

[@Dan-jz3ui]

I finally understand the difference between "innerText" and "innerHTML"

[@farazahmed1668]

it so enjoyable to see every single technology in 100 seconds.

[@sunandasamanta2921]

This is by far the most efficient HTML "blog" I have ever read.😃

[@awesomebearaudiobooks]

Daym, bro, luved it.

[@epimolophant]

Been a web dev for years, just learned that is for Anchor

[@imerence6290]

Finally a Fireship video I can understand.

[@hamidrezabokharaei5779]

Title should be : How to build a website in 100 seconds Your timing is great! I was looking to review my HTML knowledge!

[@glitch6107]

You forgot to tell that you need to write or else the file wont be recognized as HTML5

[@_clikuki_4848]

Nice, got to this one pretty early!

[@farhansangaji5029]

Finally one that I already understand

[@barushhasanov4927]

A video that helped a lot of back-end and script-side developers to take a look of html and overwhelm the scare of it...

[@jaishkhan7442]

didn't know about this "self-closing" tag thing lol I always write them as and

[@DarkBraveStuff]

I like having more of these hundred seconds videos!

[@GuardianApe]

Dude you're awesome !!!!

[@freddywilmar]

This video is helpful, I really like it!

[@sabinhogui]

I never knew I need this video before I see it.

[@rejinraghavan7616]

Just love these videos.. Crisp and concise to give you an idea of the topic.. Awesome work.. 😄

[@SithLord2066]

"information superhighway" lol....... man i haven't heard that term in decades, takes me back to the late 90's

[@CodingFire]

I know HTML but still watching it because your videos are great! 👍😀

[@harshit9671]

I never tried of it love it 👍 keep it up 😀

[@stormwix]

I have no idea how that helped me so much

[@farhansangaji5029]

Finally one that I can understand

[@sumailsasumi1294]

New year must Go 1M subscriber gogogo !, Your content is awesome🔥

[@rahmanramsi]

Back to basic. Love it

[@judevector]

A video I didn't know I needed just popped up after watching another video 😅❤🎉

[@TRENDY_TUBE]

' *Look mom, I built a website* '😅

[@MysteriousTruly]

I love CERN! and Programming! I love a lot of stuff! Extremely nice video!

[@enehizyosas]

The best explanation ever..

[@joeseabreeze]

Wouldn’t it be great if you could dynamically change the static markup with a programming language like Java? Then we could compete with Windows desktop apps by giving the developer a toolkit to build apps that run in a browser!

[@FT029]

wow, did not expect to see freerider2 in here. That is so long ago! great video

[@wtfdoiputhere]

My favourite programming language ❤️

[@alzadinaya259]

Now I'm ready to learn CSS! one step closer to becoming a frontend engineer

[@jackkirby5287]

I'm surprised that this video is only just now coming out at the end of 2021

[@mariumbegum7325]

Fantastic video!

[@falxie_]

It blows my mind sometimes how old a lot of the stuff that powers the web is nowadays

[@varunsodhani6812]

I already know every single thing there is to know about HTML, yet I saw this 100 second video because I am binge watching all of your content

[@bobanmilisavljevic7857]

Dang how long did it take you to figure every single thing out? I need to step it up 😅

[@abrpp]

THanks for explaining my curiosity about div stands for

[@ArKeTiCt]

You realize how many months of learning i skipped in 100 seconds? This is amazing.

[@Ok-_-719]

Nice, I’ll use this information to build a website to rickroll one of my friends. Thanks for your video tutorial.

[@Aphova]

Been writing HTML for 15 years. Still watched the video and enjoyed it 💪

[@bobanmilisavljevic7857]

Still writing HTML?

[@Aphova]

@@bobanmilisavljevic7857 yes, it's my favourite programming language 😅

[@quatercenetary7507]

This is actually good

[@vampirejs758]

I see, now Mark Zuck will earn money every time one uses meta tag in their html files

[@muslim2k]

I learnt a lot from this video

[@ferrreira]

Learning HTML for the first time back in 1999 was just magic. Just magic.

[@kelsobroderick3613]

Actual legend 👏🏾👏🏾👏🏾👏🏾

[@Moon-li9ki]

I'm convinced you can write code in every language there is

[@denizsincar29]

attributes are not only key-value pairs. they are sometimes just words: defer, async

[@nemanjalekic]

Hi Jeff, any chance of Ruby/Rails in the future?

[@zydhanlinnar11]

you posted a video about PHP right after I was given homework on PHP and now it's happening again after I was given homework on html. what a coincidence