There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.
Learn to utilize common HTML tags and attributes to mark up a basic page of content
The fourth lesson deals with “expanded basic elements” of HTML:
- Attributes
- More elements
- Nesting elements and indentation
Expanded ‘Basic’ elements
This part of the Lambda School text explains that there are dozens of HTML elements available, but in the vast majority of cases, only a handful are ever used. This small amount, coupled with some CSS is able to present almost everything needed by most developers on a web page.
There’s also a style of design called “semantically correct” which uses all available HTML elements, particularly for accessibility and SEO (search engine optimization). That method isn’t covered in the course, but we’re asked to be aware of it.
- Lifewire: Why Use Semantic HTML?
- HTML.com: Learn How To Write Beautiful Semantic Markup – Perfect For HTML Beginners
Attributes
HTML attributes are special keywords that modify the behavior of elements on a page. They provide information to elements which control their behavior. Sometimes these attributes are optional, and other times they’re required for an element to function properly (or at all).
The first way that we learned to supply data to an element was to enclose it between two tags, like text in a <p>paragraph</p>. Attributes are a second way, and are included inside of the opening tag of an element. The following section will show attributes in three new elements: anchors, images and unordered & ordered lists.
More Elements
1. Anchors: Anchors are written using the <a> and </a> tag. They allow developers to create links to other web pages or to areas inside of the current web page. Anchors are always modified with the href attribute to tell the browser what address a link must point to. The following two examples point to Lambda School’s website and this blog’s homepage, respectively:
<a href="http://www.lambdaschool.com">Lambda School</a> <a href="https://neophyte.home.blog/">REDO FROM START</a>
2. Image: The <img> element is used to display an image onscreen. Like an anchor, it also requires the use of an attribute to let the browser know what image to display, and where the image is located (its name and address). This attribute is called src, or “source”.
Image tags are one of the types that don’t need a closing tag – they’re self-closing. The whole tag can be closed by including a “/” before the closing bracket of the opening tag. The following example displays a picture of yours truly, from this blog:
<img src="https://neophyte.home.blog/wp-content/uploads/2019/01/ready-player-1.jpg"/>
3. Unordered and Ordered Lists: <ul> and <ol>, respectively, create lists, which are essentially just bulleted (unordered) or numbered (ordered) lists. They’re closed using the </ul> and </ol> tags. These elements set up the browser to expect a list. The items in the list are each included using the <li> and </li> tags – for list item. List items can contain any element – they’re not relegated to text – so they can even contain images or other lists (essentially a nested list)!
<ul> <li>Bread</li> <li>Milk</li> <li>Eggs</li> </ul> <ol> <li>Five golden rings</li> <li>Two turtle doves</li> <li>A partridge in a pear tree</li> </ol>
Nesting Elements and Indentation
As per the Lambda School text:
We’ve seen in previous examples that we can nest elements inside of tags. In fact, this is a major part of writing HTML. Nested elements are referred to as children and the top level elements as parents. You will see this type of structure throughout your time writing HTML (and all code for that matter). One thing to note is that while indentation is not a requirement of HTML (nor of CSS and JavaScript), it is still often practiced as a readability issue. We not only write code for ourselves, but also for our teammates and those that come after us. Indentation lets your code be much more easily read and understood.
Indenting, or nesting, code is a common practice across many, if not all, modern programming (and markup) languages. Its done to show what elements are part of a specific set of code, much like how an outline is used in writing for many disciplines. This improves human readability and gives order and structure to what could otherwise become blocks of text.
REDO FROM START 
One thought on “Lambda School Pre-Course 4: Learn to utilize common HTML tags and attributes to mark up a basic page of content”