What Is HTML and Why Should You Use It?

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

I've been developing web and desktop applications years and maaaaany people ask me about HTML. I get questions about "How should I learn?", "What's the best and fastest way to learn HTML?", etc: Today I'll be answering all those questions for you.

First off HTML is NOT A PROGRAMMING LANGUAGE! I cannot stress this enough. If you think you're going to make the next Angry Birds with JUST HTML I'd hate to be the bearer of bad news but HTML is what we call a "Markup Language". HTML literally stands for "Hyper-Text Markup Language". So what does that mean?

Basically, if you want to add content to your site you add it using HTML. You style it in something called CSS (which we won't go over in this post) and if you want to manipulate it on the page you would use Javascript.

To make this post as simple as possible we're going to the bare bones of HTML. We won't go over everything in HTML as that'll get boring. I'm just going to show you what you need to get started and what resources you should look into before proceeding into web design or development.

If you want to learn as fast as possible I'd suggest viewing tutorials and playing around with code. The more you play, experiment, read and create the easier it'll be for you to learn the language. I suggest taking a look at CodePen as there's a HUGE community always making and building stuff. There's a lot to Codepen as well such as Preprocessors which make writing code significantly easier but we won't be getting into that today.

Like I said HTML is a markup language which is comprised of "elements" each tag is an element on the page and all behave differently. For example, if I want my text to be bold. I would mark it up with a bold tag. Now there are two ways to do this....
Code: Select all
<b>bold</b>
<strong>bold</strong>
Now you're probably wondering why the difference? One tag is surely for styling and the other is for putting emphasis on the word or phrase. or as Ashley puts it....
In terms of you looking at the output on a page, there is no visual difference. They look exactly the same. The difference comes with text-to-speech programs, often used by blind people. When blind people look at a website, all the text is spoken to them. If you use <b>, the voice program will not do anything differently when reading that text. But if you use <strong>, the voice program might speak the text differently—with emphasis, or in a different tone of voice. This is done to convey to the blind person that the text is important in some way. Same goes for using <em>.
Source - https://www.nosegraze.com/difference-be ... rong-html/

As you can see elements can be used just for styling or for programmatic usage. Such as input elements or even buttons.

Some elements only display below other elements like div's and paragraphs. While others stay beside each other like span's and anchors. This is due to their default "display" property in CSS.

There are tons of resources out there where people have built frameworks to help make your page now just more stylish but also faster and more responsive like Bootstrap or even Foundation. There's also programs out there where you can design websites without writing a single line of code. Such as Webflow, Google Web Designer,
Adobe's Edge Reflow, and Macaw just to name a few and some like Webflow actually utilize the Bootstrap framework into your website.

These applications save tons of time. Although in web application development a lot of time they mostly help to build the template or foundation to the website. You generally have to do all the programming or scripting yourself.

With how dominant the web is nowadays I highly suggest learning HTML and CSS at the same time before diving into anything else in web development. Again I recommend taking a look at CodePen to play with code and you can also take a look at CSS Tricks to learn a lot about code.
1 post Page 1 of 1
Return to “Tutorials”