- Identify patterns for tags, markup, and content
- Define the document type tag:
<doctype> - Define the HTML content area with the
<html>,<head>, and<body>tags - Identify an HTML comment
- Identify the most common HTML elements
So far we've been introduced to a lot of vocabulary and have had an "experience" writing HTML.
In this lesson, we're going to introduce you to some more essential HTML tags.
Every web page you've ever seen in a browser is the rendered output of HTML that was requested by a browser.
HTML, or HyperText Markup Language, is a markup language that describes the structure and meaning of web content. Web browsers, such as Mozilla Firefox, Internet Explorer and Google Chrome interpret the HTML code and use it to create rendered output. Unlike Ruby, JavaScript and other programming languages, markup languages like HTML can't process logic. You can't write in HTML: "print this line 3 times" or "if it's Thursday, make the heading 'Baloney Sandwiches for Lunch!'"
HTML consists of different markup elements which are comprised of markup
that "wraps" content. For example, say we wanted Hello World to appear as
a paragraph. We could use the p tag, which consists of an opening p tag
and a closing p tag. The wrapped content is Hello World. Here's the HTML
code:
<p>Hello World</p>Tags, like our p tags above, won't be displayed in the browser. Instead, they
affect how the content itself is displayed.
We can also add attributes inside the opening tag. For example, the a
element, which is used for links, has an href attribute to specify the
destination address of the link. If we wanted to link to
www.flatironschool.com, we could do so as follows:
<a href="http://www.flatironschool.com">Flatiron School</a>This would render as:
Attributes will become especially important as we start working with Cascading Style Sheets (CSS) to make our pages look better.
We also frequently nest elements inside of each other. To have a link displayed
as a separate paragraph, we could nest an a element inside of a p.
<p>This <a href="http://www.google.com">link</a> will be a part of a separate paragraph.</p>This would render as:
This link will be a part of a separate paragraph.
In the following steps, we're going to create an HTML file. You might want to use your Sandbox and type along.
We'd like to introduce you to a new tag, a tag that defines the entire HTML
document. Its called the doctype tag. The HTML standard says that all HTML
documents begin with a "doctype declaration" tag. It should go very first.
If one is missing, most browsers pretend one is there, but you should always be explicit and define it yourself.
The doctype tag tells our web browser which version of HTML to use. HTML is a
language that is still evolving. We might call that the doctype of Romeo &
Juliet is "Elizabethan English." The doctype of a speech by Barack Obama is
"Modern English." The two are more similar than different, but some things
aren't supported anymore.
Here's another surprise: not all HTML tags have to be explicitly closed. Some are considered "self-closing." Since it's not wrapping any content, our doctype declaration doesn't require a closing tag.
To use HTML5, the current up-to-date version, we can simply write
<!DOCTYPE html> at the top of our HTML files.
<!DOCTYPE html>Next, we add an opening and closing html tag. This tells the web browser to
interpret everything inside the tags as HTML code.
<!DOCTYPE html>
<html>
</html>HTML pages have two primary sections. They are the head and the body. The
head element contains metadata (or "data about the data") about the HTML
document and other information for the browser, while the body element
contains the actual content.
<!DOCTYPE html>
<html>
<head>
<!-- metadata about the HTML document as a whole -->
</head>
<body>
<!-- content of our page will be here! -->
</body>
</html>Let's also take a brief moment to recognize how to add comments into an HTML
document. These won't get rendered to the browser at all: they're just helpful
notes for the author. We included two in the previous section, they begin with
<!-- and end with -->.
<!-- NYC Pizza is world-famous, cheap, and loved by both vermin and human alike! -->
<p>Top 5 Pizza Places in NYC</p>This will render as:
Top 5 Pizza Places in NYC
Once this basic skeleton is in place, we're ready to start introducing content that we can mark-up with HTML.
We've already looked at some common HTML elements, such as a and p. Let's
take a look at some more HTML elements.
HTML gives us access to different header elements, ranging from h1 to h6,
with h1 being the largest and h6 being the smallest.
<h1>Dogs!</h1>
<h3>Why Dogs are Great</h3>
<h6>Different Breeds</h6>These would render as:
In addition to changing how the text is displayed, search engines use headers to help determine what a web page is about.
We can embed images on our web pages using the img element. The img element
doesn't have a closing tag. The src attribute tells the browser where to find
the image. The alt attribute will be displayed if an image can't be loaded,
and also describes the image to search engines.
The alt tag presents a moment to talk about an important principle behind Tim
Berners-Lee's vision for the Web: it is inclusive. If you're using assistive
technologies because you have a sight impairment, you shouldn't be cut off from
the web. If you're in a remote community where internet access is expensive,
you might choose to disable images, but not lose the web.
While an img will "work," honoring the Web's vision for openness and
inclusion requires that we provide the alt tag as well.
<img src="URL_TO_IMAGE" alt="Picture of a Dog">
The <img> tag is also an example of a self-closing tag. You don't have to
write:
<img src="URL_TO_IMAGE" alt="Picture of a Dog"></img>
We can make bulleted, or unordered lists, using opening and closing ul tags.
Inside, we can nest a li, or "list item" element for each item on our list.
<h5>My Favorite Things in No Particular Order</h5>
<ul>
<li>Coffee</li>
<li>Vinyl Records</li>
<li>Pickling</li>
</ul>This would render as:
- Coffee
- Vinyl Records
- Pickling
We can also make a numbered, or ordered list, using an ol tag.
<h5>Top 5 Pizza Places in NYC</h5>
<ol>
<li>DiFara Pizza</li>
<li>Lucali's</li>
<li>Sal and Carmine's</li>
<li>Juliana's</li>
<li>Joe's</li>
</ol>Would render as:
- DiFara Pizza
- Lucali's
- Sal and Carmine's
- Juliana's
- Joe's
With this, you now have the knowledge to craft your own, simple HTML documents. You should be feeling comfortable with the concepts of markup, tags, and content. You've had some practice seeing HTML change rendered text.
In this lesson, we've rolled in some of the "formal rules" of HTML. While browsers generally do a great job guessing what you meant, we want to follow the guidelines to make sure we don't get any surprises.
Keep practicing!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent