HTML Fundamentals
Published:
This lesson covers HTML Fundamentals.
HTML Fundamentals
HTML, HyperText Markup Language
- give meaning to otherwise plain text, which the browser can then use to determine how to display that text.
- HTML is not a programming language but rather a markup language
- In modern usage, HTML describes the semantic meaning of content: it marks what content is a heading, what content is a paragraph, what content is a definition, what content is an image, what content is a hyperlink, and so forth.
HTML Elements
case insensitive, but always write in all lowercase
Line breaks and white space around tags (including indentation) are ignored
Some Example Elements
<h1>: a 1st-level heading </h1> <h2>: a 2nd-level heading (and so on, down to <h6>) <p>: a paragraph of text <a>: an “anchor”, or a hyperlink <img>: an image <button>: a button <em>: emphasized content. Note that this doesn’t mean italic (which is not semantic), but emphasized (which is semantic). The same as _text_ in Markdown. <strong>: important, strongly stated content. The same as **text** in Markdown <ul>: an unordered list (and <ol> is an ordered list) <li>: a list item (an item in a list) <table>: a data table <form>: a form for the user to fill out <svg>: a Scalable Vector Graphic (a “coded” image) <circle>: a circle (in an <svg> element) <div>: a division (section) of content. Also acts as an empty block element (one followed by a line break) <span>: a span (section) of content. Also acts as an empty inline element (one not followed by a line break)Comments
<!-- this is a comment -->
Attributes
<tag attributeA="value" attributeB="value"> content </tag><a href="https://google.com">Google</a> <img src="pic.jpg" alt="text">Global Attributes
id
Every HTML element can include an id attribute, which is used to give it a unique identifier so that you can refer to it later (e.g., from CSS or JavaScript).
id attributes are named like variable names, and must be unique on the page
<h1 id="title">My Web Page</h1>The id attribute is most commonly used to create “bookmark hyperlinks”, which are hyperlinks to a particular location on a page.
You do this by including the id as the fragment of the URI to link to (e.g., after the # in the URI).
<a href="index.html#title">Link to title</a> <a href="#title">Link to element on current page with id=title</a>
lang
indicate the language in which the element’s content is written. Programs reading this file might use that to properly index the content, correctly pronounce it via a screen reader, or even translate it into another language
<p lang="sp">No me gusta</p>Specify default language of the page
<html lang="en">
Empty Elements
no closing tag
<img src="picture.png" alt="description of image for screen readers and indexers">
Nesting Elements
This model of HTML as a tree of “nodes”—along with an API (programming interface) for manipulating them— is known as the Document Object Model (DOM).
Block vs. Inline Elements
- Block elements form a visible “block” on a page
- they will be on a new line from the previous content, and any content after it will also be on a new line. These tend to be structural elements for a page
- headings (<h1>), paragraphs (<p>), lists (<ul>), etc.
- A <div> (“division”) is the most basic block element: it represents a block of content but provides no other semantic meaning.
- Inline elements are contained “in the line” of content.
- No line break
- used to modify the content rather than set it apart, such as giving it emphasis () or declaring that it to be a hyperlink ()
- A is the most basic inline element: it represents an inline span of content but provides no other semantic meaning
- It is invalid to nest a block element inside of an inline element
- Each element has a different default display type (e.g., block or inline, but it is also possible to change how an element is displayed using CSS
- Block elements form a visible “block” on a page
Web Page Structure
Doctype Declaration
- All HTML files start with a document type declaration, commonly referred to as the “Doctype.” This tells the rendering program (e.g., the browser) what format and syntax your document is using.
<!DOCTYPE html> <html lang="en"> ... </html>- It isn’t technically an HTML tag (it’s actually XML)
The <head> Section
document “header” (the <head> is nested inside the <html> at the same level as the <body>).
The content of the <head> element is not shown on the web page—instead it provides extra (meta) information about the document being rendered.
title
<title>, which specifies the “title” of the webpage:Browsers will show the page title in the tab at the top of the browser window, and use that as the default bookmark name if you bookmark the page.
- also used by search indexers and screen readers for the blind, since it often provides a strong signal about what is the page’s subject.
meta
<meta charset="UTF-8">tells the browser how to convert binary bits from the server into letters.
<meta name="author" content="your name"> <meta name="description" content="description of your page"> <meta name="keywords" content="list,of,keywords,separate,by,commas">
Web Page Template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="your name"> <meta name="description" content="description of your page"> <title>My Page Title</title> </head> <body> ... Content goes here! ... </body> </html>