But again, this is no longer required in HTML5, so feel free to omit that forward slash.
Besides doctype declarations, elements, and attributes, the only other structural syntax in an HTML file is a comment, which looks like this:
<!-- this is a comment -->
Comments are ignored by the browser, so they can serve two purposes: documentation to help you or other developers understand some section of the page; or as a quick way to tell the browser to temporarily ignore a block of HTML that is causing you troubles.
Since the syntax is quite awkward to type, most web-optimized editors have a built-in keystroke that will toggle the current line as a comment. Try hitting
Ctrl+/ on Windows). It should make the line a comment, and then make it not a comment the next time you use the same keystroke.
Now that you understand the basic HTML syntax, let's see how they combine to create a basic page. As we noted earlier, every page begins with the HTML5 doctype declaration, and the rest is a tree of elements containing content. The root element is named
<html> and it should contain two child elements:
<body>. Add this to your page:
<!DOCTYPE html> <html lang="en"> <head> </head> <body> </body> </html>
<head> element contains information about the page that doesn't appear in the main content window when viewing the page in the browser. For example, we can specify the title of the page here:
<!DOCTYPE html> <html lang="en"> <head> <title>My Web Page</title> </head> <body> </body> </html>
Most browsers will show the page title in the tab at the top of the browser window, and use that as the default bookmark name if you bookmark the page. But search indexers and screen readers for the blind also use this to get the page title, which is often a strong signal about what the page body is about.
Note that I indented the
<title> element so that it visibly looks like it's contained within the
<head> element. This is good practice, and will help you read your page as the structure gets more complex. Since
<html> can only contain
<body> we don't typically indent those, but every other element should be indented one level farther than the element that contains it.
Another element you commonly see the in the
<head> section is
<meta>, which can be used to specify lots of different meta-data about the page. One very important bit of meta-data is the character set used when saving this file. The character set tells the browser how to translate the bits it receives from the server (or the local disk) into letters. Nearly all editors these days will save files in the UTF-8 character set, as it allows the mixing of different scripts (Latin, Cyrillic, Chinese, Arabic, etc) in the same file, while still optimizing the file's size. To tell the browser that this file was saved in UTF-8, add the following
<meta> element to the
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Web Page</title> </head> <body> </body> </html>
You can also use the
<meta> element to specify other meta-data, such as the author, description, and keyword information about your document:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="your name"> <meta name="description" content="description of your page"> <meta name="keywords" content="list,of,keywords,separate,by,commas"> <title>My Web Page</title> </head> <body> </body> </html>
Again, these are not visible in the browser window, but programs like search indexers refer to these elements to gather meta-data about your page.
<meta> element to define is the one that controls how a browser on a mobile device handles zooming of the page. By default, a mobile browser will attempt to zoom out to show the entire page when it first loads. This is necessary if the page doesn't adjust its layout for smaller screens, but if your page is responsive to the screen width (which ours will be), you can tell the browser not to zoom out using the
<meta name="viewport"> element:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="your name"> <meta name="description" content="description of your page"> <meta name="keywords" content="list,of,keywords,separate,by,commas"> <title>My Web Page</title> </head> <body> </body> </html>
<body> element contains all the content that is visible on the page. There are many elements you can use here to convey your document's content. For now, let's just add a heading and a paragraph:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="your name"> <meta name="description" content="description of your page"> <meta name="keywords" content="list,of,keywords,separate,by,commas"> <title>My Web Page</title> </head> <body> <h1>Hello World!</h1> <p>This is a paragraph in the page.</p> </body> </html>
You can now open this page in your web browser. Double click on the HTML file in your Finder/File Explorer, and you should see the heading and the paragraph displayed in the browser window. The page title should also be shown in the browser tab.
Pretty simple, eh? That's really all you need to get going. You can use this page you just built as your default template for new pages, as it contains all the core elements every page should have.
This next section will introduce you to the most commonly-used elements in web pages, but this is by no means exhaustive.
HTML5 introduced several new elements that are meant to denote structural regions of the document: header, main, article, section, aside, and footer.
Although these are new, they still work fine with older browsers. HTML was defined to be forwards-compatible, so browsers treat unknown elements as simple block elements with no particular formatting. We will make use of these as we start to build more complex pages.
<h1> element from above is a top-level heading. There is typically only one of those in a page, and it should be used for the page's overall title. But HTML defines up to six levels of headings, and you can use those levels to define an outline of your document.
As noted above, adding an image to your page is done using the
<img src="path/to/my/image.png" alt="descriptive text for screen readers and indexers">
src attribute should be an absolute or relative path to the image file. If the path begins with a protocol like
https://, the browser will treat that as a full URL and fetch it just as if you had typed it into the browser's address bar. If the path starts with
//, it will add your page's current protocol (
https) to the front and then fetch it. If the path begins with a single
/ character, it will request it from the same domain as the current page came from. And if it starts with any other character, it assumes the path is relative to the current page. So if the path was
img/some-image.png it would look for a sub-folder named
img and then look for a file named
some-image.png within that sub-folder.
NOTE: The web was created by people who love Unix, so these are Unix-style paths, not Windows-style paths. Specifically, the names in these paths are case-sensitive and the separator between path parts must be a
/character. On windows path names are case-insensitive and the separator is
\, but on the web, it's the exact opposite!
alt attribute should contain some text that describes the image. This is primarily used by assistive technologies such as screen readers for the blind, but it is also used by indexers like Google to power their image search feature.
There are three kinds of lists in HTML: unordered, ordered, and dictionary lists. Unordered lists are for list of things that have no particular logical ordering, such as ingredients for a recipe:
<ul> <li>1 tablespoon of oil</li> <li>1 onion diced</li> <li>2 cloves of garlic</li> </ul>
<ul> element defines an unordered list, and the
<li> element is used for a list item.
Ordered lists are for things that have a specific logical order: for example, steps in the recipe's preparation:
<ol> <li>Heat the oil in the pan until smoking</li> <li>Fry the onions until golden</li> <li>Add the garlic and cook until fragrant, about 30 seconds</li> </ol>
Dictionary lists are for sets of terms with related definitions. This is obviously useful for encoding words and their meanings, but it can also be used for other name and definition pairs, such as dishes on a restaurant menu:
<dl> <dt>Baguette with Butter</dt> <dd>A toasted Grand Central baguette with salted butter</dd> <dt>Caesar Salad</dt> <dd>Romaine leaves tossed with a zesty Caesar-style dressing</dd> </dl>
<dl> element contains the entire list, which should be comprised of
<dt> (dictionary term) and
<dd> (dictionary definition) pairs.
Using the correct list type helps programs that read the page know how to interpret and manipulate the content correctly. For example, a program might offer to sort an unordered list alphabetically, but should never sort an ordered list as it has an implicit ordering. Similarly, a program that prints a dictionary list would know that the term must always be on the same page as the definition.
The "H" in HTML standard for "Hypertext," which means that pages can link to each other. Encoding a link is done using the
<a href="https://google.com">Search on Google</a>
href attribute should contain the URL for the page you want to navigate to. This can be absolute, as in the example above, or relative to the current page. For example, if I wanted to link to a page named
other-page.html in the same directory as the current page, the
href attribute would simply be
Hyperlinks can also link to another section of the same document. We call these bookmark links. When activated, the browser scrolls the window so that the element the links points to is at the top of the browser window. They look like this:
<p>For more detail see the <a href="#details">Details section</a> later in this document.</p> ...more content... <h2 id="details">Details</h2> ...more content
id attribute can be added to any element, but the value must be unique within the page. That is, no two elements in the same page can have the same
id value. Since these values are unique, you can create a hyperlink pointing to that element by adding a
# in front of the
id value. When activated, the browser finds that element and scroll the page to it. The browser will also append this
#details to the end of the URL, allowing you to bookmark or share a link that goes directly to that section of the page.
Instead of pointing to another page or another section of the same page, hyperlinks can also invoke other actions. For example, if you want a hyperlink to start a new email message to a particular email address when activated, just set the
href attribute to
mailto:email@example.com. For example:
<p>For more information <a href="mailto:firstname.lastname@example.org">contact us by email</a>.</p>
For more information contact us by email.
You can also preset the subject line and carbon-copy addresses. See the mailto syntax reference for more details.
A handy variant for mobile phones is the
tel:some-phone-number syntax. When activated, these links ask users if they want to dial the number after the
tel:. Here's a quick example:
<p>For more information <a href="tel:+12065551212">give us a call!</a>.</p>
For more information give us a call!.
On tablets and desktop browsers, these links may offer to launch various audio/video chat applications, such as Facetime or Skype.
Note that it's always a good idea to include the country code in
tel: links, as people from other countries may want to click the link to dial. The country code for the USA and Canada is
1, and country codes are prefixed by a
+, so the number above starts with
The last elements to mention are
<span>. These elements stand for "division" and "span" respectively. They don't connote any particular meaning, but they are used whenever you need to group some content for other purposes. For example,
<div> is used often to group a set of elements that you want to style in some particular way (e.g., common background color). And
<span> is used for a run of text within a paragraph that you want to style differently than the text surrounding it.
You will see
<span> used quite a bit as we get into building more complex HTML pages.
That's all there is to it. An HTML page:
<head>element contains meta-data about the page
<body>element contains the content you see in the browser window
Now that you know the basics of HTML, it's time to see how you can style your pages using CSS.