- HubPages»
- Technology»
- Internet & the Web
Basic HTML Tags You Must Know to Build Websites
Basic Code of HTML You Need to Know
Most of the people who recently start their career as a blogger don’t want to learn HTML (Hyper Text Markup Language). They consider HTML as a foreign language but you must know this markup language to format articles of your blog site or any other websites.
As a freelance writer, whenever we post something through some kind of CMS (content management system), sometimes extra tags can be found with our content. These tags can mess up your article format which is not acceptable. From my experience, I can say that whoever working with content must know the basics of HTML. Markup language consists of markup tags. These tags are used to describe page content. Tags normally come in pairs like <u> and</u>. Some tags don’t come in pairs like <br/>.
Below I will discuss some useful tags and their uses.
Creating Hypertext /HTML AnchorTag:
Sometime it is called link tags. We can see that internet users click on a link and it goes to another website. It is possible because of html anchor tag / <href> tags. By this you can link your reference or any other documents. So that people can redirect to that link. Common format of <href> tags goes here.
<a href=http://www.YourURL.com> Link text goes here</a>
This tags start with the letter ‘a’. Then the URL should be included inside quotes. After that link text on which hyperlink will be applicable. You must close this tag with </a>. You don’t always like to let your visitors go to another site within your site. For this you need to add this following code.
<a href="http://www. YourURL.com" target=”_blank”> Link text goes here </a>
Paragraph Tag:
Let’s start with the basic html codes. The paragraph tag is the most used basic code of html. It defines the paragraph element. It starts with the <p> tag and ends with the </p> tag. Joomla and any other CMS automatically add a paragraph at the beginning and end of the content.
<p>
This is an example of paragraph tag.
Content are normally goes inside these tags.
</p>
The difference between opening and closing tag is the slash mark.
Style Tag:
The html style tag defines CSS at a page-level. It must be declare inside the head of HTML document. Each tag might contain multiple style tags. Here is an example below.
<head>
<style type="text/css">
H2 {color:#008000;font-size: 18pt; }
</style>
</head>
Header tags:
For search engine optimization, it is very important to highlight you title or any other sentence so that Google, Bing can get the importance of your highlighted sentences. These header tags start with <h1> which is the highest position among all headers. It is also the largest in that category.
These are the following header tags and their uses.
<h1> Main Header </h1>
<h2> Sub Header </h2>
<h3> Sub Header if any </h3>
……………………
……………………
<h6> Smallest Header</h6>
<h6> header is also smaller than paragraph tag. You should remember one thing. Don’t put any link inside any of header.
Div Tag:
The div tag in html is a container unit for other elements. It encapsulates other page elements and work together with style sheets. Generally, we insert style code in header section and also in external style file.
Here is an example below:
<div style="float: left;">The div tag in html</div>
<div style="color: green; border: solid 1px #ff12c4">
<p>Basic HTML code you need to know</p>
</div>
Image Tag:
Normally, we don’t need to add any handwritten html image tag in our document. In any html editor wysiwyg used in CMS not always give you the freedom to customize your image properties unless you know the html codes. This is one of the tags that do not require any closing tag. When you use your handwritten image tag then you should know the exact location of your image. Otherwise you won’t see your image.
Here is an example below:
<img style="margin-left: 30px; float: right;" alt="your keyword" src="images/your-image-name.jpg" width="300" height="250" />
The margin-left attributes add an additional space on left side of your image. You can fix your image position by padding attributes. The alt attribute is only for SEO. Try to use good keywords with ‘alt’.
Line Breaks and HTML Space Code:
This is another commonly used tag in wordpress. It will add space between paragraphs and lines. More line breaks means more space between lines. Only difference between line break <br/> and paragraph tag <p> is paragraph tag creates more space than line break. <p> also means there is space before and after your content. Sometime we need to use html space code to place objects or other text elements in proper position. To add more blank space we need to use to place more blank space.
List Tag:
There are two types of list in HTML.
1. <ol> - Ordered List
2. <ul> - Unordered List
Ordered list contains numbers and alphabets. On the other hand unordered list contain symbols and bullets. It will automatically add if you press enter after any list. Those lists actually organize your content items.
- How to Create simple drop down menu in HTML and CSS
How to Create simple drop down menu in HTML and CSS - How to Use Margin and Padding in CSS
A margin in CSS is the space outside the border.whereas padding in CSS.. - How to Make Money as a Web Developer
You can get thousands of information on the internet about how you can make money as a web developer...
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<ol>
<li>Frog</li>
<li>Dog</li>
<li>Cat</li>
</ol>
By now you must have some learning regarding html codes. You can practice if you want to know it better. Looking forward for your feedback.
Related
Comments
Excellent Hub!!! I bookmarked it to study and use.
- Author
Thanks Jenna :)
Excellent..I was in highschool when I create a website using HTML.. I've manually encoded it, studied it and gosh, its so hard. But I did create a beauty, It was a self study only and the first few months were total pain but I must go on..but its worth it!
- Author
Yes, it is hard for a new learner. But if you use editor like macromedia dreamwever it will be easy because it generates code automatically. You don't need to remember all of them. Also they have tools for different tags so that you can add them anywhere you want. But need little practice :) .
Thanks for reading this Hub.
I tried taking up website designing and gave up because I couldn't understand the language. Very useful information here.
- Author
Thank you masmasika. Yes, it is difficult for a beginner. But if you consider it seriously, you can easily understand the language in a couple of month.
6