ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Basic HTML Tags You Must Know to Build Websites

Updated on July 7, 2012
html tags
html tags | Source

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 &nbsp; 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.


<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.

Comments

    0 of 8192 characters used
    Post Comment

    • smga22 profile image
      Author

      smga22 5 years ago from Dhaka, Bangladesh

      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.

    • profile image

      masmasika 5 years ago

      I tried taking up website designing and gave up because I couldn't understand the language. Very useful information here.

    • smga22 profile image
      Author

      smga22 6 years ago from Dhaka, Bangladesh

      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.

    • snowdrops profile image

      snowdrops 6 years ago from The Second Star to the Right

      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!

    • smga22 profile image
      Author

      smga22 6 years ago from Dhaka, Bangladesh

      Thanks Jenna :)

    • Jenna Pope profile image

      Jenna Pope 6 years ago from Southern California

      Excellent Hub!!! I bookmarked it to study and use.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)