1. HTML 태그의 근본을 묻는 좋은 질문입니다.
HTML 태그와 웹문서에 대한 개념을 잠시 정리해보죠.
우리는 배우는 것은 HTML 태그로 문서를 만드는 것입니다. 화면에 출력되는 모양을 만드는 것이라고 잘못 생각할 수 있습니다.
문서를 만든다고 하면, 여기서부터는 장의 제목이고 여기서부터는 절의 제목이고 여기는 본문이고, 여기가 한 문단이고, 여기는 목차이고, 여기를 그림 1-1이고 하는 식입니다.
문서의 각 부분을 표시하기 위해 사용하는 것인 HTML이고, 완성된 웹 문서를 화면에 출력하여 주는 것이 웹브라우저입니다.
<code> 태그의 예를 들면, 이 부분은 본문이나 텍스트가 아니라 코드이다라는 것을 문서 속에 나타냅니다.
<code>function sum()</code>

이제, <code>...</code>는 분명 태그안에 있는 부분이 코드라고 나타내었을뿐 어떤 모양으로 출력하라고 한 지시는 없습니다.
출력되는 모양을 결정하는 것은 기본적으로 웹 브라우저의 결정 사항입니다. 웹 브라우저가 그냥 까만색의 10포인터의 텍스트로 출력할 수 있죠.
다른 웹 브라우저는 빨간색의 italic 체로 출력할지도 모릅니다. 제가 웹 브라우저를 만들면 파란색에 consolas 체로 출력할지로 몰라요.

그런데, 이제 다시, 근본적으로 각 태그가 출력되는 모양, 즉 문서가 출력되는 모양을 HTML 페이지의 제작자가 만들어 웹 브라우저에게 출력하도록 지시할 수 있습니다.
이것이 바로 CSS3 스타일 시트이며, 4장,5장에 걸쳐 배우는 내용입니다.

2. 시맨틱 태그 역시 앞의 1번의 해설처럼, 화면에 출력할 목적으로 만드는 것이 아닙니다. 문서의 구조를 나타내는 태그입니다.
3. figure id=1-1에 대해
새싹님의 말처럼 id를 이용하여 앵커를 달아 놓았습니다. 사실 id는 앵커를 다는데 사용하기 보다는 CSS3 스타일과 뒤에 8,9장에서 다루는 것으로 자바스크립트로 이 객체를 접근하기 위한 용도입니다.

이상입니다.