Getting Started Learning HTML For Web Development - Great Resources
Your Journey In Web Development Begins!
A Checklist You Can Use As A Guide
HTML
1.1 Basic Understanding Of HTML- Be able to write clear & semantic HTML. Understand any web pages HTML when looking at it in the browser console.
- Know the majority of the tags of HTML
This is only a rough guide and you shouldn't aim to follow it strictly, I personally find to learn the most I will often have to do it in my own way.
Where To Look To Learn Such Things?
My Quick Start Guide
This guide is only basic but will aim to give you what you need to get started, you can do it! While you read this please go on over to codepen and make a new pen so you can see the html in action.
HTML
Below is a "div" which is two tags, think of it as a container at the moment. Notice the last tag has "/" before the text inside the less and greater than signs, This means it's a closing tag.
<div> </div>
You can have attributes on that "div" we see above which is called an element. Such attributes are formatted as such
attribute="value"
This would go inside the opening "div". Remember the opening div is the first "div" the one without the "/" in it, in other words it's not the closing "div". We could see many types of attributes on a div like onclick, style, class, id, data-type
<div class="hello" id="hello" onclick="change()" style="color: red;">
</div>
Remember! so we have an element in otherwords the
<div> </div>
This element has attributes, the style, id & class are used to style the element whereas the onclick is to call some Javascript code.
So you know now roughly how to format a div. Now let me tell you that a div is just one type of element, a wrapper or container. There are a lot of elements in HTML some important ones being headings, paragraphs, images & videos.
At the moment We have a div with attributes but there is nothing inside it so we will put some elements inside that element.
<div class="hello">
<h1>Hello World</h1>
<p>Greetings, We come in peace ☮</p>
</div>
Ok so we now have a heading text & paragraph text inside our div element with an attribute that is a class called hello. Notice how you put the text you want to show on screen as a heading or paragraph you put in between the two tags. You can use h1, h2, h3, h4, h5, h6 for headings. Realize that search engines like Google see your h1 heading as your most important heading and your h6 heading as your least important which is something to bare in mind when laying out pages in the future. See below we have some more elements we could have put inside our div element above.
<a href="https://steemit.com">Steemit</a>
Above we have a link tag and a image tag, one displaying an image the other a text that is clickable and will take you to another URL. It is good practice to put attributes on these tags like below.
<a title="steemit social media" href="https://steemit.com">Steemit</a>
These attributes are normal to see on a element and should describe your content to search engines, keeping this in mind may even help you rank your site well in the future.
Bonus Round
When you start making pages you will have to include tags to validate the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Ok so we have a few more tags now, you could call this a very empty html page. Your html for the page goes in the body tags, that is where the div element we made earlier would go or any other element like an image or text that we want to show on screen of user. The doctype and meta tags are just validating our page making it readable to the browser.
Use The Browser, Luke!
You can see other people's HTML in your broswer by right clicking and selecting inspect element which will bring the browser console up and show you the HTML of the web page.
Want to check your work?
Use this validator to check if your code is correct and valid HTML!