The First HTML Document

Create the First HTML Document

The First HTML Document

HTML - short for Hyper Text Markup Language - is a markup language. A markup language uses a set of markup tags. In HTML they are markup using HTML tags. So, basically there is a start tag and an end tag. Each tag will have a structure like this:
<starttag>Your contents goes here</starttag>
Your contents will go in between the tags. HTML tags always comes in pairs with few exceptions. Lets take a look at this example and then we'll explain all about the tags.
<!DOCTYPE html>
  <title>Your Title</title>
  <h1>Heading 1</h1>
  <p>This is a paragraph. It can be in <strong>Bold</strong> or <em>emphasis</em>. HTML is cool</p>

Enter the above code in your text editor and save as - say first.html file. Try to identify the tags in the above html document and note them down. Open this file in your browser and you'll see something like this:

 If you have tried to identify the elements then let's break it one by one to you.

  1. The first line is the <!DOCTYPE html> this tag will tell the browser what type of document is being sent. Now, why this? The reason is HTML is now in version 5 - commonly known as HTML5. So, to identify if your site use HTML 1, 2, 3, 4 or 5 you need to declare the <!DOCTYPE html> . In previous version the declaration of DOCTYPE is more complicated and the above declaration is for HTML5. 
  2.  The next line you see the <html> tag and also at the end of the line the </html> . This tells the browser about the start and end of an HTML document. All other tags should be inside the <html>...</html>  tag. When tags are present inside another tag, it is known as nesting
  3.  After that, you'll two prominent tags - <head>...</head> and <body>...</body> tags. The <head>...</head> is the head section, where you can put other tags like the <title>...</title> . Anything that goes inside the <head>...</head> is not visible in your browser except for the title. But you'll include stylesheets, JavaScripts and meta tags there. 
  4.  Inside the <body>...</body> tag, you'll have all your content to be displayed. In the above example you'll see the <h1>...</h1>  which gives the different heading for your html. There is also the <p>...</p> tag which defines a paragraph. By now you'll notice that the  <h1>...</h1> and <p>...</p> tags will create a new line and not joined together as in a sentence. 

Now, we'll introduce you to a new term in HTML called ELEMENT. So, what is an HTML Element? Well, anything between the tags - including the contents inside is called an HTML Element. So, you have the heading element, paragraph element, body element etc. There are two types of elements in HTML - a Block element and an Inline element. Back to the above example, you'll find that the  <strong>...</strong> tag does not break the line to a new paragraph, nor does  <em>...</em> . This is because only block elements will create new paragraph while inline elements will not. Try this second example to see the difference:

Now, go ahead and try to experiment with your new knowledge. Let us know in the comments below if you have any equerries.



CSS HTML Java Script PHP - MySQL slider-home
Farlando Tutorials: The First HTML Document
The First HTML Document
Create the First HTML Document
Farlando Tutorials
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy