HTML Basics Flashcards
What does HTML stand for?
Hyper Text Markup Language
Is HTML a full fledged programming language?
No. It is a limited languge in that its used to “mark up” content for web browsers. In other words, it tells browsers what kind of data they are dealing with.
What does a11y or A11Y stand for?
Accessibility ( in regards to programming)
What is programming with A11Y in mind?
Programming with the usability of different types of end users in mind ( sighted vs unsighted, etc).
What are Google Chrome Developer Tools?
Tools that can be used to inspect and modify the HTML on any site. See a feature on a site you like and wonder how it’s implemented? Developer Tools makes this (and much more) possible.
What is an element in HTML?
To generalize, an HTML element usually consists of some content (could be plain text or additional HTML elements) wrapped by opening and closing tags.
What is an Attribute in HTML?
Attributes are for setting properties on an HTML element
What is an Attribute in HTML?
Attributes are for setting properties on an HTML element
What are self-closing tags?
Most HTML elements require an opening/closing tag structure,
Yet, some are self-closing and do not have inner content.
ex: <img></img> element- its used to embed images in an html doc, needs no inner content or closing tag.
<p>This paragraph has an image: <img></img></p>
.
Attributes - more about
Some attributes, like class and id, are valid on almost any HTML element.
We present them now because they are core HTML attributes that can be used on all but a handful of elements (specifically, they can’t be used on: , , , , or ).
Other attributes are specific to a particular element. The href attribute on our anchor element above is specific to anchor elements.
Whats are HTML and CSS used for?
HTML is aboutstructuringcontent while CSS
Ex: HREF coded out
<a>avlink</a>
HTML attributes look like what?
HTML attributes consist of a name and a value enclosed in quotes
Elements- Anchors
<a> </a><a></a> usually some website url will be the contents
What are Tags?
Used to mark of the beginning and ending to an element
Ex: Tag structure
Both opening and closing tags consist of angle brackets and the tag name (< … >), with closing tags distinguished by a forward slash ( …>).
How is a closing tag coded out?
Closing tags are distinguished by a forward slash ( …>).
How is an opening tag coded out?
(< … >)
What does an full open/close tag sequence look like>?
()()
What is the <img></img> element used for?
To embed images in an HTML document.It has no inner content and doesn’t require a closing tag
HTML vs. CSS
HTML tells the browserwhatcontent to represent, while CSS tells the browserhowthat content should appear.
What is “commenting out code”?
Developers commonly need to add what are called comments to code.
A code comment is a line of text that is used to document some feature or oddity of a given piece of code for fellow project collaborators.
ex:
Commenting out code is also common way of temporarily disabling code, often times for the purpose of debugging.
Shortcut for commenting code in your codebody
Shortcuts:
Windows: Ctrl + /
Mac: Mac Square symbol + /
Ex: Commenting Code structure
Can an element be placed inside of line of commented code?
Yes. If an element that is placed inside the line of commented code, that element will not be rendered on the page
ex:
<p>This is a normal paragraph</p>
The second paragraph element will not render.
What is Semantic HTML?
when you’re choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content.
What is Semantic HTML?
Semantic HTML is a principle that says when you’re choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content.
Why is semantic HTML so important?
Semantic HTML is always preferable because the names of the HTML elements we choose help browsers, web-crawlers, screen readers, and project collaborators to better understand our content.
If you wanted to denote a list on your webpage and using the principle of Semantic HTML, which element would be best for use:
A. <ul>
B. <div>
C. <p></p></div></ul>
Answer:
A.<ul> unordered list.
This element most closely resembles the content we want on the page which is a list. </ul>
Can <div> be used as a catchall element instead of using the closest semantic element in my HTML coding?</div>
Technically, yes,<div> can be used.
However it is always best to use Semantic HTML because it is the easiest to delineate. Code that is composed entirely of <div> code snippets is less obvious and thereby can be harder to read and interpreted by browsers, web crawlers, screen readers and project collaborators.
EX: HTML code using <div> to direct page structure:
<div class="paragraph">These are a few of my favorite things:</div>
<div class="unordered-list">
<div class="list-item">pizza</div>
<div class="list-item">cats
vs. HTML code using Semantic HTML :
<p>These are a few of my favorite things:</p> <ul> <li>pizza</li> <li>cats</li> <li>coding</li> <li>chocolate</li> <li>coffee</li> </ul>
Both work, but Semantic HTML is always better to use.</div></div></div></div></div>
Basic HTML Elements I should know
<div>
<p>
</p><ul>
<a></a></ul></div>
Resource: List of all HTML elements
https: //developer.mozilla.org/en-US/docs/Web/HTML/Element
tiny: https://tinyurl.com/mozhtmlelementslist
Resource: How the Web Works
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
Resource: How the Web Works in One Easy Lesson
http://mkcohen.com/how-the-web-works-in-one-easy-lesson
Practice Resource:Intro & Semantic HTML
“Getting to Know HTML”
https://learn.shayhowe.com/html-css/getting-to-know-html/
