102-4. Sitebuilding: Wireframing, HTML, & Semantics

Wireframing

Wireframing is a process of outlining the functionality and flow of a site (or other end product) conceptually before any coding. This may be done with prototyping software or strictly visually (digitally or otherwise) with the aim of aiding end use.

HTML

Hypertext Markup Language is the coding language that comprises web pages.

The basic unit of HTML is an element, consisting of the content –such as text or another feature that is not necessarily rendered in the end product– and any attributes that can be used to identify particular elements, framed by one or more pairs of tags.

Tags

Tags are entered as angle brackets around element names, with the closing tag’s element name preceded by a slash. In the case of a “paragraph” element: <p>Sample Text</p>

Some elements, such as images, do not use closing element names and contain the entire element within one set of angle brackets, rather than wrapping content: <img src="images/example-path.png" alt="Alt Text Here"> These are called “empty elements.”

Multiple “nested” tags may be present in the same element (and around the same content), but subsequent tags must be closed before initial tags.

Attributes

Attributes can allow an element to be referred to or otherwise interacted with. Attributes must be spaced from element names and from one another. Quotation marks should be used around the value assigned for the attribute, in the format: AttributeName="AttributeValue" This must be combined with usual tag formatting, such as: <p samplestatus="SampleYes">Sample Text </p>

Semantics

The semantics of code are the functional effects of that piece of code. These effects should be thought of with respect to the data, not end rendered pages (in the case of HTML) or other products. Semantic context in the case of web pages may allow for the same content to be rendered or interacted with differently, and can aid searching both for a page with a search engine and within the page itself.