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.
