Tags In HTML (With Code Example)
What Is Html Used For
Used To Format Web pages
It is good to have some ideas on what HTML is used for before we go deeper into the post.
There are many uses of HTML but most people are aware of only one or two.
HTML is used to build the basic structure of a webpage. Just look at it as the skeleton of a webpage.
It does not add much beauty to the page but it is used to format how things are placed on the page.
Some comment sections on a webpage allow users to use HTML in their post.
Used To Format Documents
Actually, HTML is mostly used to format a webpage. It is also used in some ways that you and I come across daily but most don’t realize it.
Most of the offline software has a help section that gives users hint on how to solve a problem.
The help section is usually created using HTML.
Used To Format Emails
More on what is HTML used for is the email you receive day in day out.
HTML is used to format emails. This is similar to how web pages are being created.
Since this post is about HTML, let talk about the best way to learn it.
Read More Here
Best Way To Learn Html
If you have never written a code before, HTML can be a big thing on your mind.
You are not the first and you will not be the last.
You will learn the tricks I have been using to make learning a new programming language easy.
So let us begin.
What is the best way to learn HTML?
This is one of the biggest questions that searched online when I was starting out with programming.
But unfortunately, I didn’t see what suit me.
One good thing that I took out of the research is to JUST DO IT and to make Google my friend.
Those two tips really help but I want more.
So I began to ask myself how I am going to do it. And how those experts are doing it.
What I discovered is very powerful.
There is a saying that goes along this line ‘REPITITION ENHANCES RETENTION’.
Let me quickly explain how I did it before we go into the structure of HTML and best HTML editors.
The best way to learn HTML for me is these five steps:
You pick a material or video that will teach you HTML.
I highly recommend you use a playlist that goes from topic to topic. There are many such in YouTube.
It is fine if you want to learn HTML using a book or a single video too.
So what I do in this step is learning a section of the material I pick.
If it is a video and it is not in the playlist, you should target when the instructor segments the content.
Like the end of point A, point B and so on.
If it is a book, I like dividing the topic into little parts like 4-7 pages and learn those.
Step 2: Practice
The best thing you can do after learning a little chink of your material is to practice what you learn.
And that is what I always do.
This is a very important part and it what experienced programmers do tell newcomers to always do.
Come to think of it, you want to create web pages in HTML, what better would be best for you than to sit your ass down and write?
And this is not only for HTML, these five steps are for you can learn any programming language.
Step 3: Write
Now you’ve learned and practiced a little code, take the time to write what you understand.
This should be from your head and not what you read directly from the book.
There are many scientific benefits of each step that are beyond the scope of this post.
And I know that you too can attest to the fact that the more you come across something, the more you become familiar with it.
This step should not be a problem to do, just imagine yourself explaining what you just learned to a friend.
But in writing form.
And that’s it.
Step 4: Revise
If you just learned a part of the book or playlist, you should skip this step.
This is where you revise the previous parts of the book or videos you have watched.
I strongly recommend that you do it without your note or any other material.
Just yourself and your brain, in form of meditation, if you wish.
Sit, Relax and Recollect.
Step 5: Peg
This is optional but I think I don’t want to hold anything back from you.
Here, I will look for a word to remember all the things I learned in that section of the material.
You can use the title of the section if you want like if the section is about tags in HTML, I will use a tag to peg that section in my brain and write it down.
This will help me when trying to meditate all that I’ve learned (step 4).
So that is it.
I repeat all these steps when I study a new programming language. It might seem daunting at first but I tell you it will be part of you after the first few sections of the material you choose.
Something that is not among the steps is creating a project after I finished the material (even short video or book).
I will try and do something with what I learn from the book even if I need to Google some codes.
That should answer the question of the best way to learn HTML.
Structure Of HTML
The structure of an HTML document is divided into two basic parts:
The head is where special information about the page is located. Some of such information is the title of the page.
While the body contains the information that will show on the browser.
</title> The title goes here </title>
The Content that will show on the browser goes here
Best HTML editors
There are many HTML editors online and you can only say one is the best for you.
The list below is the most popular HTML editors you can find online.
Best Html Editors
Micro Visual Studio
How To Create A Website Using HTML On Notepad
Create a folder
Yes a folder, I know you want to write some HTML codes and you are not expecting a folder.
The reason I asked you to do that is that all your website files have to be in the same folder.
And in most cases, this folder will have sub-folders in it as well, sub-folders like image, CSS, and even script.
Creating a folder for the whole website will make life easier for you when trying to link from one page to another.
Now that you have created a folder for the entire site, what follows is writing the code.
It is important that you have an idea on how you want the site to look like.
You don’t just want to be writing HTML codes without having a target in mind.
So, I suggest you pick a design either online or you brainstorm how you want the site to look and feel.
If you are just starting out: just keeping your feet in the beautiful water of web development.
You are certainly looking for how to create a website using HTML on notepad because you want to learn one or two things.
In that case, you might not know how to create a full website or you are just terrified of reproducing one.
My advice on that is:
Read this whole post and go out there and try any site you want. Sure you will make mistakes, you will get stuck and that is the beauty of.
I recommend that you should look for where you will get stuck, a big tip that can make you a fine developer in a short time.
Always code and be happy to find out what you don’t know.
Use Google after finding out that you don’t know how to do something. There are many people that have experienced what you are about to solve.
You will find what you need online and that will add to your knowledge.
Back to the topic, open notepad on your computer.
Copy and paste the HTML example code and save using index.html
The index indicates that is the homepage of the website and .html is the file type.
It is important that you save the document with .html extension.
In support of this, I will write some HTML code examples below.
HTML Code Example
How To Create At Table In HTML
<title> This Is A Table </title>
Html Tutorial For Beginners
I can start writing HTML codes on this page now all in the name of creating HTML tutorial for beginners but that is not what a beginner programmer needs.
You might not like this but it is the best truth you will hear in the coding atmosphere.
LEARN WHAT YOU NEED TO COMPLETE A PROJECT
It is as simple as that.
I will make some examples for you:
Let’s assume you want to create a background color in HTML. Your best bet should be Googling “how to create a background in HTML”.
That might sound crazy but it is what 99.9 percent of programmers do.
And when you find the answer that works, you take note of it and continue with other parts of the page.
Html tutorial for beginners is not what you need friend, What you need is to build a website and the best way to do that is making Google you closest friend.
What Is Html Tags
Tags are what we use to give commands in an HTML document. As you must have known that you don’t just type be bold before a text to make it bold.
You need to specify an instruction for the text to be bold. This instruction is what is called tags in HTML.
Mind you, most of these tags have an opening and closing tag.
There are many tags in HTML and I will go through the common ones below.
Tags In Html
The HTML tag <html>
It is used to indicate the beginning of an HTML document
The closing tag is </html>
The head tag <head>
It is used to indicate the head section of the HTML document.
And the closing tag is </head>
The body tag <body>
As you must have guessed, indicates the body of the document and ends with </body>
These three tags are enough for you to get started in writing HTML if you want to go by the tips I wrote on the how to create a website using html on notepad section of this post.
Basic Html Tags List
It is use to indicate the kind of document you are working on. In this case html.
This tag is usually located at the top of the page. It is the first thing the browser will have to read on a page that contains html code.
It is worth mentioning that this tag does not have a closing tag.
This indicates the start of the html code. It has a closing tag, </html>
The head of the HTML document, which usually contains important information about the page.
Is has a closing tag as well.
The part that contains what the user will see when the page opens on a browser. It has a closing tag </body>
It is good to make commenting a bit right from your day one in programming because it will save you some time in the future and also help someone that wants to read your code.
It is simple, just place the comment between <!- – and – – >
<h1> to <h6>
This are the header tags in HTML. You use them to indicate the title or subtitle of the page.
It ranges from h1 to h6 where h1 is the largest and all of them uses a closing tag.
The paragraph tag. Unlike a header tag, the paragraph tag gives text normal size and also makes it fall on a paragraph.
Note that when you type text in an html page without putting it in a tag, all the text will be on a single paragraph.
div is use to divide the page and you can use it as many times as you want.
It has a closing tag </div> and in most cases, div is combined with an id or class attribute.
Class and id are used to give the div a name in case you want to reference that specific division in other part of the code.
<div id = “nav-menu”> ……. </div>
This stands for break and it is used to break a line then move the next tag to the next line.
It is one of the rare tags that does not use a closing tag.
Horizontal Rule as the name stands, create a straight line on the page.
It is ideal for making a straight rule across the page.
Strong tag is use to bold text in HTML. It is the tag that replaced the old <b> tag.
It has a closing tag </strong>
em stands for emphasize, it is also use on text and its output looks like italic.
It uses a closing tag.
Insert tag creates underline to text. It uses a closing tag </ins>
Subscript, just like writing X2 , the 2 there is a subscript. Also has a closing tag.
Superscript is the opposite of subscript. Instead of the text located at the base, it will rise up just. Take for example X2.
This tag is used to insert an image into HTML. It does not use a closing tag but requires that you specify the source of the image using src.
<img src = “image location”>
Ordered list. It is used to list items and number the items listed.
Un-ordered list. List items using bullet points.
List item, used in both ordered and un-ordered list to list the items.
Definition list is used to make a list that uses text as the list item indicator.
List Attributes In Html
HTML has many attributes and most of them can only be used within specific tags.
You will see the top 20 list attributes in HTML below and where you can use each of them.
This is used on form tag to tell the server what type of file it should accept from the user.
This is also used in form tag but to specify where to send the data collected from the user.
<form method = “post ” id = “Contatct Form” action = “hotlegit.com/contact.php”> </form>
From the form above, the URL action points to is where it will send the user’s input.
This is use to align an object or element on the page. Align attribute is quite straight forward.
Usually used in the img tag, the alt attributes is an alternative for the user to know what is in place of an image in case the image didn’t load.
In a webpage where you have video or audio embedded, autoplay attribute is use to tell the browser if it should play the file as soon as the page loads or not.
When you use blockquote or abbr tag is always good to cite the place you got the information. This is where the cite attribute comes into play.
This is one of the attributes that makes referencing an HTML section fun and easy in CSS.
It is like a name given to a section of the page and in CSS, you style the section using the name.
The days of using the color attribute in HTML is over but it is still possible. Leave that work to CSS.
Color attribute is used to specify the color you want to give an element.
This is used to specify the amount of columns you want in a textarea.
Textarea is a tag usually used within form tag.
<textarea name = “comment-box” cols = “20” rows = “30” > Type Your Comment </textarea>
This indicates how many columns you want a table cell to span across.
This is a popular attribute in HTML, even in web development. It is used to specify where the a tag links to.
<a href = http://google.com> Google Homepage </a>
Used to give the height of an image or other elements on the page. It is one of the attributes that is better used in CSS than HTML.
<img src = “images/pcmoment.jpg” height = “30px”>
You have seen the brother of the id attribute above, class attribute. These two are used to reference a part of HTML and give that part some styling.
There is a difference in the two though. You can use the class attribute as many times as you like but you can’t use the same id more than once.
This is use to indicate the highest number of characters users can type in a box. You can specify maxlenght in textarea attribute and type attribute.
Similarly, this indicates the minimum number of charaters a box can take from the user.
In the form attribute above, I wrote <form method = “post” id = “comment-box” action = “hotlegit.com/commnet.php”> </form>
Method in that HTML code indicates the way you want the form to post the user’s data to the server.
There are two ways, either post or get.
This is what the server will use to recognize an item from an HTML page. It is included in forms submitted to the server.
Placeholder is use to hold some test in a text box so as to explain to the user what is expected to be in that box.
It stands for relationship. The relationship between a file and another file.
Rel is a key part in linking a CSS file to an HTML file.
<link rel = “stylesheets” type = “text/css” href = ”css/style.css”>
An attribute that is use to reverse the numbering in ordered list tag.
Use to locate the source of a file. For example, <img src = “images/pcmoment.jpg”>
The most common use of this attribute is to open a webpage in another tab.
<a href = http://hotlegit.com target = “_blank”> This is PCMoment Homepage </a>
It is a fun attribute that tell more detail about a file or content on the page. Usually used on an image or text. You can use it to give more info.
<img src = “images/pcmoment.jpg” title = “The PCMoment banner”>
Type attribute is use to specify the type of file you are expecting from the user.
<input type = “text”>
Width attribute is use to give the width of the element.
<img src = “images/pcmoment.jpg” width = “400px”>