Structuring the Web

Designing with Web

Are you ready for this?

Though it may have looked like a digression to discuss about XML, it's going to be way easier to use HTML now.

So, What is HTML?

HTML stands for HyperText Markup Language and is the underlying foundation for all websites. Like XML, HTML is not a programming language, it is a markup language. It is used to define the structure of a web page and describe semantically the content, i.e. whether our web content should be recognized as a paragraph, list, title, link, image…

We're going to re-use all the bits we've seen with XML. The main difference is that HTML elements names, and their possible attributes, are already defined: see HTML elements reference. We'll use HTML5: the latest evolution of the language HTML, with new elements, attributes, and behaviors, accompanied by a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.

Let's see HTML in action with a list of the basic elements.

Headings and Paragraphs

Let's start with paragraphs, to define it you can use the p element for paragraph or h1 for heading. Think of those elements as a structure to help you organize your content. Like an author would organize its book with chapters, sections, headings or paragraphs.

Try to organize this page with different headings and paragraphs.

There are 6 levels of headings in HTML, from h1 for the most important title on a page, h2 for subtitles, down to h6 (least important). Usually, a page contains 3 or 4 max different types of headings and search engines look for the most important ones to identify the content of pages.

We can also emphasize a part of text using em element, or make it stronger using strong:

Remember nested elements? It's exactly what we're using here.
About nested elements, we talk about an ancestors/descendant relationship between elements. In our example above:

  • the first p element is the parent of 1 direct child, the em elements.
  • the p are siblings to each others.
  • the em and strong elements have no relationship.

It is common when writing HTML to miss the closing of an element or cross nested elements. Glitch signals errors by red circles on the left of your code, move your pointer over them to get informations about your error. If you can't fix it, copy/paste your code into W3C's Markup Validation Service.

There also exist b (for bold) and i (for italics) markups but these markups are not semantics: they represent stylistic choices while HTML markups should describe semantically the information they provide. It is therefore recommended to use strong and em markups instead.

Lists

Meme ‘List all the things!’

Another way to structure text with HTML elements is creating lists. A list element will contain several list items, li elements. There are 2 types of lists elements:

  • unordered lists: ul, the list items will be marked with bullets (small black circles).
  • ordered lists: ol, the list items will be marked with numbers.

Lists can have a type attribute, to specify the type of bullet for ul or the type of numbering for ol.
Add a type attribute to the lists above and try the following options: 

<ul type="square">
<ul type="circle">
<ul type="disc"> <!-- Default value -->

<ol type="I"> <!-- Upper-Case Numerals -->
<ol type="i"> <!-- Lower-Case Numerals -->
<ol type="A"> <!-- Upper-Case Letters -->
<ol type="a"> <!-- Lower-Case Letters -->
<ol type="1"> <!-- Default-Case Numerals -->

Empty Elements

Some elements have no content, and are called empty elements. For example the br element is used for breaking lines in a paragraph instead of creating another paragraph, and consists only of the opening tag <br>:

Add some br elements and take a look at the results. Do you see any changes?

The browser knows which elements are considered empty and is therefore not looking for their closing tag. When looking on the web, you may also encounter empty elements written with a forward slash at the end of the tag, like: <br />, this is just a relic from older versions of HTML.

Images

We've seen some text elements, but how do we integrate images with plain text?
The img element is an empty element that contains two attributes, but no closing </img> tag, and no inner content. This is because an image element doesn't wrap content to have an effect on it.

The value of the src (source) attribute specifies the URL of an image.

The alt attribute provides alternative information for an image, if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

To upload images on Glitch, we can click on assets in the sidebar, then drag and drop our file:

To get the source URL of our image, we have to click on our image, then click on the "Copy URL" button and finally paste it as the value of the src attribute of an img element:

Now that you know how to upload a picture, it's your turn to display your favorite ones!

Hyperlinks

Hyperlinks are the essential element of HyperText, allowing us to move from a page to another by a simple click. You all know them by the shorter term: a link, created using an a (anchor) element. We can wrap some text or an image element inside an a element and use its href attribute to link to another URL:

Change the url and try to link it to your favorite page.

Media Elements

Using assets with Glitch, just like we did for images, we can also upload mp3 files to use with audio elements, and mp4 files with video elements:

We must nest a source element inside video and audio elements to provide the URL of our media files. We can also nest a p element that will be visible only if the browser does not support these elements

Iframes

Finally, we can also embed webpages or elements of other sites using iframe elements. This option for sharing content is used by a lot of sites like Youtube, Soundcloud, Google Maps and more, and they provide the code needed:

If you're curious, you can get more background on iframes right here: From object to iframe — other embedding technologies

Anatomy of an HTML document

We've seen a bunch of HTML elements and can now provide the browser a content that is now semantically structured, however to form an entire HTML page, we need to provide a complete HTML structure to our document:

Here we have:

  • <!DOCTYPE html>: the doctype is like XML Declaration, it informs the browser of which version of HTML is used. This one is the doctype corresponding to HTML5.
  • <html></html>: the html element wraps all the content on the entire page, and is sometimes known as the root element.
  • <head></head>: the head element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like the title that you want to appear in search results, character set declarations, and more.
  • <meta charset="utf-8">: this empty element sets the character set your document should use UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • <title></title>: thetitleelement sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
  • <body></body>: the body element contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

HTML Layout

With more complex content, we will need a way to organize content in groups, like for centering all elements of the body of our page inside a single column, or having multiple columns to create a grid.

Look at the following layout from the Washington Post:

Screenshot of the Washington Post's homepage

The elements are oganized/grouped in articles, column, grid… This is done using the div element, a generic container providing a way to divide content into groups. It has no effect on the content or layout until styled. As a "pure" container, the div element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

If we disable styling (that we'll see in the next section), using the Web Developer plugin (available for Firefox and Chrome), elements are just titles, paragraphs, lists and images, nested using several levels of div elements:

With HTML5, arrived a lot of new semantic elements to describe more precisely what the different sections of the page correspond to, like:

  • section: represents a standalone section (which doesn't have a more specific semantic element to represent it) contained within an HTML document.
  • article: represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g. in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
  • nav: represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
  • header: represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.
  • footer: represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
  • aside: represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

These act just the same as div elements but are more descriptive about their content and their usage. For now, you can just use div elements to create groups and nested groups of elements to structure content.

Observe, for example how intricated is a p element on the front page of the NewYTimes:

With Firefox and Chrome, you can study the structure of any webpage by doing a right click, then "Inspect":

You can double click an element and change its content or delete it from the page by pressing the del or ⌫ (backspace) key. Of course, the changes are only in your browser and do not affect the site; refresh the page to reload original content.

Sum Up

Resources & going further

Quiz

Test your knowledge

This quiz is mandatory. You can answer this quiz as many times as you want, only your best score will be taken into account. Simply reload the page to get a new quiz.

The due date has expired. You can no longer answer this quiz.

Good job for completing this part about HTML!
You're now ready to dig into our next section: Styling the Web

Celebrities doing a standing ovation