HTML Tag in html

Meta Tags In HTML & Why They Are Important?

Meta Tags in HTML

The title and description are the two most important meta tags in html, which Google pulls from your website. In Search Engine Optimization [SEO] meta tags plays an important role. The meta tags are placed between the opening & closing <head> </head> tags. The metadata is used by browsers, Google, Yahoo, Bing other search engines, and other web services, and its result not displayed on the web page.

The <meta> tag includes  metadata : title, document decription, keywords, author, Social Media Meta Tags etc

1. Title Tag

The HTML <title> tag is used for declaring the title, or short name of the HTML document. In SEO (Search Engine Optimization) we call it as "meta title tag". The title is usually displayed in the browser's title bar. It is the very first HTML element that specifies your web page for search engines and to visitors. The Title element supports all browsers. It shows up in blue, in bigger font in search results than everything else, and is hyperlinked back to your website.

Syntax

<head>
<title>Your Page Title Goes Here</title>
</head>

Title tags are used in three key places:

  • Search engine results pages (SERPs)
  • Web browsers
  • Social networks

Some of the important key points need to take while writing a title of a webpage

  1. Google and other search engines will display 50-60 characters of a title tag in the search results before cutting it off, so you should generally aim for title tags that are around 50 characters or less.html-Meta-Title
  2. Always Give every page a unique title Keep important valuable words. Title tags are a short and therefore deceptive simple part of SEO and avoid duplicate titles as Google may think that you have duplicate content and penalize your website.
  3. Put important keywords first it’s a good opportunity for you to include the main keyword or keywords you’re targeting for that page. That makes it clear to Google that this page is relevant for anyone searching for that specific term. Just make sure not to fall for keyword stuffing and also try to embed long tail keywords in title tags
  4. Don't use too many SEO keywords. Avoid titles that are just a list of keywords or repeat variations of the same keyword over and over.Meta-tilte-example

2. Meta Description Tag

It define the website description or summarizes your web page. Search engines typically show the Meta description in search results below your Title tag. The meta description length had to be about 160 characters while mobile characters for the search results snippets are around average of 130 characters. Length varies based on what the search engines systems seem to be most useful. And avoid duplicate descriptions: search engines may think that you have duplicate content on your website. By adding a relevant description in the meta tag you can help the visitors to find what they can expecting to find on your webpage.

Syntax

<meta name="description" content="website description will be here">

3. Meta Author Tag

It define the author of the document or the web page. It just like to give credit to the person of company or developer that made your website. It doesn't have any impact on the website ranking. But if you like to add, it make easy to find the right person who is responsible for a web page. The author tag is now used as a Facebook meta tag.

Syntax

<meta name="author" content="Person Company or Developer Name">

2. Meta Robots Tag

It’s a simple meta tag code that gives you the power to decide about what pages you want to hide from search engine crawlers and what pages you want them to index and look at by the search engine. It also suggest the spider of search engines crawlers what links to follow and what links to stop with. Always add the Robots tag in the HEAD section of your site. By default, the search engine spider crawlers will index your site and Will follow your site links.

The meta robots tag can be used in FOUR ways:

  1. FOLLOW – It hels the search search engine crawler to follow the links in that webpage
  2. INDEX – It hels the search search engine crawler to index that webpage
  3. NOFOLLOW – It hels the search search engine crawler NOT to follow the links in that webpage
  4. NOINDEX – It hels the search search engine crawler NOT to index that webpage

Syntax

<meta name ="robots" content="index">

<meta name ="robots" content="follow">

<meta name="robots" content="nofollow">

<meta name="robots" content="noindex">

You can create a multi-instruction by combining robots meta tag directives with commas: 

<meta name="robots" content="noindex, nofollow">

The robots meta tag instructs web crawlers to not index the page and to not crawl any of the links on the page

4. Social Media Tags (Open Graph tags)

These tags provide structured information about the page such as the title, description, and preview image to the social media like Facebook, Twitter, LinkedIn etc. Using meta Open Graph tags, you can customize the way your website appears in tweets and FB posts and is the standard way to implement social media tags. Social media profiles rank high in the results in search listings for business names. The OG tags are added to the HTML code in the header section of the web page.

Syntax: Twitter Cards

<meta name="twitter:card" content="summary">

<meta name="twitter:title" content="Your Web Page Title Name">

<meta name="twitter:description" content="Your Web Page Description">

<meta name="twitter:image" content="Image Url">

<meta name="twitter:site" content="@mxthemes">

<meta name="twitter:creator" content="@mxthemes">

Syntax: Open Graph general (Facebook, Pinterest & LinkedIn) 

<meta name="og:title" content="Your Web Page Title Name">

<meta name="og:description" content="Your Web Page Description">

<meta name="og:type" content="website">

<meta property="og:image" content="Photo url" />

5. Meta Refresh Tag

It will refresh the document every two minute (120 seconds):

Syntax

<meta http-equiv="refresh" content="120">

HTML Tag in html

HTML Tag in html

What is HTML tag in html

HTML tag Specify the document is a HTML markup language.tag is a top-level element of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

Syntax


<html> ..... </html>

In more simple word These are the tags you put at the beginning and end of an HTML file.

DOCTYPE html in HTML5

What is html ? Syntax of HTML5 Doctype Declarationn

What is !DOCTYPE html in HTML5?

The Document Type Declaration needs to be present at the beginning of a document. The DOCTYPE is an instruction to the web browser about the version of markup language in which a web page is written. The DOCTYPE is not actually an element or HTML tag but it needs to be the first thing in your web page document. In HTML, the DOCTYPE is case insensitive always.

Syntax

<!DOCTYPE html>

The three conforming variants of the HTML5 DOCTYPE declarations are as:

  1. <!DOCTYPE html>
  2. <!DOCTYPE html SYSTEM "about:legacy-compat" >
  3. <!DOCTYPE html SYSTEM 'about:legacy-compat' >

The term "legacy-compat" or 'legacy-compat' refers to compatibility with legacy producers only.
The above quoted string "about:legacy-compat", which must be written in lower case. This quoted string, however, may also be quoted with single quotes, rather than double quotes.

HTML5 New Tags / Elements & Attributes

HTML5 New Tags / Elements & Attributes

New Tags/Elements which were introduced with HTML5 are as follows:

Html5 Tags Description
<header> Defines a header for a document
<footer> Defines a footer for a document
<article> Defines an article in your document
<aside> Defines content aside from the page content
<audio> Allow to play audio on browser.
<canvas> Used to draw Graphics on web.
<figure> Specifies self-contained content
<meter> Defines a scalar measurement within a known range
<nav> Defines navigation links
<section> Defines a section in a document
<source> Defines multiple media resources for media elements (audio and video)
<video> Defines a video or movie
<progress> Represents the progress of a task
<mark> Defines marked/highlighted text
<details> Used to create an interactive widget that the user can open and close
<bdi> Full form of BDI is Bi-Directional Isolation. This element is useful when embedding user-generated content with an unknown directionality.
<summary> It specifies a visible heading for <detailed> element.
<wbr> Used for possible line bread
<time> Used for define date and time
<track> Used for defines text tracks for media elements (<video> and <audio>)
<source> Used for defines multiple media resources for media elements (<video> and <audio>)
<ruby> Used for defines a ruby annotation
<output> Used for represents the result of a calculation

HTML5 New Form Tags

Html5 Tags Description
<datalist> Defines a list of pre-defined options for input controls
<output> Defines the result of a calculation

HTML5 New Form Input Types

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

HTML5 New Graphics Tags

HTML5 Tags Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics

HTML5 New Media Tags

HTML5 Tags Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> & <audio>)
<track> Defines text tracks for media elements (<video> & <audio>)
<video> Defines video or movie

HTML5 New Attribute

Attribute Types Examples
Empty <input type=”number” value=”100″ disabled>
Double-quoted <input type=”text” value=”MxTheme”>
Single-quoted <input type=”text” value=’MxTheme’>
Unquoted <input type=”email” value=mxtheme@dummy.com>
HTML Tips for Beginners

Best HTML Tips for Beginners

HTML stands for hyper text markup language, invent to allow website creation and HTML5 is the latest version of the HTML language. HTML is the default language for all websites on the Internet. HTML5 does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser and it makes code simpler, cleaner which is always a good thing. HTML syntax is very simple to follow and the syntax only controls the presentation or structure of a web page.

Understanding The New Doctype

A doctype or document type declaration is an instruction which tells the web browser about the markup language in which the current page is written

Old DOCTYPE

Doctypes for in advance variations of html had been longer because the html language changed into sgml-primarily based and consequently required a connection with a DTD, however they're obsolete now.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The DOCTYPE for HTML5 is short, brief, and NOT case sensitive and the DOCTYPE declaration is only required for enabling the standard mode for writing documents.

<!DOCTYPE html>

So it's better now than what had before i.e short and simple.

Basic HTML Structure

An HTML document has three main parts:

  1. Head: The head element contains title and meta data of a website or Web document.
  2. Body: The body element contains the information that you want to display on a web page.
  3. Footer: Footer content usually includes contact information, social network links, google map, a shipping address, Copyright or legal notices and much more. Like the header, the footer appears on every page, but it’s positioned at the bottom.

Basic HTML Structure

Their are three main components of HTML and these components are known as the building blocks.

  1. Tags
  2. Attributes
  3. Elements

Tags:  HTML tags are the perdifined keywords that define how your web browser must format and display the content. In more simple words tags are used to seprate HTML code from normal text. HTML TAGYou must noticed h1,p,strong tag have two parts, an opening and a closing part. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character.

 

Check the example below:

html tags

In the example i want to the create headings, for that i have used h1 tags. The way these tags are written determines what the result will look like on the web page. Just like in above example:

Tag used to write the paragraphs and tag make the content bold.

Attributes: Attributes allow you to customise a tag or you want to include additional information to the tag and are defined within the opening tag.html attributes

 

For example :

<img src="img.png">
<p align="center">Your Contact or other info will be here</p>

HTML Attributes

In the <img> tage I added addtional info i.e "src" to add the define the image source .  Similarly in <p> tag I added "align : center" to move the text center of the Paragraph .

Elements:  "Element" means in a particular context. An element becomes a tag when we use the angled brackets around it. To create a web page, we use tags. A tag instructs the browser what specific instruction to execute.
html elements

Examples of elements of structure of a document
head   body     p

HTML5 Tags List

HTML Tag Description
<!–…–> To comment text in the source code
<!doctype> To Specify a document type
<a> To specific a anchor (Hyperlink)
Use for link in internal/external web documents.
<abbr> An abbreviation
<address> Address information
<area> Specify an area in an image map
<article> Specify an article
<aside> contain set(or write) on aside place in page contain
<audio> Specific audio content
<b> Specific text weight bold
<base> Specify base URL for all the links with in a web page
<bdo> Specific direction of text display
<blockquote> Specifies a long quotation
<body> Specify a main section(body) part in HTML document
<br /> Specific a single line break
<button> Specifies a press/push button
<canvas> Specifies the display graphics on HTML web documment
<caption> Specify table caption
<cite> Specifies a text citation
<code> Specifies computer code text
<col> Specifies a each column within a <colgroup> element in table
<colgroup> Specify a group of one or more columns inside table
<command> Specify command button, invoke as per user action
<datalist> Specify list of pre-defined options surrounding <input> tag
<dd> Specify a definition description in a definition list
<del> Specific text deleted in web document
<details> Specify additional details hide or show as per user action
<dfn> Specify definition team
<div> Specify division part
<dl> Specify definition list
<dt> Specify definition team
<em> Specify text is emphasize format
<embed> Specify embedding external application using a relative plug-in
<fieldset> Specify a grouping of related form elements
<figcaption> Represents a caption text corresponding with a figure element
<figure> Represents self-contained content corresponding with a <figcaption> element
<footer> Specify a footer section containing details about the author, copyright, contact us, sitemap, or links to related documents.
<form> Specify a form section that having interactive input controls to submit form information to a server.
<h1> to <h6> Specify a Headings level from 1 to 6 different sizes.
<head> Specify header section of HTML document.
<header> Specify as a container that hold introductory content or navigation links.
<hr /> Represent a thematic break between paragraph-level tags. It is typically draw horizontal line.
<html> Specify document is a HTML markup language
<i> Specify a italic format text
<iframe> Specify a inline frame that embedded external content into current web document.
<img> Used to insert image into a web document.
<input> Specify get information in selected input
<ins> Used to indicate text that is inserted into a page and indicates changes to a document.
<kbd> Used to identify text that are represents keyboard input.
<label> Used to caption a text label with a form <input> element.
<legend> Used to add a caption (title) to a group of related form elements that are grouped together into the <fieldset> tag.
<li> Specify list item either ordered list or unordered list.
<link> Used to load an external stylesheets into HTML document.
<map> Specify an clickable image map.
<mark> Used to highlighted (marked) specific text.
<menu> Used to display a unordered list of items/menu of commands.
<meta> Used to provide structured metadata about a web page.
<meter> Used to measure data within a given range.
<nav> Used to Specify group of navigation links.
<noscript> Used to provide an fall-back content to the browser that does not support the JavaScript.
<object> Used to embedded objects such as images, audio, videos, Java applets, and Flash animations.
<ol> Specify an ordered list of items.
<optgroup> Used to create a grouping of options, the related options are grouped under specific headings.
<option> Represents option items within a <select>, <optgroup> or <datalist> element.
<output> Used for representing the result of a calculation.
<p> Used to represents a paragraph text.
<param> Provides parameters for embedded object element.
<pre> Used to represents preformatted text.
<progress> Represents the progress of a task.
<q> Represents the short quotation.
<rp> Used to provide parentheses around fall-back content to the browser that does not support the ruby annotations.
<rt> Specifies the ruby text of ruby annotation.
<ruby> Used to represents a ruby annotation.
<s> Text display in strikethrough style.
><samp> Represents text that should be interpreted as sample output from a computer program.
<script> Specify client-side JavaScript.
<section> Used to divide a document into number of different generic section.
<select> Used to create a drop-down list.
<small> Used to makes the text one size smaller.
<source> Used to specifies multiple media resources.
<span> Used to grouping and applying styles to inline elements.
<strong> Represents strong emphasis greater important text.
<style> Used to add CSS style to an HTML document.
<sub> Represents inline subscript text.
<sup> Represents inline superscript text.
<table> Used to Specify a table in an HTML document.
<tbody> Used for grouping table rows.
<td> Used for creates standard data cell in HTML table.
<textarea> Create multi-line text input.
<tfoot> Used to adding a footer to a table that containing summary of the table data.
<th> Used for creates header of a group of cell in HTML table.
<thead> Used to adding a header to a table that containing header information of the table.
<time> Represents the date and/or time in an HTML document.
<title> Represents title to an HTML document.
<tr> Specify a row of cells in a table.
<track> Represents text tracks for both the <audio> and <video> tags.
<u> Represents underlined text.
<ul> Specify an unordered list of items.
<var> Represents a variable in a computer program or mathematical equation.
<video> Used to embed video content.
<wbr> Specify a word break opportunity in a long string of text.

HTML Editors or Code Editors

Code editors or HTML editors are the most important part of website development. Helping tools like HTML editors are intelligently made to assist you to write better code and resolve all your issues and make sure that you won’t have to experience any complications while designing a website.

List of Best Html Editors

  1. Notepad ++ (Free)
  2. NetBeans (Free)
  3. Aptana Studio 3 (Free)
  4. Bluefish (Free)
  5. Kompozer (Free)
  6. Atom (Free)
  7. Brackets (Free)
  8. Komodo Edit (Free)
  9. CoffeeCup (Free & Paid)
  10. Sublime Text (Free & Paid)
  11. Phase 5 HTML editor (Free & Paid)
  12. NoteTab (Free & Paid)
  13. Bare bones Edit (Free &Paid)
  14. CotEditor (Free & Paid)
  15. TextMate (Free & Paid)
  16. UltraEdit (Free & Paid)
  17. Dreamweaver (Paid)