Code Academy
Text Context Tags
Headings are meant to emphasize or enlarge only a few words. If you want to add blocks of text in HTML, you can use a paragraph, div, or span: Paragraphs (<p>) simply contain a block of plain text. <div>s can contain any text or other HTML elements. They are primarily used to divide HTML documents into sections. <span>s contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.
HTML
HyperText Markup Language. A markup language is a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" to be processed. In HTML, the computer can interpret raw text that is wrapped in HTML elements. These elements are often nested inside one another, with each containing information about the type and structure of the information to be displayed in the browser. HyperText is text displayed on a computer or device that provides access to other text through links, also known as "hyperlinks." In fact, you probably clicked on many, many hyperlinks on your path to this Codecademy course!
Headings
In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content. The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size. <h1> - used for main headings. All other smaller headings are used for subheadings. <h2> <h3> <h4> <h5> <h6>
Unordered Lists
In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point. The <ul> element cannot hold raw text and cannot automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list. <ul> <li>Limes</li> <li>Tortillas</li> <li>Chicken</li> </ul>
Videos
In addition to images, HTML also supports displaying videos. Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag however, the <video> element requires an opening and a closing tag. <video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>
Indentation
Indentation also helps make code easier to read. It makes parent-child relationships visible.
Ordered Lists
Some lists, however, will require a bit more structure. HTML provides the ordered list for when you need the extra ordering that unordered lists don't provide. Ordered lists are like unordered lists, except that each list item is numbered. You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags. <ol> <li>Preheat the oven to 350 degrees.</li> <li>Mix whole wheat flour, baking soda, and salt.</li> <li>Cream the butter, sugar in separate bowl.</li> <li>Add eggs and vanilla extract to bowl.</li> </ol>
Text Style Tags (bold and italic)
Tags provided by HTML exist to organize and describe the content of web pages. Two of these HTML tags are <em> and <strong>. They are used to signal that the text within them should be "emphasized" or "strong."
<head> Element
The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. The opening and closing head tags (<head></head>) typically appear as the first item after your first HTML tag.
Images
The <img> tag allows you to add an image to a web page. This is another example of a self-closing tag. <img src="image-location.com" /> The <img> tag has a required attribute called src. The src attribute must be set to the image's source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly. This example is our first mention of an attribute. However, the ids that we added to our div tags earlier are also attributes! Attributes provide more information about an element's content. They live directly inside of the opening tag of an element. Attributes are made up of the following two parts: The name of the attribute The value of the attribute
Image Alts
The alt attribute is applied specifically to the <img> element. The value of alt should be a description of the image. <img src="#" alt="A field of yellow sunflowers" /> The alt attribute also serves the following purposes: If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image's description out loud to the visually impaired user.
Line Break Element
The spacing between code in an HTML file doesn't affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML's line break element: <br />. The line break element is a self-closing tag. You can use it anywhere within your HTML code and a line break will be shown in the browser. <p>The Nile River is the longest river <br /> in the world, measuring over 6,850<br /> kilometers long (approximately 4,260 <br /> miles).</p> The code in the example above will result in an output that looks like the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
URL
Uniform Resource Locator used for adding images
Page Titles
What kind of metadata about the web page can the <head> element contain? If you navigate to the Codecademy catalog and look at the top of your browser (or at the tab you have open), you'll notice the words All Courses | Learn to code interactively | Codecademy, which is the title of the web page. The browser displays the title of the page because the title can be specified directly inside of the <head> element, by using a <title> tag. <!DOCTYPE html> <html> <head> <title>Mallory's Coding Journal<title> </head> </html>
Self-Closing Elements
contain all the information the browser needs to render the element inside a single tag. Also, because they are single tags, they cannot wrap around raw text or other elements. The line break element <br /> is one example of a self-closing tag. You can use it anywhere within your HTML code. The result is a line break in the browser.
Whitespace
if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding space between the paragraph elements in the index.html file. The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow. <!DOCTYPE html> <html> <body> <h1>Whitespace</h1> <p>Whitespace and indentation make html documents easier to read.</p> </body> </html>
Document Declaration
A way to let your web browser know you're using HTML (language). The declaration looks like this: <!DOCTYPE html>. This declaration is an instruction. It tells the browser what type of document to expect, along with what version of HTML is being used in the document.
Opening and Closing HTML Tags
Anything between the opening <html> and closing </html> tags will be interpreted as HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code. Alsot <p> and </p> - anything with a forward slash is a closing tag.
Comment in your code
Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser.
Parent-Child Relationships
HTML documents are organized as a collection of parent-child relationships. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element. <body> <div> <h1>Student</h1> <p>Get Started</p> </div> </body> In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are in the same level, they are considered siblings, and are both grandchildren of the <body> element.
