Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we begin structuring the content of our Explore California site, I want to take a moment to explore some of the basic HTML structural elements and discuss how they should be used within your pages. There are two basic types of HTML elements: Block level and Inline. Block level elements are considered to occupy their own line within the normal document flow, and are typically displayed this way within a browser. Block level elements that you might use frequently include the heading tags, paragraph tags, unordered or ordered lists, and the div tags that help divide content.
Inline level elements usually occur within a block level element, and are often used to identify content within that element. Common Inline level elements include the Strong tag, the Emphasis tag, the Image tag, and the Span tag. So what do these tags do and why do we need them? Well, each of these tags have an inferred logical meaning, and they are used to identify the contents of the tag itself. The H1 tag represents a top-level heading, while text surrounded by an em tag represents text that is being emphasized.
HTML has a wide range of available tags, but often there won't be a tag that is as descriptive as you need. In those cases, it's worth noting that the meaning of tags can be changed or expanded on as you begin to construct your pages. For this reason, it's very important have a site-wide strategy for when certain structural elements are going to be used within your site. Will every page contains just one H1 tag, or is there a reason to have multiple H1s across your pages? If you are dividing the site into regions, like headers, sidebars and footers, does each of those regions get their own H1, or do they start with a lower-tiered heading? Now in truth, it doesn't matter which strategy that you use.
It just matters that you are consistent across your site. If you always use headings one way in your main content, and one way in your sidebar, it's much easier for you to write styles that control them, and much easier for user agents to discern their meaning. Again, here consistency is key. Now that we have explored some of the structural elements we're to be using on our pages, in our next movie, we'll focus on using Dreamweaver to define your document's structure.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.