what is html?

html (hypertext markup language) is the standard language used to create web pages. it's a markup language, which means it uses tags and attributes to structure and format content on the web. html tells the web browser how to display text, images, links, forms, and other elements on a webpage.

here are a few text editors we can work with today:



download whichever is best for you computer system. they're all free. i personally enjoy working with vs code.



this is a super basic html template --> 


            <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <meta name="description" content="emily d'achiardi is a web designer, artist, and girl based in santa barbara ">
            <meta name="keywords" content="internet art, coding, html, online ">
            <meta name="author" content="emily d'achiardi ">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>my first website!</title>
            </head>
            <body>
                <h1>welcome to my website</h1>
                <p>i made this today haha.</p>

                <h2>about me</h2>
                <img src="me.jpg" alt="photo of me"> 
                <p>i am a first year grad student in the art department. i mostly make stuff on the internet. </p>

                <h2>things i like to do</h2>
                <ul>
                    <li>go on bike rides</li>
                    <li>listen to <a href="https://www.hopetala.com/videos"> hope tala </a> </li>
                    <li>hang out with my cats</li>
                </ul>

                <h2>contact</h2>
                <p>if you want to reach me, you can email me: <a href="mailto:edachiardi@ucsb.edu"> here </a> </p>
            </body>
            </html>

this may look a bit confusing but we can break it down bit by bit.

1. 
 <!DOCTYPE html>

this declaration tells the browser that the document is an HTML5 document. it ensures the page is rendered correctly in modern browsers.

2. 
 <html lang="en">

this attribute specifies that the document is written in english.

3. 
 <head>

this section markrs the beginning of the head section. it contains meta-information about the document, like the title, character encoding, linked stylesheets (css), meta-tags, etc.

3. 
 <head>

This section marks the beginning of the head section. It contains meta-information about the document, like the title, character encoding, linked stylesheets (CSS), meta-tags, etc.

 <meta charset="UTF-8">

this meta tag sets the character encoding of the document to UTF-8, which supports a wide range of characters, including special symbols and non-Latin scripts.

 <meta name="description" content="emily d'achiardi is a web designer, artist, and girl based in santa barbara">

this meta tag provides a short description of the webpage's content. search engines use this description to display a summary in search results.

 <meta name="keywords" content="internet art, coding, html, online">

this meta tag lists keywords related to the page’s content. although search engines no longer heavily rely on this tag, it historically helped with search engine optimization.

 <meta name="author" content="emily d'achiardi">

this meta tag specifies the author of the webpage, in this case, it's me emily d'achiardi.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

this meta tag ensures the webpage scales properly on different screen sizes, making it responsive. it sets the width to the device’s screen width and the initial zoom level to 1.0.

 <title>my first website!</title>

this is the title of the web page, which will appear in the browser tab when the page is open. it has an opening tag, content in the middle, and a closing tag. altogether, this is now an html element. 

 </head>

this is declaring the head section is over. in html, most tags need an opening and closing tag to define where the content of the element begins and ends. this is important because it helps the browser interpret the structure and organize the content correctly.

4. 
 <body>

this is declaring the beginning of the body of the document, which holds all the visible content on the web page

 <h1>welcome to my website</h1>

this is a main heading (header one... meaning it's the largest one). these tags range from H1 to H6 (they decrease in size and boldness) 

 <p>i made this today haha.</p>

this tag represents a paragraph. (it's smaller than a header and not bolded) 

 <img src="me.jpg" alt="photo of me">

this is an image tag. we are identifying the source and asking for a path "me.jpg" (in this case the file name). in addition, there is an alternative text in case the image cannot be found. 

 <ul>

ul stands for "unordered list," meaning it's a tag used to create a list where the order of items doesn't matter. it creates a bulleted list. 

 <li>go on bike rides</li>

each li (list item) defines an item in the list. we open the tag, include content in the middle, and then close the tag. 

 <li>listen to <a href="https://www.hopetala.com/videos"> hope tala </a> </li>

the a tag is an anchor tag, which is used to create hyperlinks. the href="https://www.hopetala.com/videos" (hyper reference) attribute defines the url where the link will take the user when clicked.

 </ul>

similar to the header tag, we must close the unordered list.

 <p>if you want to reach me, you can email me: <a href="mailto:edachiardi@ucsb.edu"> here </a> </p>

similar to the hope tala example, the a tag (anchor tag) is used to create hyperlinks. the href="mailto:edachiardi@ucsb.edu" uses mailto: to tell the browser that clicking the link should open the user's default email application (like gmail, outlook, or apple mail) and start a new email to edachiardi@ucsb.edu.

5. 
 </body>

again, we must declare that the body section is complete/over.

6. 
 </html>

again, we must declare that the html document is complete/over.

now that we know the basic structure of an html document, why don't you try making your own.

you can copy + paste the sample html template and get crazy. i've provided a reference sheet below for some other useful tags.