Introduction to HTML Flashcards
HTML
HyperText Markup Language
A language to tell the computer how to structure a website and its content
Opening tag
Starts an element
Ex: <p>
Closing tag
Ends and element
Ex:</p>
Element
Is what structures the webpage and defines its content
Element Structure
Opening tag: <p>
Content: “Hello World!” (Content may contain other things depending on the tag used)
Closing tag: </p>
The Body
<body></body>
Only content inside the opening and closing body tags will be displayed
Code Structure
Elements inside of another element is called the child of the element it is inside. The element that contains the element inside of it is considered the parent. An element on the same level of another element is considered the sibling. It can keep going on to grandchildren, great grandchildren, and so forth.
Ex:
<body>
<h1>Conversations</h1>
<p>Hello</p>
<p>Yo what's up</p>
</body>
Paragraph Tag
<p></p>
Used in HTML coding for paragraphs, blocks of text, or just sentences if you wanted. Text, or the content, in between the element is what will be shown.
Heading Tag
<h1> — used for main headings. All other smaller headings are used for subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>
There are only 6, h1 being the largest and getting smaller as the numbers get bigger
</h6></h5></h4></h3></h2></h1>
Division Tag
<div></div>
Used for grouping elements in the HTML file together. It could be used so that the code is read easier, but it can also be used to add styling, most common to use CSS but can also be done in the same file
Attributes
Content that is added to opening tags. Attributes are made up of the following two parts:
The name of the attribute
The value of the attribute
id attribute
id=”–”
Used for many things such as metadata, or to add styling to what has been id’d
Metadata
Metadata means “data about data”. Metadata is defined as the data providing information about one or more aspects of the data; it is used to summarize basic information about data that can make tracking and working with specific data easier.
Span Tag
<span></span>
Like the div tag but used to separate content on the same line instead of groups of elements. There may be no visual difference when seen on the website because one must add styling using CSS.
<em></em>
Generally renders as italic emphasis
<strong></strong>
Generally rendered as bold emphasis
Line Break Element
<br></br> or <br></br>
If one wants to modify the spacing in the browser, they add the line break element. Multiple line breaks next to each other will be how many times the text after that will move down
Unordered Lists
<ul></ul>
Outlines individual list items with a bullet point. Individual list items must be added to the unordered list using the <li> tag.
Individual List
<li></li>
The <li> or list item tag is used to describe an item in a list. It is for unordered and ordered lists.
Ordered Lists
<ol></ol>
Like unordered lists, except that each list item is numbered. Individual list items must be added to the ordered list using the <li> tag.
Self Closing Tags
Tags that don’t have an opening AND closing tag. They are like opening and closing tags combined and have the slash at the end of the tag. These tags are for tags that don’t have any content within them.
Ex: <img></img> or <br></br>
Image Tag
<img></img> or <img></img>
Used for inputting images on the webpage. The <img></img> tag has a required attribute called src or source.
Source Attribute
src=”–”
Used for the <img></img> tag and must contain the URL of the image for it to be shown on the webpage.
Alt Attribute
Alt means alternative text. It brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.
Video Tag
<video></video>
Inputs videos on the webpage. The <video> tag requires a src attribute with a link to the video source. After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls such as pausing and playing. The reason why it is not a self closing tag like the <img></img> tag is because you're supposed to add the text, "Video not supported", which will only be displayed if the browser is unable to load the video. It will be between the opening and closing video tags, making it not a self closing tag.</video>
