Skip to main content

Working with HTML

At its heart, HTML (HyperText Markup Language) is a fairly simple language made up of elements. These can be applied in various ways. They can give pieces of text different meaning in a document, structure a document into logical sections, and embed content such as images and videos into a page. Pure HTML can be viewed as the skeleton of a website. Programmers usually don't view HTML as a programming language, because it is actually just markup.

Creating a page​

<!DOCTYPE html>
<html>
  <head>x
    <meta charset="utf-8" />
    <title>My html page</title>
  </head>
  <body>
    <img src="images/hero.jpg" alt="" />
  </body>
</html>

An HTML page will at least contain the following elements:

  • <!DOCTYPE html> — Tells the interpreter, a browser, how the page should be parsed
  • <html></html> — Wraps the html content of the document
  • <head></head> — Contains the metadata; like the language the document is written in
  • <body></body> — Contains the content that you want to show to web users when they visit your page

As you might have noticed, all elements serve a different purpose. While some elements have a specific purpose like displaying an image, others can be used for a multitude of purposes. The goal when writing HTML should be to use the least generic element possible. A <div> element serves as a generic container, while a <nav> also wraps other elements, but is more explicit as its intent is to provide navigation links. An HTML element describing its purpose can also be called a semantic element. As a developer, you always try to be as semantically correct as possible.

Accessibility​

Broadly speaking, when we say a site is accessible, we mean that the site's content is available, and its functionality can be operated, by literally anyone. As developers, it's easy to assume that all users can see and use a keyboard, mouse, or touch screen, and can interact with your page content the same way you do. However, you might underestimate the percentage of impaired users on the Internet. Writing good semantic HTML code, is a great first step in making your application accessible for all users. Writing bad HTML code can lead to an experience that works well for some people, but creates issues that range from simple annoyances to show-stoppers for others.

In just a few weeks, we will spend time into learning more about accessibility, and you will obtain you WCAG (Web Content Accessibility Guidelines) certificate.

Working with elements​

When you're working with elements you can find out more about the required and optional attributes an element has by looking these up on a proper source. One of these sources is MDN which can prove to be a great asset when writing HTML, CSS, JavaScript or anything web related.

Main content​

  • <main> Represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. A document must not have more than one <main> element that doesn't have the hidden attribute specified.

Sectioning content​

  • <header> Defines a page area that typically contains a logo, title, and navigation.
  • <nav> Defines a section that contains navigation links that appear often on a site. You can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element.
  • <article> Defines a piece of self-contained content. It does not refer to the main content alone and can be used for comments and widgets.
  • <aside> Should be used sparingly to indicate large complementary content. When using multiple landmarks an accessibility property called aria-label should be added to indicate its role.
  • <section> Defines a section of a document to indicate a related grouping of semantic meaning.
  • <footer> Element typically contains information about the author of the section, copyright data or links to related documents.

Typographic content​

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Text headers
  • <p> Paragraph
  • <span> Inline element to help style text within other elements as <p>and <li>
  • <hr> Horizontal ruler
  • <a> (anchor) Link
  • <ul> Unordered list, <ol> Ordered list and <li> List element
  • <img> Image
  • <div> Divider, a generic element used to wrap content

Further reading​