NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
Powered by GitBook
On this page
  • What is HTML?
  • Tags
  • Creating an HTML file
  • More tags
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript
  3. HTML

Getting Started

What is HTML?

HTML, which stands for HyperText Markup Language, is a language used to construct web pages by defining their structure and content. The structure is defined by tags, which are keywords that define elements on a page, and are surrounded by angle brackets (<>).

Tags

Tags, as mentioned before, define the structure of a page by creating elements. There are two types of tags: paired and unpaired.

Paired tags have an opening tag, which is the name of element surrounded by angle brackets, and a closing tag, which is the name of the element prefixed with a / and surrounded by angle brackets (<element>...</element>). The content goes in between the opening and closing tags.

Example of paired tags include the <html> tag, the <head> tag and the <body> tag.

Unpaired tags only have a single tag for the element (<element>).

Examples of unpaired tags are the <br> tag and the <hr> tag.

Creating an HTML file

Open up a text/code editor or IDE of your choice, and type in the following code:

<!DOCTYPE html>
<html>
   <head>
       <title>My web page</title>
   </head>
   <body>
       <h1>Welcome</h1>
       <p>This is my first page</p>
   </body>
</html>

Then save the file as index.html. Congratulations, that is your first HTML file ready. To view it in the browser, naviate to the file in your finder/library and open it with a browser of your choice (see below).

On most operating systems .html files are set to open in your default browser by default; you can change this if you want.

In your browser, you should see something like this:

Now lets see what these tags do.

  • <!DOCTYPE html> essentially declares to the browser that the document is an HTML file. It's not necessary, but helpful.

  • The <html> tag contains the entire contents of the page between its opening and closing tags.

  • The <head> tag contains meta information about the page, as well as imported scripts and stylesheets. Here it also contains the <title> tag:

    • The <title> tag defines the title of the page, which is the text that appears on the tab in the browser.

  • The <body> tag contains the body of the page, including text, forms, images and more.

    • The <h1> tag defines a heading. It can range from 1 to 6, with 1 being the largest size and 6 being the smallest size heading

    • The <p> tag defines a paragraph of normal-sized text. Note that it is possible to place the text on its own without a <p> tag and it will still render as a paragraph.

More tags

Let's take a look at some more tags:

  • The <div> tag is a paired tag that is often used to create a generic element that may or may not contain text.

  • The <a> tag is a paired tag that is used for hyperlinks (a stands for anchor).

  • The <button> tag is a paired tag that is used to create a clickable button.

  • The <form> tag is a paired tag that is used to create an HTML form. We'll see more of these later.

  • The <hr> tag is an unpaired tag that is used to create a horizontal line on the page

  • The <br> tag is an unpaired tag used to denote a line break.

  • The <img> tag is an unpaired tag used to embed images on a page.

  • The <input> tag is an unpaired tag used to create an input field inside the form.

  • The <link> tag is an unpaired tag used to import files (usually stylesheets).

  • The <script> tag is a paired tag that can be used to embed/import JavaScript code into the page.

Comments in HTML files can be denoted by <!-- put comment here -->. It can be extended to multiple lines as needed.

Spaces between tags and empty lines are ignored by the browser when rendering HTML.

As you have seen, tags can be nested within one another.

Next steps

Next, we'll take a look at tag attributes and how they can be used to give properties to elements.

PreviousHTMLNextTag Attributes

Last updated 11 months ago

We'll end up using all of these tags throughout the guide, so make sure to keep them in mind. A full list of HTML tags can be found .

here