HTML
Last updated
Last updated
Table of Contents
The most basic kind of a file is a .txt file which simply stores a string of characters. A .txt file is not considered "code" because its characters are interpreted literally.
A markup language on the other hand contains symbols that will not be interpreted literally and instead influence how the text inside is viewed.
Markdown (written in .md files) is considered a markup language. For example, when we view ("render") the double-asterisk symbols ** surrounding a word, the text inside will become bold:
Similarly, HTML (Hypertext Markup Language) is a markup language and our browsers are the applications we use to view them.
To illustrate the difference between markup languages and regular .txt files, do the following:
In your unit-2 folder, create a new folder called intro-to-html
Create two files called index.txt and index.html
Put the code above inside both of them:
Right click on the index.html file and select Reveal in Finder/Explorer
Open Chrome. Then drag and drop the index.html into the tab bar (there should be a + icon)
Then do the same for your index.txt file.
What is the difference between how they are presented by Chrome?
At the end of the day, your browser is essentially built to render text and images.
The browser can interpret .html files and render content with style. It can also execute JavaScript!
The first HTML file you should create for a new website should always be index.html
index.html is a magic name that servers will automatically look for if a user enters a domain without a file extension: test.com is the same as test.com/index.html.
index.html is commonly known as the entry point
file:// protocol vs the http:// protocolWhen you open an HTML file directly to view in your browser, your browser uses the file:// protocol to retrieve the .html file from your file system.
Most of the time, your browser will be using the https:// protocol to get the .html file from a server.
A server is just another computer, somewhere else, that provides a resource to another computer (over the internet in this case)
HTTPS (Hypertext Transfer Protocol Secure) is how your browser communicates with a server.
HTML (Hypertext Markup Language) is the language used to build webpages. It describes content and structure of a webpage. In other words, what to display and where/how to display it.
HTML elements are created using a pair of opening and closing tags:
We create a comment with the syntax <!-- comment -->
Notice the opening tag (<tagName>) and the closing tag (</tagName>) for each HTML element
The tag name determines how the content inside them is displayed (e.g. as a heading, a paragraph, or a bulleted list)
Only the content between the tags is displayed to the user. The angle brackets (<>) and the tag name are not displayed.
As you may have noticed with the ul element, tags can nest other tags inside them.
An element that is commonly used to contain other elements is the <div> element (short for "division").
Nested elements should always be indented one level for readability.
Other examples of this are the ordered list and unordered list tags and their list items:
We refer to the element acting as the "container" as the parent and the elements nested inside as the children. Tags that are in the same nesting level next to each other are sibling tags.
One of the most basic elements in a website is a link to another page. We create a link element (a.k.a. an "anchor") using the <a> tag:
Notice that this tag contains extra code inside of the opening <a> tag! href stands for "hyperlink reference" and is an "attribute". Attributes provide additional piece of information used to render an element and are included in the opening tag.
In this case, the content between the tags is what the user will see while the href attribute tells the browser where to redirect the user after clicking on the link.
Links can take you to online sites, local or absolute pages of our own, or even reference elements within the page (they link to ids)
Be careful with relative links: "/" is the root of the server which may not be where you mean.
Local links ./, ../ will direct you from your current directory.
Links can also be nested, but will still flow seamlessly in the final document.
Link text should always be descriptive of where you're going, never just put "click here."
Another common element type is an image. Images have one required attribute src and an optional attribute alt
Notice that the image element doesn't require a closing bracket. It is considered a self-closing tag.
src is the source location of the image
alt describe the picture to screen readers.
If the content is central to your site, you must include an alt attribute
If the picture is just a decoration (like a background image) you do not need an alt attribute.
Be specific with your alt text.
src can be a hyperlink (a link to another web page) or a local link:
A cooler version of an image with a caption is figure, look it up!
Two attributes that we can apply to ANY element are id and class. These allow us to label elements.
ids mark a tag as a single, unique, important item on your page.
classes are for denoting a bunch of related tags, and can appear more than once per page.
Both ids and classes are used to reference elements on pages so that they can be accessed, either by JS or CSS.
They are a way to differentiate tags on your page from other identical tags.
id and class names are case sensitive, cannot start with numbers, and can't have spaces.
Stylistically, in pure html, you'll see kebab-case names.
You can have multiple classes by separating with spaces, but only one id.
You can include both an id and class on a single tag.
id = one name per page, one per tag
class = multiple per page, multiple space separated names per tag
The way that HTML works is it's a "document" filled with "tags".
Let's start simple with some boilerplate to set up our document
These two tags make sure our browser knows what we're dealing with.
Just copy them in without worrying.
There are other doctypes and languages, but this is what we'll use
The head tag is where we put meta information, scripts, links, and titles.
The title tag is the only one visible to our users as what appears in the browser tag.
meta does other things like tell the mobile browser how big to start the page and what character set we're using.
The body tag is where we can put things for our users to see.
From here on out, always include the boilerplate above
VS Code users: start with an empty document, type html and then from the popup, select html:5 and hit Enter
Create a new HTML file and type in html:5
So far, all the tags we've made were semantic — their name told us about their function: h tags are headings, a are links, p are paragraphs.
However, there's another kind of tag that conveys no meaning: non-semantic.
Pretty much the only non-semantic tags you'll see are div and span. These are just for grouping other related tags together (div) or calling out a particular section of text (span).
Non-semantic tags should only be used for grouping or grabbing parts of text.
Q: What is different about how the browser shows the .txt and .html files?
Q: Browsers are specialized "viewer" applications for .html files. What are other examples of applications that are made to view specific kinds of files?
Q: How do you think these different tags affect what is displayed?
Q: What is wrong with the HTML below?
Q: When should you use <ol> and when should you use <ul>?
Q: In the example above, which elements are parents, which elements are children, and which elements are siblings?
Q: What is wrong with this HTML element?
Q: How would you create a <p> element with the id "caption-1" and the classes "italic" and "centered"?
Q: What page does this anchor tag take us to?
Q: Which semantic tags should we use in the code snippet above?
