# HTML elements types overview ## 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)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). ## 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!" ## Navigate the MDN Reference Guide The [MDN HTML Reference Guide](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 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 `` tag | *The `` tag and that's it!* | | **Document metadata** | Website data that goes in the `` 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 `` tag | *The `` 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, `