HTML Fundamentals

5 minute read

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

    Basic syntax for an HTML element.

    • 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

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

      An example DOM tree (a tree of HTML 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
  • 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>