Chapter 5 - Marking Up Text Flashcards
Explain briefly why it is important to choose html elements semantically (in a way that most accurately describes the content’s meaning)
First - if you don’t like how it looks in the browser, change it with a style sheet.
But, a semantically marked up doc ensures your content is available and accessible in the widest range of browsing environments, from desktop computers & mobile devices to assistive screen readers - it also allows nonhuman readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page
Discuss the Paragraph element
<p>... </p>
…. the most rudimentary elements of a text doc… you open with a <p> and close with a </p>… paragraphs are always displayed as a block…. they may contain text, images and other inline elements (referred to as phrasing content).. however, they may not contain other block elements
What is a naked text?
you must assign an element to all text in a doc. In other words, all text must be enclosed in some sort of element. Text that isn’t contained within tags is called a “naked” or “anonymous” text and can cause a document to be invalid
Discuss the Headings element
There are 6 levels of headings, from h1 to h6. When you add headings to content, the browser uses them to create a document outline for the page. Search engines look at heading levels as part of their algorithms (information in higher level headings maybe given more priority) - For this reason, it is best practice to start w/ the level 1 heading & work down in numerical order
Discuss the Horizontal Rule <hr> element
<hr></hr>
Used if you want to indicate that one topic or thought has completed and another is beginning, you can insert what is called in HTML5 a “paragraph-level thematic” break using the hr element - it is used as a logical divider between sections of a page or paragraphs of a text - hr element adds a logical divider between sections or paragraphs of text w/o introducing a new heading level
Prior html versions (prior to html 5) - hr was defined as an horizontal rule b/c it inserted a horizontal line on the page - browsers still render a shaded rule, put it on a line by itself w/ space above and below by default but it now has a new semantic purpose
Discuss the hgroup element
- For identifying a stack of headings as a group. Browsers that support hgroup know to count only the highest-ranked heading in the outline and ignore the rest
<h1>Creating a Simple Page</h1>
<h2>(HTML Overview)</h2>
List the available Lists elements
all list elements & the items that go in them - are displayed as block elements by default, which means that they start on a new line and have some space above and below. Any list can be nested within another list; it just has to be placed within a list item
Unordered Lists: display by default with a bullet before each item. open & close with <ul> </ul> respectively, and each item in the list gets marked up as a list item <li> </li>… there should be no bullets in the source document. the only thing that is permitted within a ul list is one more list items. you can’t put other elements in there or untagged text - however, you can put any type of flow element within a list item (li)
Ordered lists: for items that occur in a particular order, such as step-by-step instructions or driving directions. <ol> </ol>… the browser automatically inserts numbers before ordered list items. Ordered list elements must contain one or more list item elements. Also, if you don’t want an ordered list to start with a 1, you can use the start attribute in the <ol> element i.e. <ol>
Description Lists: Used for any type of name/value pairs such as terms & definitions. The content of a dl is some # of dt elements indicating the names and dd elements for their respective values - dt - terms & dd - definitions… example:
<dl>
<dt>...</dt>
<dd>...</dd> (can contain any type of flow element)
</dl>
</ol></ol>
Discuss the Blockquote element
used to indicate a long quotation, a testimonial, or a section of copy from another source…. it is recommended that content within blockquote elements be contained in other elements such as paragraphs, headings, or lists…
<blockquote>
<p> xxxxxx </p>
</blockquote>
Discuss the Preformatted Text element
Since browsers ignore whitespace such as line returns and character spaces in the source doc - but some types of info, such as code examples or poetry, the whitespace is important for conveying meaning. <pre>….</pre>
Discuss the Figures element
Used for content that illustrates or supports some point in the text. A figure may contain an image, a video, a code snippet, text or even a table - pretty much anything that can go in the flow of web content - and should be treated as a self-contained unit. …
Discuss the Sections element
to divide long web documents into thematic sections. they typcially have a heading (inside the section element) and any other content that has a meaningful reason to be grouped together. ….
Discuss the Article element
used for self-contained works that could stand alone or be reused in a different context. Useful for magazine or newspaper articles, blog posts, comments, or other items that could be extracted for external use.
Discuss the Aside (sidebars) element
…….. identifies content that is related but tangential to the surrounding content
Discuss the Navigation (nav) element
a semantic way to identify navigation for a site. It should be used for links that provide primary navigation around a site or a lengthy section or article
Discuss the header element
used for introductory material that typically appears at the beginning of a web page or at the top of a section or article
…
