A simple follow is where it begins
No really please follow otherwise you might be missing some great content. Also, follow me on medium
It's 2021 and the world is still under attack from the corona-virus. Most of us have picked up a new hobby and interest. Maybe one of them might have been making websites or even making one to have an extra source of income. But either way, you still should know how to use HTML to make yourself a site.
A Basic Understanding
Html is a very simple and easy-to-understand programming language that makes up most of the content of the internet these days. Everyone can simply look up some tutorials or guides on how to use HTML. Heck even you just did otherwise why would you find this. Everybody also has the capability to understand how HTML and its elements work. You open an element and then you have to close the element. For example, when you open the fridge you should shut it because if you don't shut it everything inside of it will go bad. Just like HTML if you open a tag but don't close it, the element won't appear or may break your site. But you don't just yet know what an element is so that may have sounded a bit confusing.
Simple Facts
When you look at a site you see text and text that is bold or underlined, text that has a link attached to it, text that is big and or small, you see images and graphics to help you understand. All of those “elements” require some kind of tag. Text or paragraphs require the <p> tag so that the site or server knows that that text is a paragraph because it is inside of a <p> tag. The site will know when to stop reading the text as a paragraph when the user adds a </p> to the end of the paragraph tag. The reason that you use a </p> is that that is what closes the element and if you don't what is described above will happen to your site. So take the time after every element you use to close it. To close elements whatever tag you use add a </(element you used)> to the end of it to close it. Also as mentioned above I said tags, not tags so that brings us into the rest of the tags.
Tags
There are many different tags that you can use on your website. One for an image, one for a paragraph, one for a video, one to underline, one to make text bold, one to improve your site SEO, one to add tables and lists. These are some of the most popular tags across the internet.
Header 1
This is the tag that will make text large. You use an h1 tag wherever you would like but only once, usually, the name of an article or site, to stand out. <h1></h1>
Header 2
These tags usually are used for labeling elements on your site or more. Don't use to many though.
Header 3
This is the most common type of tag. Most people use this kind of tag for article sections or names of articles on a homepage.
Those are some of the most common header tags used on different websites that people use. When making a website, they are actually important if you plan for your website to be popular or just be discovered in general. Make sure that you dont overuse these as doing so will result in bad seo habbits and you will not rank well.
Image
This tag is used to add an image to a website to help people understand your site or just to keep people interested in your site. Most users of a website will be more likely to leave if there aren't any kind of images or visuals. Using this tag is a bit different though than what you are used to. Before you close up the you need to add an src=”” to add the img file. Do so by using the following and using your own img and directory. The closing tag is not needed.
<img src=”/path/to/your/file.jpg”>
Links
Now this tag, in a way, is like the img tag. To use it you need to use a special string inside of it to add a link to the text. It's very easy to use and most search engines love it when you add links to your content but not too many links. You can add a <a> tag to your site using the following.
<a href=”https://example.com”>links text here</a>
<a href=”/path/to/a/html/file/in/your/site.html”>link text here</a>
Bold
If you would like to make some text on your site bold you need to use the <strong> tag. It's very simple and easy to use. Find the text that you would like to make bold and put it between the <strong></strong> tags.
Meta
This is a very important tag to use if you would like your site to be on google. Basically, the meta tags are what add keywords and a description, and more to your site. Users of your site cant see the content from these tags since they are in the <head> of your site. Search engines such as Google, use these tags to rank your site and search it.
Title
Another very important tag for your website. It makes the current page that you are on and makes the tab name look nice and neat instead of an ugly file and directory. Required by most search engines.
Head
Any SEO tags such as the meta and title tag go here. The content inside of this element will not be shown to users of your site. It contains the content for search engines such as the site description and SEO data.
Body
The site's content that you will show to your users will be inside this element. It's needed as the content won't really be shown if you don't use this tag.
Now that you know some of HTML’s most important tags, it's time to actually make a site with HTML. It might seem a bit confusing at first but it's very simple to understand once you know.
Making The Site
To make an HTML site you need a simple layout first to make sure you have the right tags. Using the following snippet you will see the document type, HTML tags to declare the HTML content and then the head and body tags.
<!DOCTYPE HTML>
<html>
<head>
<title>TOP Tutorial</title>
</head>
<body>
<h1>Hello World!</h1>
<p>site content here</p>
<img src="https://theoverpoweredpc.tk/images/raspberry-pi.jpg">
</body>
</html>
Then you want to add the title inside the head tag and then some content inside of the body tag. Once you have that in there you are good to go. Congrats you just made a simple HTML site. Now go ahead learn CSS and js and make some amazing stuff. Learn more about HTML to expand your site.
See the full source code here: https://github.com/Grantrocks/htmltutorial/blob/main/index.html
Top comments (10)
While most of the article is good you need to rewrite the section on H1, H2 and H3 as it is misleading and in some places completely incorrect I am afraid.
The heading you choose has nothing to do with appearance (that is what CSS is for).
For a start there should only ever be 1
<h1>per page.Now you may have read differently but the document outline algorithm that was meant to allow you to use multiple
<h1>s was never implemented so that is wrong to use more than 1<h1>per page.So the bit on using a
<h1>wherever you want it to stand out is not great advice!Secondly the most used tag should not be a
<h3>, it all depends on your document structure.Your article uses primarily
<h2>s for example and is reasonably well structured!Instead I would combine these 3 sections and explain that there are 6 heading levels and that you should structure a document in a way where you don't skip heading levels and every heading level you go down should then be related to the heading level above it.
Additionally it is an awful idea to use a
<h1>as a main heading and then<h2>for a slogan. Instead use a<p>element and CSS (as a general rule, there are a few good patterns you can use here but<h1></h1><h2></h2>is not recommended.As for SEO friendliness all heading levels are SEO friendly if structured correctly.
Still gets a ❤ as the rest of the advice is beginner friendly, but it would be great if you can fix that so new developers don't start off with bad habits!
Thank you so much for the advide. I have updated the article and it would be nice to let me know what its like now.
Much improved and the stuff in my comment will fill in the rest anyway! ❤
Thanks for taking the time as it shows the sign of a great author when feedback is used to improve an article so quickly!
Thank you
Did you know that the header structure is more to do with good accessibility practice than SEO
Technically they do both because search engines search for these headers to help rank with seo
Google only ranks you higher because it can use the accessibility tree so I feel that accessibility means SEO
yes i did know that and it also helps with seo.
I like to think that SEO is just another way of saying, quality website with eye for detail. I used to run a business making websites to keep my family afloat, usually the best performing sights where those pre optimised by somebody else (CMS author)
Regards it's an excellent idea to know the basics and share what you know 💪🤓
Yes thank you