HTML fundamentals
When working with JavaScript, it’s essential to have a fundamental understanding of HTML, because these two languages work hand in hand. HTML defines the structure of our content, and then JavaScript manipulates that content.
HTML is made up of elements, where tags are used to markup, aka describe, content which the browser then interprets.
Example elements:
- h1 (heading 1) - used to indicate the primary heading of a page. There are six levels of heading elements available: h1, h2, h3, h4, h5, h6
- img (image) - used to display an image on the page
- ul (unordered list) used to display an unordered list of items
- ol - (ordered list) - used to display an ordered list of items
- li - (list item) - used to display individual items within a list
- a - (anchor) - used to create links
- p - (paragraph) - used to display a block of content that might contain text, images, or other elements.
To understand the syntax for elements and tags, study the following diagram:
The above element examples focus on content visible within the page, but there are other “bigger picture” elements used to structure and configure the page as a whole. To understand the role of these elements, study the following diagram:
HTML has about 140 different elements, but you’ll find that there's probably a subset of maybe 10-15 tags you will use most commonly.
Skim the MDN list of all elements to familiarize yourself with what is available, and look up specific elements in the MDN docs as you encounter them.
Applying the notes above, take a moment to skim the content within your psy1903/basics/index.html file and answer these questions:
- What HTML elements are being used?
- Which of the elements contain other elements?
- Which of the elements use attributes and what are they?
- Describe what happens to the page you remove the
</h1>tag.