1. Header and Nav tag
- A (header) is a container usually for either navigational links or introductory content containing (h1) to (h6) headings.
<header>
<h1>
Everything you need to know about pizza!
</h1>
</header>-
By using a header tag, our code becomes easier to read. It is much easier to identify what is inside of the h1‘s parent tags,
as opposed to a div tag which would provide no details as to what was inside of the tag. -
A nav is used to define a block of navigation links such as menus and tables of contents. It is important to note that nav can be used inside of the header element but can also be used on its own.
-
nav 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>- By using nav as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.
Before
<body>
<div id="header">
<h1>Navigational Links</h1>div는 따로 정보가 들어가있지 않아서 id로 정보 추가적으로 넣어줬어야 한다
이럴 바엔 header/ nav을 쓰는 것이 더 낫다
After
<body>
<header>
<h1>Navigational Links</h1>
<div id="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</header>2.Main and Footer
- help describe where an element is located based on conventional web development standards.
- The element main is used to encapsulate the dominant content within a webpage. This tag is separate from the footer and the nav of a web page since these elements don’t contain the principal content. By using main as opposed to a div element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content.
<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main>- The content at the bottom of the subject information is known as the footer, indicated by the footer element. The footer contains information such as: Contact information, Copyright information, Terms of use, Site Map, Reference to top of page links
<footer>
<p>Email me at Codey@Codecademy.com</p>
</footer>3.Article and Section
- section defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
- For example, content with the same theme such as articles about cricket can go under a single section. A website’s home page could be split into sections for the introduction, news items, and contact information.
<section>
<h2>Fun Facts About Cricket</h2>
</section>- The article element holds content that makes sense on its own. -
- article can hold content such as articles, blogs, comments, magazines, etc. - An article tag would help someone using a screen reader understand where the article content (that might contain a combination of text, images, audio, etc.) begins and ends.
<section>
<h2>Fun Facts About Cricket</h2>
<article>
<p>A single match of cricket can last up to 5 days.</p>
</article>
</section>
- It is important to note that a section element could also be placed in an article element depending on the context.
4.The Aside Element
- The aside element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
- This element can be used alongside other elements such as article or section. Some common uses of the aside element are for:
Bibliographies, Endnotes, Comments, Pull quotes, Editorial sidebars,Additional information
- article is the important content. Meanwhile the information within the aside enhances the information in article but is not required in order to understand it.
<article>
<p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
<p>
Babe Ruth once stated, “Heroes get remembered, but legends never die.”
</p>
</aside>- article is the important content. Meanwhile the information within the aside enhances the information in article but is not required in order to understand it.
5. Figure and Figcaption
- With aside, we learned that we can put additional information next to a main piece of content
- but what if we wanted to add an image or illustration next to a main content? That is where figure and figcaption come in.
- figure is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
<figure>
<img src="overwatch.jpg"/>
</figure>- we can encapsulate our img tag. In figure, we used the img tag to insert an image onto the webpage.
- We used the src attribute within the img tag so that we can link the source of the image.
- It’s possible to add a caption to the image by using figcaption
- figcaption is an element used to describe the media in the figure tag.
- Usually, figcaption will go inside figure```
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>6. Audio and Attributes
- The audio element is used to embed audio content into a document. Like video, audio uses src to link the audio source.
<audio>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>-
we created an audio element.
-
Then we created a source element to encapsulate our audio link.
In this case, iAmAnAudioFile.mp3 is our audio file. -
we specified the type by using type and named what kind of audio it is.
-
Although not always necessary, it’s recommended that we state the type of audio as it helps the browser identify it more easily and determine if that type of audio file is supported by the browser.
-
we need to give it controls. This is where attributes come in.
-
Attributes provide additional information about an element.
-
Attributes allow us to do many different things to our audio file.
-
There are many attributes for audio but today we’re going to be focusing on controls and src.
- controls: automatically displays the audio controls into the browser such as play and mute.
- src: specifies the URL of the audio file. -
For example, here’s how we could add both autoplay functionality and audio controls:
<audio autoplay controls>example :
<audio controls >
<source src="https://content.codecademy.com/courses/
SemanticHTML/dogBarking.mp3" type="audio/mp3">
</audio>7. Video and Embed
-
By using a video element, we can add videos to our website.
-
video element makes it clear that a developer is attempting to display a video to the user.
-
Some attributes that can alter a video playback include:
- controls:
When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option. - autoplay:
The attribute which results in a video automatically playing as soon as the page is loaded. - loop:
This attribute results in the video continuously playing on repeat.
- controls:
<video src="coding.mp4"
controls>Video not supported</video>-
Another tag that can be used to incorporate media content into a page is the embed tag, which can embed any media content including videos, audio files, and gifs from an external source.
-
websites that have an embed button have some form of media content that can be added to other websites.
-
The embed tag is a self-closing tag, unlike the video element.
-
태그는 mp3,asf,wma,wmv,swf등의 확장자를 가진 파일을 인터넷에서 재생시켜주는 태그입니다. 즉, 동영상이건 플래시건 음악이건 죄다 이걸로 재생 가능. src 꼭 필요
<embed src="download.gif"/>