Lesson 2 Flashcards
what are semantics
the practice of giving content on the page meaning and structure by using the proper element. Semantic code describes the value of content on a page, regardless of the style or appearance of that content.
what are semantics
the practice of giving content on the page meaning and structure by using the proper element. Semantic code describes the value of content on a page, regardless of the style or appearance of that content.
what is a block element
block elements begin on a new line stacking one on top of the other and occupy any available width they may be nested one within the other and wrap inline elements(used for larger pieces of content)
what is an inline element
does not begin on a new line. falls into the normal flow of a document, lining up one after the other and only maintain the width of their content. may be nested within one another however they cannot wrap block level elements.(used for smaller pieces of content)
<div></div>
block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design.
<span></span>
an inline-level element commonly used to identify smaller groupings of text within a block-level element.
comment
heading
block level elements
Headings help to quickly break up content and establish hierarchy, and they are key identifiers for users reading a page. They also help search engines to index and determine the content on a page.(should not be used to make text bold or big there are better ways to do that)
paragraphs
Headings are often followed by supporting paragraphs. Paragraphs are defined using the <p> block-level element. Paragraphs can appear one after the other, adding information to a page as desired. </p>
bold
The <b> element, on the other hand, semantically means to stylistically offset text, which isn’t always the best choice for text deserving prominent attention</b>
bold
The <b> element, on the other hand, semantically means to stylistically offset text, which isn’t always the best choice for text deserving prominent attention</b>
what is a block element
block elements begin on a new line stacking one on top of the other and occupy any available width they may be nested one within the other and wrap inline elements(used for larger pieces of content)
what is an inline element
does not begin on a new line. falls into the normal flow of a document, lining up one after the other and only maintain the width of their content. may be nested within one another however they cannot wrap block level elements.(used for smaller pieces of content)
<div></div>
block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design.
<span></span>
an inline-level element commonly used to identify smaller groupings of text within a block-level element.
comment
heading
block level elements
Headings help to quickly break up content and establish hierarchy, and they are key identifiers for users reading a page. They also help search engines to index and determine the content on a page.(should not be used to make text bold or big there are better ways to do that)
paragraphs
Headings are often followed by supporting paragraphs. Paragraphs are defined using the <p> block-level element. Paragraphs can appear one after the other, adding information to a page as desired. </p>
strong
To make text bold and place a strong importance on it, we’ll use the <strong> inline-level element.</strong>
bold
The <b> element, on the other hand, semantically means to stylistically offset text, which isn’t always the best choice for text deserving prominent attention</b>
italicize
To italicize text, thereby placing emphasis on it, we’ll use the <em> inline-level element.
The other option, the <i> element, is used semantically to convey text in an alternative voice or tone, almost as if it were placed in quotation marks</i></em>
header
The element, like it sounds, is used to identify the top of a page, article, section, or other segment of a page. In general, the element may include a heading, introductory text, and even navigation.
navigation
The element identifies a section of major navigational links on a page. The element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.
article
The element identifies a section of major navigational links on a page. The element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.
section
The element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the element may be generic in nature, but it’s useful to identify all of the content as related.
aside
The element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an element, for example, the element may identify content related to the author of the article.
footer
The element identifies the closing or end of a page, article, section, or other segment of a page. Generally the element is found at the bottom of its parent. Content within the element should be relative information and should not diverge from the document or section it is included within.
the small element
semantically represents side comments and small print—perfect for our copyright.
mailto
<a>…</a>
open new window
<a></a>
link back to top
…
<a>Back to top</a>
…
summary
Semantics, as discussed within this lesson, are essential for providing our HTML with structure and meaning. Moving forward we’ll periodically introduce new elements, all of which will come with their own semantic meaning. It is the meaning of all of these elements that will provide our content with the most value.
Once again, in this lesson we covered the following:
What semantics are and why they are important
<div>s and s, and the difference between block- and inline-level elements
Which text-based elements best represent the content of a page
The HTML5 structural elements and how to define the structure and organization of our content and page
How to use hyperlinks to navigate between web pages or websites
Hopefully you’re starting to feel pretty good about HTML. There is still quite a bit to learn, but the foundation is in place. Next up, we’ll take a deeper look into CSS.</div>
