What is HTML?
Hypertext Markup Language (HTML) is the standard markup language/format for creating web pages, containing the content and structure of a page as a series of tags/elements.
HTML is the skeleton of the web. At its most basic it is a text file, in a folder on a computer, with a .html extension.
The basic document
HTML consists of a range of elements, nested inside one another.
As a visual:
As code:
The <html> element contains all elements of the page, the <head> element contains the title, and the body contains <h1> and <p>.
We call these semantic elements – which is saying that they give their contents a meaning or a role. These roles are then interpreted by your browser (Chrome, Safari, Firefox, etc.) when it loads the file, to ultimately display the page. We call this parsing the document.
In our example, here is what we’ve told the computer:
-
<!DOCTYPE html>
What kind of file this is, so it knows how to parse it.
This is not necessary in CSS or JS files. -
<html>
The root element of an HTML page, containing all the content. -
<head>
The meta information about the HTML page – like its title, default language, scripts, and stylesheets.
Nothing in this element is visible on the page itself. -
<title>
Specifies a title for the page – which is shown in the browser’s tab, and when it is shared. -
<body>
Defines the document’s body – the container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. -
<h1>
Defines a primary/first-level heading. -
<p>
Defines a paragraph.
HTML Elements
Elements are composed of tags (opening, closing) and their content:
Some elements do not have any content or children, like <br> or <img>. These are called empty elements and do not have a closing tag.
Common elements
Headings: <h1> <h2> <h3> <h4> <h5> <h6>
Paragraphs: <p>
Links: <a>
The
href(Hypertext REFerence) specifies a URL that the link points to, and the tag wraps the visible link text. Thehrefcan point to another, local HTML file (living in the same directory structure) or an external page.
Images: <img>
The
srccan point to a local image file or an external URL.
Sections of a page: <header> <footer> <nav> <main> <article> <section> <div>
These are the structural containers of a website. The names don’t imbue meaning or function directly, but help us organize and think about our content structure.
Attributes
All HTML elements can have attributes, which provide more information about the element:
Common attributes
- The
hrefattribute of<a>specifies the URL of the page the link goes to.
<a href="https://www.example.com">Goes to example.com</a>
- The
srcattribute of<img>specifies the path to the image to be displayed, as above.
<img src="example.jpg">
- The
altattribute of<img>provides an alternate text for an image, used by screen readers.
<img src="example.jpg" alt="A description of the image.">
- The
idspecifies a singular, unique element on a page – for CSS targeting and anchor (scroll, “jump”) links, prepended with#.
<h2 id="a-heading-element">A heading element</h2>
<a href="#a-heading-element">Goes to “a heading element”</a>
- The
classattribute provides a selector to hook on to with CSS.
<p class="warning">We’ll get into this soon.</p>
Block elements
Block-level elements always start on a new line, and take up the full width available – stretching out to the left and right of their parent/container. They stack on top of each other. Importantly, block elements can have a top and bottom margin, unlike inline elements.
Earlier, we talked about area-defining elements. All of these area-defining elements are also block elements:
<header> <footer> <nav> <main> <section> <div>
The heading elements (<h1>, etc.), and <p> tags are also block-level.
All of the above, in typical use:
As said earlier in the lecture, HTML is the skeleton and content of the page. It won’t look like much without CSS.
Inline elements
Inline elements do not start on a new line, and only take up as much width as necessary. I like to think of these as the little metal slugs from printing. Other text and inline elements will continue to flow around them, and they can wrap to new lines:
<a> <em> <img> <span>
Inline elements often exist within block elements:
Tags
What is shown here could be considered the tags used most often, but there are so many different kinds of tags:
<a> <abbr> <address> <article> <b> <body> <br> <button> <div> <details> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <html> <img> <input> <label> <li> <main> <nav> <noscript> <ol> <option> <output> <p> <script> <select> <span> <summary> <title> <ul>
Have a look at all that are available: HTML elements reference
The index file
The name index.html is important because web servers look for this file by default when no specific file is requested. When users visit the root URL of a site (e.g., example.com), the server automatically loads index.html as the homepage.
This naming convention allows for cleaner URLs (like example.com instead of example.com/index.html) and ensures that the correct file is served without errors. index.html is essentially the entry point for most websites.
This lecture was originally written by Michael Fehrenbach. It has been lightly edited.