👩‍💻
300devdays
  • 👩‍💻Learn Full Stack Engineering
  • Learning Curriculum
    • Full Stack Engineering Roadmap
      • HTML Fundamentals
      • CSS Styling
      • JavaScript Basics
      • Advanced JavaScript
      • Front-End Frameworks
      • Back-End Development with Node.js
      • Advanced Back-End Development
      • Project-Based Learning
    • Workshop Scenarios
      • Month 1 Workshops
      • Month 2 Workshops
      • Month 3 Workshops
      • Month 4 Workshops
      • Month 5 Workshops
      • Month 6 Workshops
      • Month 7 Workshops
      • Month 8 Workshops
  • HTML (Hypertext Markup Language)
    • Structure of an HTML Document
    • HTML Elements - Deep Dive
    • HTML Folder Structure
  • CSS (Cascading Style Sheets)
Powered by GitBook
On this page

HTML (Hypertext Markup Language)

HTML is a very versatile language, and it can be used to create a wide variety of web pages.

PreviousMonth 8 WorkshopsNextStructure of an HTML Document

Last updated 1 year ago

How Websites Work?

Websites are collections of files (HTML, CSS, JavaScript, images, etc.) stored on servers. When you enter a website's address in your browser, it sends a request to the server, which responds by sending the necessary files. Your browser then interprets and displays these files, rendering the web page.

History and Evolution of HTML

HTML Overview: HTML (Hypertext Markup Language) is the fundamental language for building web pages. HTML is made up of a series of elements, which are defined by tags. Tags are enclosed in angle brackets (< >), and they are used to tell the browser how to display the content. HTML has tags such as headings (<h1> to <h6>), paragraphs (<p>), and lists (<ul>, <ol>, <li>).

Key Milestones

  • HTML4 and XHTML: Previous versions of HTML.

  • Transition to HTML5: HTML5, the latest version, introduced new features like native support for audio and video, semantic elements for better page structure, and more.

Setting up a Development Environment:

Starting out with html at a fundamental level, all we need is a web browser and a simple text/code editor.

Text Editors and IDEs: Choose a text editor or Integrated Development Environment (IDE) for writing HTML code. Examples include Visual Studio Code, Atom, and Sublime Text. These tools offer features like syntax highlighting and auto-completion.

We recommend Visual Studio Code

Browser Developer Tools: All major browsers (Chrome, Firefox, Safari, Edge) come with developer tools. These tools assist in debugging, inspecting HTML elements, and analysing network requests.

Hands-On: Setting up a Simple HTML Page:

Creating a Basic HTML File: Start with the minimum HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a simple HTML page.</p>
  </body>
</html>

Viewing in a Browser: Save the file with an ".html" extension (e.g., "index.html") and open it in your browser. You should see a webpage displaying "Hello, World!".

Best Practices for Getting Started


For the purpose of learning web development, we recommend Chrome

Version Control: Consider using version control systems like to track changes in your code. This helps in collaboration and prevents the loss of previous work.

Documentation and Resources: Explore online resources such as and for in-depth HTML documentation. Develop the habit of reading and understanding documentation to enhance your learning.

Register for the Full Stack Engineering Training

Follow Top Universe Socials ,

(download the option for your operating system)
Git
MDN Web Docs
W3Schools
300devdays
X
Linkedin
(download the option for your operating system)
Page cover image