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 TagDescription
<!–…–>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)

You may also like :

Leave a Reply

Your email address will not be published. Required fields are marked *