html-introduction
Last updated
Last updated
Explain what HTML is and why it's important in the context of web development
Read a basic HTML document
Write basic HTML tags
So far we've covered many concepts in small pieces to help you focus your learning. This lesson reviews some previously-seen concepts, but will focus on integrating them, not introducing them.
HTML, or HyperText Markup Language, is a markup language which describes the structure and semantic meaning of web pages. Web browsers, such as Mozilla Firefox, Internet Explorer, and Google Chrome interpret the HTML code and use it to render output. Unlike Ruby, JavaScript and other programming languages, markup languages like HTML don't have any logic behind them. Instead, they simply surround the content to convey structure and meaning.
Every web page you've ever visited is structured using HTML code. Being able to read and understand an HTML document is one of the most essential tools in a developer's toolbox.
HTML consists of different elements. Each element consists of tags, which wrap around content. For example, say we wanted Hello World to appear as a paragraph. We could use the p element, which consists of an opening p tag and a closing p tag.
Elements, like our p tags above, won't be displayed in the browser. Instead, they affect how the content itself is displayed. Technologists might say that the tags "affect how the content is rendered by the browser."
This would render as:
We can also 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.
All HTML documents begin with a "doctype declaration" tag, which tells our web browser which version of HTML to use. HTML is a language that is currently evolving — just like English. When we open "Romeo and Juliet," our expectation is that the "doctype" is "Elizabethan English." In the same way "Elizabethan English" has changed to a more modern form, HTML 1.0 was essentially the same as modern HTML5 but had some tags we don't use any more and was lacking some tags we use often today.
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 declare <!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.
Every HTML page is made up of two primary sections: a head and a body. The head element contains metadata about the HTML document and other information for the browser, while the body element contains the actual content.
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'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.
In addition to changing how the text is displayed, search engines use headers to help determine what a web page is about. When we provide semantic markup, machines can infer the "main points" of a page. A well structured article will generally have its principal arguments bracketed by low-number header tags -- this very document does exactly that!
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, it's helpful to know what's being displayed. If you're in a remote community where internet access is expensive, you might choose to disable images and only pay to download those which you absolutely need. So while an img will inject an image and "work," honoring the Web's vision for openness and inclusivity requires that we provide the alt tag as well.
<img src="URL_TO_IMAGE" alt="Picture of a Dog">
Some other useful HTML elements are lists. We can make bulleted, or unordered lists, using opening and closing ul tags. Inside, we can nest an li, or "list item" element for each item on our list.
This would render as:
My Favorite Things in No Particular Order
Coffee
Vinyl Records
Pickling
____
We can also make a numbered, or ordered list, using an ol tag.
Would render as:
Top 5 Pizza Places in NYC
DiFara Pizza
Lucali's
Sal and Carmine's
Juliana's
Joe's
____
We can also alter any number of attributes inside of the opening tags. 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 , we could do so as follows: