DONATE  
MENU
HTML
JAVASCRIPT
AJAX
JSON

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Introduction » HTML Example
Share Tweet WhatsApp

HTML Example

The standard markup for every HTML document is as shown below,
<!DOCTYPE html>
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>Welcome To My Webpage</h1>
</body>
</html>

Copy PRACTICE IT

Above is the basic, acceptable and standard markup you would define when you start building HTML webpages.
NOTE:
  • Don't worry if it looks kind of strange but then, you just started learning and will soon get used to it especially after understanding how everything was formed and their respective roles.
<!DOCTYPE html>
The above line should be contained and should come first in your standard HTML webpage. It is known as the document type definition (DTD). Just as the name relates, it simply informs a browser of the type of document being interpreted and the version in which it was written. This will help a browser to deploy all recognized interpretation needed for that particular type and version of document so as to interpret it properly. The <!DOCTYPE html> as used in our example above simply informs a browser that this is an HTML document written in HTML version 5 (The most recent version of HTML today).
<html>
The above is basically the parent of all HTML tags and your HTML document in general. This is because inside of it lies other HTML tags. It simply indicates the start of the HTML document.
<head>
This is the head of the HTML documents. You can liken it to our human heads, which contains the eyes to see, ears to hear, nose to smell, mouth to speak and a lot others. Inside this head tag, you include all that you want the browser to use in properly interpreting your webpage. This may include CSS, JavaScript, Meta Tags and a lot others. Inside the <head> tag also lies the title tag,
<title>My First Webpage</title>
The title tag simply gives a title to the HTML webpage which can be display in a browser's title bar. Giving your webpage a title is significant and helps a user to distinguish your webpage from that of others in a browser tab easily. The title tag helps users to distinguish a webpage from another in a browser's tab
The title tag helps users to distinguish a webpage from another in a browser's tab
<!DOCTYPE html>
<html>
<head>
<title>My Hello World Page</title>
</head>
<body>
</body>
</html>

Copy PRACTICE IT

<body>
The <body> tag is the most important tag in an HTML document. Inside of it lies all that you see in any website. The texts, images, videos, audios and etcetera. As can be seen in our example above, it contains,
<h1>Welcome To My Webpage</h1>
which is a heading text, we want to display on the webpage. So, you can have whatever number of tags here to display whatever you desire to your webpage visitors.
NOTE:
  • In the numerous examples existing in this tutorial, we may not necessarily define the full markups for marking HTML documents as we may want to quickly introduce an element to you or do other basic things. Therefore, when personally creating your webpages, be sure to fully mark up your webpage to standard.
SUMMARY
  1. There is a basic standard to start with when marking your HTML documents.
  2. It starts with a document type definition or declaration (DTD)
    <!DOCTYPE html>
  3. Then, your <html> tag to indicate the start of the document.
    <!DOCTYPE html>
    <html>
    </html>
  4. Inside your <html> element should exist the <head> element and the <body> element.
    <!DOCTYPE html>
    <html>
    <head></head>
    <body></body>
    </html>
    
  5. The <head> element contains all external CSS files, scripts and meta data that will help your webpage interpret and function properly. It also houses the <title> tag to define a title for your webpage.
    <head>
    <title>My First Webpage</title>
    <script src='myscript.js'></script>
    </head>
    
  6. The <body> elements contains the layout and contents of your website which a web visitor should see and interact with. For example, text, images, buttons, videos and etcetera.
    <body>
    <h1>Hello World</h1>
    <button>Click Me</button>
    </body>
Take a short quiz on HTML Example.
Ask a question or tell us if HTML Example is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode