Introduction to HTML (pt. 1)
<body> element
Once the file has a body, many different types of content can be added within the body, like text, images, buttons, and much more. Example: <!DOCTYPE html> <html> <head> <title>I'm Learning To Code!</title> </head> <body> </body> </html>
HTML tags
To begin adding HTML structure and content, we must first add opening and closing <html> tags, like so: <!DOCTYPE html> <html> *CONTENT CODE* </html> Anything between <html> and </html> will be considered HTML code.
Styling text with HTML
You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> tag highlights important text. <em> italicizes text <strong> boldens texts
Document Type Declaration
A web browser must know what language a document is written in before they can process the contents of the document. Example for HTML: <!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. <!DOCTYPE html> must be the first line of code in all of your HTML documents.
Non-visible Comments <!-- -->
HTML files also allow you to add comments to your code. Comments begin with <!-- and end with -->. Any characters in between will be treated as a comment. Example: <!-- This is a comment that the browser will not display. -->
HTML Anatomy
HTML is composed of elements. These elements structure the webpage and define its content. Let's take a look at how they're written.
HTML Structure & Hierarchy
HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. 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. Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You'll learn more about webpage hierarchy in when you start digging into CSS.
<h1> header elements
Headings in HTML can be likened to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader's attention. Other times, headings are used to describe content, like the title of a movie or an educational article. HTML follows a similar pattern. 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> Example: <h1>BREAKING NEWS</h1>
HTML
Hyper Text Markup Language - A markup language is a computer language that defines the structure and presentation of raw text. - In HTML, the computer can interpret raw text that is wrapped in HTML elements. - HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.
Attributes
If we want to expand an element's tag, we can do so using an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts: - name of the attribute - value of the attribute One commonly used attribute is the id. We can use the id attribute to specify different content (such as <div>s) and is really helpful when you use an element more than once. ids have several different purposes in HTML, but for now, we'll focus on how they can help us identify content on our page.
<p> Paragraph element
If you want to add content in paragraph format, you can add a paragraph using the paragraph element <p>
Unordered List <ul>
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 should not hold raw text and won't 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.
<video> element
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. In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage. 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: pause, play and skip. The text, "Video not supported", between the opening and closing video tags will only be displayed if the browser is unable to load the video. Some websites offer an html code option to embed videos onto a webpage.
<div> element
One of the most popular elements in HTML is the <div> element. <div> is short for "division" or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together. <div>s can contain any text or other HTML elements, such as links, images, or videos. Remember to always add two spaces of indentation when you nest elements inside of <div>s for better readability.
Ordered List <ol>
Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last. You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.
<span> element
Similar to the <p> or paragraph element, the span element contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content. It's best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it's better to use a <div>.
<head> and <title> element
The <head> element will contain information about the page that isn't displayed directly on the actual web page. This gives the browser some information about the page. <!DOCTYPE html> <html> <head> <title>My Coding Journal</title> </head> </html> If we were to open a file containing the HTML code in the example above, the browser would display the words My Coding Journal in the title bar (or in the tab's title). The title element is displayed as the name of the tab in your browser.
<img> element
The <img> tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. 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. 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.
alt attribute
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. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot "see" the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
<br/> or <br> 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 unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.
<li> list element
Used for individual list items within an unordered or ordered list (ul or ol)
What is HTML?
Welcome to the world of code! Last year, millions of learners from our community started with HTML. Why? HTML is the skeleton of all web pages. It's often the first language learned by marketers and designers and is core to front-end development work. If this is your first time touching code, we're excited for what you're about to create. So what exactly is HTML? HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose "Inspect," and you'll see HTML in a panel of your screen. Learning HTML is the first step in creating websites, but even a bit of knowledge can help you inject code snippets into newsletter, blog or website templates. As you continue learning, you can layer HTML with CSS and JavaScript to create visually compelling and dynamic websites. But for now, we're going to focus on how to add and modify basic content on a page, like text, images, and videos. Don't worry if the websites look ugly — we're just getting started.
