JOANA SEABRA

A Webdesign Blog

Design for Web Content

What I learned in week 3

The Structural Layer

This week we talked about the Structural Layer known as HTML – HyperText Markup Language).

Covered topics:

  • HTML context;
  • Anatomy of a page;
  • What is the purpose of markup?
  • Elements and tags;
  • Attributes and values;
  • Structure and relationships;
  • Indentation;

HTML context

The HTML is a markup language developed by Sir Tim Berners-Lee in the 90s. This language was created based in the already existed format named as SGML – Standard Generalised Markup Language.

The first official specification was the HTML 2.0 published by the IETF, the Internet Engineering Task Force later superseded the W3C – World Wide Web Consortium.

After several revisions of HTML, appeared the XHTML an eXtensible language with no new elements or attributes but a difference in its syntax. XHTML is a XML-based language more strict and does not allow the user to get away with coding and structure errors. Also, representatives of companies such as Apple, Mozilla and Opera were disappointed with the direction HTML was taking.

Nowadays, the current standard used by developers and web designers is the HTML5 that is supported by every browser and it is still continuing evolving.

Anatomy of a page

HTML: the Structure Layer

The HTML layer gives structure to documents and meaning to contents. These are two important concepts we should keep in mind when designing a website.

The HTML5 structure consists in text, images, hyperlinks, audio and multimedia files we want users to see when navigating in the website. Every content we might add to our site should be represented in the structural layer.

CSS: the Styles Layer

The CSS layer is about the visual presentation of the website.
(We will talk about it in the future).

JavaScript: the Behaviour Layer

The JavaScript layer gives interactivity to the website.
(We will talk about it in the future).

What is the purpose of markup?

The purpose of markup is to give structure to documents and meaning to content.

Elements and tags

An element is defined by opening and closing tag pairs.

For example: <p>This is an example</p>

In this case, the element is <p>This is an example</p> and the tag is <p>.

Attributes and values

The attributes provides more information about HTML elements. One example where we use attributes is in images. We can give width and height attributes but it is also important to fill in the alt text – that stands for alternative text – and the scr attribute -that helps the browser finding the image file.

Structure and relationships

Block-level elements

A block-level element is used to create large blocks of content like paragraphs <p> or headings. A block-level element can contain inline elements.

Inline elements

Inline elements are within the block-level elements and we can decide its extension.

Examples of inline elements:

  • <strong> element that gives the text a strong emphasis;
  • Images;
  • etc.

Parent elements

The parent element is the containing element with other elements inside. For example the paragraph <p> can be the parent of the <strong> element because the <strong> element is nested inside the paragraph.

Sibling elements

The <ul> and <li> elements are sibling elements once you need both elements to create an unordered list.

Indentation

Indentation is a very important concept when managing html pages once it helps understanding the level of “nesting” between each elements.

Leave a Reply