Html Elements

Problem Statement

Because of the pace of change in web technologies, it often feels like as soon as you learn something it's already obsolete. How can a developer stay up-to-date? Developers need to be able to reference the latest documentation in a just-in-time fashion.

When you have a question, you should consult the best source, take what you need, and use it. The purpose of this README is to help you get oriented with a popular source of HTML documentation, the Mozilla Developer Network (MDN).

Learning Objectives

  1. Introduce Mozilla Foundation and MDN
  2. Navigate the MDN Reference Guide

Introduce Mozilla Foundation and MDN

The Mozilla Foundation is an open-source company that has a long history with browsers and browser technology.

Mozilla is a reliable reference for the latest HTML tags. There are many other sites online that exist to discuss these tags, but when you want a thorough explanation of a tag, Mozilla is often a great choice.

There are some drawbacks in using MDN. Because Mozilla is so trusted, their information tends to be ... exhaustive. Because it's so ahem thorough, it can sometimes be hard to digest. Their information tends to be for reference not tutorial purposes.

Drawbacks aside, MDN is a good solid starting place for research and it can take you from "Does something like this exist?" to "Now I know that this thing exists, maybe I can find a tutorial!"

The MDN HTML Reference Guide is a list of HTML tags grouped together by their functions. These sections are not entirely "human readable," which makes it a bit difficult to understand where to start looking. Some of the headings are very technical-sounding.

To help you find what you need in this listing, we've created this helpful table to help you convert between MDN-ese and the HTML terms you have learned. We've also listed only the MDN content sections that you're most likely to use:

Summary of the MDN HTML reference guide

MDN Section Title Human-Friendly Section Title Summary
Main Root The <html> tag The <html> tag and that's it!
Document metadata Website data that goes in the <head> tag Metadata contains information about the page. Information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page.
Sectioning Root The <body> tag The <body> tag and that's it!
Content sectioning Headings, titles, division, sections, footers, etc. Content sectioning elements allow you to organize the document content into logical pieces.
Text content Formatting for text: list items, horizontal rules, figures listings for under images Use HTML text content elements to organize blocks or sections of content placed between the opening  and closing  tags.
Inline text semantics Citation, emphasis, underlines, etc. Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
Image and multimedia Adding pictures and media! HTML supports various multimedia resources such as images, audio, and video.
Embedded content Advanced: Using material hosted elsewhere on other servers, <iframe> is the biggie here In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.
Scripting Advanced: JavaScript and Drawing Support (Vector Graphics) In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.
Table content Tables Tables
Forms Advanced: Tags for building forms for sign-up or login, for example HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the HTML forms guide.

Conclusion

As developers we will often feel uncomfortable with the fact that the technologies we depend on are always growing and changing. With authoritative guides like MDN, we have found out that we can learn just the little bit we need as we need it.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us