HTML Tutorials

How HTML creates a website

Web browsers were created specifically for the purpose of reading HTML markup and displaying the resulting web pages such markup describes. Markup lives in a text file (along with your content) to give orders to a browser. For example, look at the web page shown in the picture below. You can see how the page is made up by examining its underlying HTML; its underlying CSS governs its formatting, layout, and appearance.

This page includes a graphic, a title that describes the page (HTML5 Cafe: Home), a brief welcome, navigation text, and not much else. Here, different components of the page use different formatting:

  • The title for the page appears in its browser tab.
  • A brief and simple text navigation bar (HOME | ABOUT US | MENU | CONTACT US) appears at the top border.
  • The welcome statement is a text heading in large-format type, followed by a brief description of what’s there.
  • A coffee cup image appears next, followed by our favorite morning slogan (powered by coffee).
<html><head><meta charset="utf-8"><title>HTML5 Cafe: Home</title><meta name="description" content="sample site for 9781118657201"><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css"></head><body><div id="container"><nav id="topnav"><a href="index.html">HOME</a> |
        <a href="about.html">ABOUT US</a> |
        <a href="menu.html">MENU</a> |
        <a href="contact.html">CONTACT US</a></nav><div id="content"><h1>Welcome to HTML5 Cafe!</h1><i>This is India</i><p>
          Here you will find all sorts of delicious HTML5 and CSS3 treats.
          This is the sample site for <a href="">Beginning HTML5 and CSS3 for Dummies</a>,
          by <a href="">Ed Tittel</a> and <a href="">Chris Minnick</a>. 
          To view all of the code samples from the book, visit the <a href="menu.html">Menu</a>.
        </p><figure id="home-image"><img src="img/pitr_Coffee_cup_icon.png" width="400" height="400" alt="delicious coffee"><figcaption class="warning">powered by coffee.</figcaption></figure></div><footer>
        copyright &copy;

Nearly all text enclosed between angle brackets (less-than and greater-than signs, or < >) is an HTML tag (often called markup). For example, the p within brackets (<p></p> tags) identifies text inside paragraphs. The markup between <body> and </body> contains everything you can actually see on the page (and some values that control how big the included coffee cup image appears). That’s really all there is to it. You embed the markup in a text file, along with text for readers to see, to instruct the browser how to display your web page.

Tags and the content between (and inside) them are also called elements. Angle brackets < > enclose HTML markup.