# 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)


• <!-- 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

![An example of element nesting: the element is nested in the <h1> element’s content.](https://info340.github.io/img/html/nesting.png)

• 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
• 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)

• 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">