HTML Introduction Tutorial

HTML (or) Hypertext Markup Language is the fundamental building block of the internet. This standard markup language is use for making web pages.

What is an HTML?

  1. HTML is a markup language used to structure the content on a webpage. It consists of elements, which are surrounded by angle brackets (< >).
  2. Every element has an opening tag and a closing tag, and the content is placed between these tags. Except some elements has self closing tags, like <br>, <img>, <hr>, and etc.
  3. HTML elements are used to define the structure and semantic meaning of the content, such as headings, paragraphs, links, images, and more.

Setting Up Your Environment for HTML

  1. To get started with HTML, all you need is a simple text editor such as Notepad (Windows), TextEdit (Mac), or more specialized code editors like Visual Studio Code, Sublime Text, or Atom.
  2. We recomend to use VisualCode Studio as your text editor.
  3. You can also use online HTML editors like CodePen or JSFiddle.
  4. HTML files should be saved with either the.html or .htm extension

HTML Comments

  1. You can add comments to your HTML code to provide explanations or reminders. Generally, these comments are useful for other developers or sometimes for yourself when reviewing the code.
  2. Comments are not visible on the webpage and are written using <!-- and -->.

Basic Structure of an HTML Document

  1. Every HTML document has a basic structure that includes an opening and closing html tag, a head section, and a body section
<!DOCTYPE html>
<html>
    <head>
    <!-- This is the head section -->
    <title>Your Page Title</title>
    </head>
    <body>
    <!-- This is the body section -->
    Your content goes here.
    </body>
</html>
Structure of HTML
  1. <!DOCTYPE html> defines the document type and version. It should be the first line in your HTML document.
  2. <html> is the root element that wraps all the content.
  3. <head> contains meta-information about the document, like the page title.
  4. <title> specifies the title of the webpage, which is displayed in the browser's title bar or tab.
  5. <body> contains the main content of the webpage that is visible to users.
  6. Save the above code as a html file like "index.html", "page.html", "my-first-page.html".
  7. The index.html file must contain in your root folder as a home page otherwise the browser will not recognize when it's on live.

Head Section

  1. The head section is used to include metadata, links to stylesheets, scripts, and other information.
  2. <meta>: Provides metadata about the document, such as character encoding and keywords.
  3. <link>: Links to external resources like stylesheets (CSS) or fonts.
  4. <script>: Loads JavaScript code.
  5. <style>: Defines internal CSS styles.
  6. <base>: Sets the base URL for relative URLs within the document.

Body Section

The body section is an important section where you keep the content of your webpage.

  1. Text and Headings
  2. Lists
  3. Links
  4. Images
  5. Forms

Why HTML is Important?

  1. HTML is the backbone of web pages. It's the language used to structure content, define its meaning, and determine how it should be displayed on browsers.
  2. By using elements like headings, paragraphs, lists, and more, it helps search engines and assistive technologies understand the content, making it accessible to a broader audience.
  3. HTML is supported by all major web browsers and is platform-independent.
  4. HTML works in tandem with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.
  5. HTML is defined and maintained by the World Wide Web Consortium (W3C), which establishes web standards. Adherence to these standards ensures consistency and reliability across the web.
  6. HTML has evolved over the years, with each new version (HTML5 being the latest major version) introducing new features and capabilities.

Example:

Let's figure out where HTML elements is used with an example webpage.

HTML example page

The main content on the page you see is actually in the body tag. We create a navbar using the nav element. You see "Webstack Notes" as an h3 tag. The tutorials links (HTML, JavaScript, and others) in the navbar are the links with the a element. The cards are div elements.

First, the webpage contains the three main pillars of a webpage: html, head, and body tags.

The head element contains data like the title, description, stylesheets (to style the webpage), favicon(A little picture shown on the internet browser for the web page.), and more.

Title and Favicon of the web page

These are the name and small icon of our page.

You can see them in the search engine results also.

search engine results