HTML Intro
Styling Text You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> tag highlights important text.
<p><strong>The Nile River</strong> is the <em>longest</em> river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).</p>
<br> Line Break Element The <br> line break element will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag.
A line break haiku.<br> Poems are a great use case.<br> Oh joy! A line break.
An HTML closing tag is used to denote the end of an HTML element. The syntax for a closing tag is a left angle bracket < followed by a forward slash / then the element name and a right angle bracket to close >.
<body> ... </body>
HTML Structure HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.
<body> <div> <h1>It's div's child and body's grandchild</h1> <h2>It's h1's sibling</h2> </div> </body> <body> <div> <h1>Sibling to p, but also grandchild of body</h1> <p>Sibling to h1, but also grandchild of body</p> </div> </body>
<body> Body Element The <body> element represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers. Note: There can be only one <body> element in a document.
<body> <h1>Learn to code with Codecademy :)</h1> </body>
add id attriutes to opening tag Unique ID Attributes In HTML, specific and unique id attributes can be assigned to different elements in order to differentiate between them. When needed, the id value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. Valid id attributes should begin with a letter and should only contain letters (a-Z), digits (0-9), hyphens (-), underscores (_), and periods (.).
<div id= "intro"> blah </div>
The syntax for a single HTML tag is an opening angle bracket < followed by the element name and a closing angle bracket >. Here is an example of an opening <div> tag.
<div>
Displaying Text If you want to display text in HTML, you can use a paragraph or span: Paragraphs (<p>) contain a block of plain text. <span> 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.
<div> <h1>Technology</h1> </div> <div> <p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p> </div>
Used for main headings. All other smaller headings are used for subheadings.
<h1>
<h1>-<h6> Heading Elements HTML can use six different levels of heading elements. The heading elements are ordered from the highest level <h1> to the lowest level <h6>.
<h1>Breaking News</h1> <h2>This is the 1st subheading</h2> <h3>This is the 2nd subheading</h3> ... <h6>This is the 5th subheading</h6>
Element Content The content of an HTML element is the information between the opening and closing tags of an element.
<h1>Codecademy is awesome! 🙂</h1>
<img> Image Element HTML image <img> elements embed images in documents. The src attribute contains the image URL and is mandatory. <img> is an empty element meaning it should not have a closing tag. 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. A URL is the web address or local address where a file is stored.
<img src="image.png"> <img src="image-location.jpg" />
alt Attribute An <img> element can have alternative text via the alt attribute. The alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser, if the image is blocked from being displayed, or if the image has not been received from the URL. The text will be read aloud if screen reading software is used and helps support visually impaired users by providing a text descriptor for the image content on a webpage. In order to make the Web more inclusive, we need to consider what happens when assistive technologies such as screen readers come across image tags. The alt attribute, which means alternative text, 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. 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. 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. If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty.
<img src="path/to/image" alt="text describing image" /> <img src="#" alt="A field of yellow sunflowers" />
<ol> Ordered List Element The <ol> ordered list element creates a list of items in sequential order. Each list item appears numbered by default. basically numbered bullet points
<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>
HTML Attributes HTML attributes are values added to the opening tag of an element to configure the element or change the element's default behavior. In the provided example, we are giving the <p> (paragraph) element a unique identifier using the id attribute and changing the color of the default text using the style attribute. Attributes are made up of the following two parts: The name of the attribute The value of the attribute Attribute Name and Values HTML attributes consist of a name and a value using the following syntax: name="value" and can be added to the opening tag of an HTML element to configure or change the behavior of the element.
<p id="my-paragraph" style="color: green;">Here's some text for a paragraph that is being altered by HTML attributes</p>
<p> is the opening tag. Hello World! is the content. </p> is the closing tag.
<p>Hello world!</p> ^ and ^ are the ELEMENT and the opening and closing TAGS Hello World is the CONTENT
<ul> Unordered List Element The <ul> unordered list element is used to create a list of items in no particular order. Each individual list item will have a bullet point by default. 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. Ordered lists <ol> Unordered lists <ul> basically bullet points
<ul> <li>Play more music 🎸</li> <li>Read more books 📚</li> </ul>
<video> Video Element The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player. Note: The content inside the opening and closing tag is shown as a fallback in browsers that don't support the element. 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.
<video src="test-video.mp4" controls> Video not supported </video> <video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>
