Learn basic HTML structures and elements
We have seen in last chapter what we are going to learn in these notes.
This chapter is complete introduction to HTML and its elements. As I knew you all have very sound understanding in HTML and CSS, it is time to dig a little deeper into HTML and examine the different components that make up this language.
In order to start building websites, we need to learn a little about which HTML elements are best used to display different types of content. It is also important to understand how elements are visually displayed on a web page, as well as what different elements mean semantically.
Using the proper element for the job goes a long way, and we will want to make well informed decisions in the process.
Moving forward, as new elements are introduced, we will talk about what those elements actually mean and the type of content they best represent. Before we do that, though, lets look at two elements divs and spans that actually do not hold any semantic value. They exist for styling purposes only.
This chapter is complete introduction to HTML and its elements. As I knew you all have very sound understanding in HTML and CSS, it is time to dig a little deeper into HTML and examine the different components that make up this language.
In order to start building websites, we need to learn a little about which HTML elements are best used to display different types of content. It is also important to understand how elements are visually displayed on a web page, as well as what different elements mean semantically.
Using the proper element for the job goes a long way, and we will want to make well informed decisions in the process.
Moving forward, as new elements are introduced, we will talk about what those elements actually mean and the type of content they best represent. Before we do that, though, lets look at two elements divs and spans that actually do not hold any semantic value. They exist for styling purposes only.
Identifying Divisions & Spans
Divisions, or divs, and spans are HTML elements that act as containers solely for styling purposes. As generic containers, they do not come with any overarching meaning or semantic value. Paragraphs are semantic in that content wrapped within a "p" element is known and understood as a paragraph. divs and spans do not hold any such meaning and are simply containers.Block vs. Inline Elements
Most elements are either block or inline level elements. What is the difference? Block-level elements begin on a new line, stacking one on top of the other, and occupy any available width. Block-level elements may be nested inside one another and may wrap inline-level elements. We will most commonly see block-level elements used for larger pieces of content, such as paragraphs.Inline-level elements do not begin on a new line. They fall into the normal flow of a document, lining up one after the other, and only maintain the width of their content. Inline-level elements may be nested inside one another; however, they cannot wrap block-level elements. We will usually see inline-level elements with smaller pieces of content, such as a few words.
Both divs and spans, however, are extremely valuable when building a website in that they give us the ability to apply targeted styles to a contained set of content.
A div is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web pages layout and design. A span on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.
We will commonly see divs and spans with class or id attributes for styling purposes. Choosing a class or id attribute value, or name, requires a bit of care. We want to choose a value that refers to the content of an element, not necessarily the appearance of an element.
For example, if we have a div with an orange background that contains social media links, our first thought might be to give the div a class value of orange. What happens if that orange background is later changed to blue? Having a class value of orange no longer makes sense. A more sensible choice for a class value would be social, as it pertains to the contents of the div, not the style.
