Images make up a key component of the web and come in a variety of format types (jpg, png, gif, and svg).
The <img> tag is how we embed images into HTML documents:The <img> element has two required attributes:src provides the location (relative or absolute URL) of the image we want to reference.
alt provides an alternative text description of the referenced image for screen readers, search engines, etc.
ListsAnother HTML tag utilized frequently is the<li>, which represents a list item.
We use <li> tags to write out bulleted and numbered lists, and it is also commonly used to craft navigation items for a website and application.
<li> elements must be contained inside a parent element, which most often will either be a <ul> (unordered list) or <ol> (ordered list) element.
The markup for these two types of lists would appear like this in the browser:When using <li> elements as navigation items, we wrap the parent <ul> or <ol> element with a navigation, or <nav> element.
The markup above would be rendered just like the previous <ul> element.
We can then use CSS to style it as a set of navigation items (e.
g.
horizontally aligned, without bullet points, etc.
).
HTML Document StructureNow that we’ve gotten a feel for using tags and creating elements in HTML, it’s time to learn how put that knowledge to use by first exploring how to properly structure an HTML document.
Just as the design and structure of a physical building’s frame is critical to its strength and longevity, so too is the structure of our HTML documents to the functionality and extendability of our websites and web apps.
<!DOCTYPE> Declaration and the <html> TagBefore we write any HTML code in our document, we first need to add a doctype declaration like so:<!DOCTYPE html>This declaration, written as the first line of code in any HTML document, indicates to the browser how the document should be rendered.
MDN web docs provides a solid explanation:“In HTML, the doctype is the required “<!DOCTYPE html>" preamble found at the top of all documents.
Its sole purpose is to prevent a browser from switching into so-called “quirks mode”when rendering a document; that is, the "<!DOCTYPE html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
”Once we’ve declared to the browser the type of document to be rendered with <!DOCTYPE html>, we use the <html> tag to define the root element of our markup.
Sometimes referred to as the main root, the <html> element is top-level element in our markup, meaning all other elements are descendants of the <html> element.
In other words, all of our HTML code will be written inside of the <html> element.
At this point, the markup for our HTML document should like this:HeadThe first element placed inside of our <html> element is the <head> element.
This is where we place all of our document’s metadata — basically, stuff that gets read and interpreted by machines (browsers, computers, etc.
) instead of humans.
As such, code that we write inside of the <head> element does not get rendered in the browser window.
A typical <head> element may include:<meta> tags that provide structured metadata about the document.
There are a variety of different <meta> tags to choose from.
I typically use charset, viewport, and description in my projects.
A <title> tag defining the title of the document.
<link> tags that link external resources to the document (such as external CSS stylesheets, etc.
).
<script> tags that reference or contain executable snippets of JavaScript code.
You may also see <script> tags placed just before the closing </body> tag of a document.
Adding a <head> and associated elements, our HTML document structure should now look something like this:BodyThe next required element in our HTML document is the <body> element.
Any markup or content we want to display to end users should be written within this element.
Anything we write between inside the <body> element will be interpreted and rendered by the browser.
Most of the tags and elements we’ve learned about so far should be placed inside the <body> element.
Building on our HTML document structure example, including a <body> element might look like this:There’s a lot going on above — let’s break down what we’ve written in the <body> element:Our body section begins with a <nav> element and two navigation items (as <li> elements) that include anchor (<a>)tags linking to the About Me and Contact Me sections in the markup.
Next we include a <main> element with an id attribute (id="main-content").
This element indicates to browsers, screen readers, and other assistive technologies that this is where the primary content of the page is located.
Inside of the <main> element we have two <section> elements — one containing the About Me content (id="about-me"), and the other containing a contact form (id="contact-me").
We use elements like <main> and <section> to segment our content into thematically related groupings.
Relationships and NestingA key concept of HTML document structure has to do with the relationships between various elements in our markup.
A diagram showing the basic structure of an HTML document looks a bit like an upside down family tree:Basic HTML document structureWe use the same vocabulary to indicate the relationship between HTML elements as we do with a family tree:All elements contained with a given element are said to be its descendants.
An element that is directly contained within another element is said to be a child of that element.
The containing element is said to be the parent.
Elements higher up in the document structure are said to be ancestors of elements that come later in the markup.
Two elements within the same containing parent element are said to be siblings.
To help indicate these relationships and make our code more readable, we use a technique called nesting when we write code.
Nesting is simply indenting (usually using the tab key) elements within elements to visual indicate relationships between various elements.
Consider the two HTML code blocks below, both of which will be interpreted and rendered exactly the same in the browser:It’s much easier to see that the <h1> and <p> elements are siblings of each other and children of the <body> element in the nested code block than it is to visualize those relationships in the code block without proper nesting.
CommentsYou’ve probably noticed in the various code block examples in this lesson some lines that look like this:<!– This is a comment in HTML.
It will NOT be rendered in the browser, even it it's inside the <body> element –>Comments in our HTML code can help make our markup easier to understand (both for ourselves and other developers), or can be used disable portions of our code from being rendered in the browser.
Well commented code is the mark of an organized and considerate developer ????.
The syntax for HTML comments begins with <!– and ends with –>.
Anything between those characters will NOT be rendered in the browser:ExercisesElement Jumble ExerciseArticle Markup ExerciseForm Builder ExerciseResourceshtmlreference.
io: Super useful guide that you’ll definitely want to bookmark.
You can sort HTML elements by type (self-closing, inline, block, etc.
), and you can also get specifics on each element like proper structure, required and optional attributes, etc.
HTML5 Doctor: Another prime bookmark candidate.
It provides a really handy index of HTML5 elements that you can use to write more semantic markup and avoid the dreaded “div soup.
”HTML Element Reference: MDN web docs is an amazing resources for all things web development, and this comprehensive list of HTML elements is no exception.
HTML Attribute Reference: As we’ve discussed there are lots of attributes that can be applied to the various HTML elements in our markup depending on the type of element being used, our goal for using a particular attribute, etc.
This extensive list of available HTML attributes is a great reference for knowing which attributes can be used with which elements, and what their purpose is.
HTML Content Categories: Another really useful resource from MDN web docs.
This page gives a thorough breakdown of the main content categories, along with a list of specific elements belonging to each category.
.