Topic 1 – HTML Template and Tags

HTML, or hyper-text markup language, provides meaning to content. The standard HTML template includes: doctype (states that it’s an HTML document); html tag; head tag (helps browser understand how to display the page and includes the title tag); and body tag (contains all the HTML elements that make up the content). Tags are used to define content; there are currently 114 total HTML tags including headings (h1 through h6), paragraphs, and more ‘specialized’ tags such as blockquote and abbreviation, among many others. There are two types of tags: enclosing tags (used for text content) and non-enclosing tags (used for non-text content).

Topic 2 – Block vs Inline Elements

Document flow defines the way that HTML elements sequentially ‘flow’ down the page in the order they appear in the markup. Almost all HTML elements have a display property of either block or inline. Block elements (such as headings and paragraphs) stack underneath each other down the page, visually forming a new line. This happens because a block-level element box expands to the width of its parent element. Inline element (such as links and images) sit next to each other and only move down onto a new line if they don’t have room to do so. This occurs because inline element boxes ‘shrink-wrap’ its content, and fit around it as tightly as possible.

Topic 3 – Nested Tags and the Parent-Child Relationship

The structure of your HTML creates the Document Object Model (“DOM”). This is the browser’s view of the elements on the page, and state of every element’s properties, from which it can determine the family-tree relationships between the elements. The DOM uses the terms: parent; child; sibling (share a parent); descendant (elements below, nested somewhere within it); and ancestor (elements above them, nesting them at some level). This is similar to the way tagging uses a parent-child relationship, which showcases how the overall structure of a document is created by the way tags are nested inside one another.